개요
어느날엔가 개발 블로그를 끄적거리다가 어느 회사의 채용페이지를 보았는데 눈에 띄는 부분이 있었다.
시맨틱한 마크업
분명 어디에서나 보았다. 어디에서는 시멘틱 웹, 시멘틱 검색, 시멘틱 마크업 등등의 이름으로 보였던것 같다.
누구나 신경 쓰는 부분일 텐데 정확한 정의가 떠오르지 않았다.
뜻
Semantic
뜻) 의미의, 의미론적인
이름이 모든걸 설명하고 있었다. 마크업을 작성할때 태그나 구조를 의미를 두고 작성하는 이것이 전부였다.
태그들의 이름들도 다 의미가 있고 그를 따르기만 하면 되는 것이다. 제목은 heading 뜻을 가진 <h*> 태그에 문단에 해당하는 부분은 paragraph(문단)의 뜻을 가진 태그인 <p>태그를 써서 작성한다.
마그업을 구성하는 이미지들에 있어서도 이러한 점들을 고려해야 한다. 내용에 사용되는 이미지로서의 이미지와 div(division)에 background를 사용한다거나 아이콘에 사용 할 수 있는데, 태그로 구분하여 문맥에서 사용하는 이미지로서의 구분을 해줘야 한다. 또한 alt속성 등을 확실하게 해주어 seo의 최적화와 더불어 문서에 의미를 부여해 줄 수 있다.
이러한 점에서 seo의 최적화에 아주 큰 기여를 하기도 한다.
주의해야다고 느낀 것들..
대표적이고 많이 쓰는 축에 속한다고 생각한것이 <b> 와 <strong> 태그와 같은 것들이다.
두개의 태그를 랜더링 후 보게되면, 대부분(아마도 모든)의 브라우져들은 둘다 font-weight: bold; 라는 스타일로 랜더링 해주기 때문에 무심코 차이를 두지 않고 사용 했을 태그들이다.
b는 bold, strong은 strong, 즉 진하게, 강하게 라는 각각의 뜻을 가지고 있다. 단순히 해석한 텍스트의 차이만큼의 차이가 있다. <b>는 텍스트를 진하게 표현하라는 의미에서의 진하게 표현된 것이고, <strong>은 강하게 표현하자는 의미에서 진하게 표현을 한 것이다.
크롤러들은 두가지의 차이를 두고 해석한다고 한다. 즉, 우리가 보는 시각적인 정보에서는 <b>는 강조되어 보이지만 크롤러는 일반 다른 문구와 차이를 두지 않을 것이라고 한다. (이또한 활용 할 수 있을 듯?)
mdn의 <b> 항목을 보면 다음과 같이 강조하여 설명한다.
<b> 요소와 <strong>, <em>,<mark> 요소들을 혼동하지 마세요. <strong> 요소는 중요한 글자를 나타내며, <em> 요소는 글자에 약간의 강조를 주며, <mark> 요소는 글자의 관련성을 나타냅니다. <b> 요소는 어떠한 특별한 시멘틱 정보를 전달하지 않습니다; 다른 맞는 요소가 없을떄 사용합니다.
열심히 설명했는데 mdn은 너무 쉽게 잘 설명했다..
이 글이 작성되고 있는 블로그 탬플릿인 jekyll은 markdown으로 작성되고 있다. 이 글들이 랜더링될 때 시맨틱 랜더링을 아주 잘 따르고 있다고 생각한다.
- ### > <h3>
- **강조** > <strong>
- *약한강조* > <em>
- ```코드블럭``` > <code>
등등 마크업으로 작성된 문서를 랜더링 된 것들과 비교하면 좋은 예제가 된다.
구조에서도..
일맥상통하게도 구조에서도 같은 의미를 가진다. <header>,<sidebar>,<section> 혹은 <article> 모던웹 구조라고 알려진 이러한 태그들 또한 시맨틱 마크업이라는 의미 안에 있다.
이부분에 대해서는 각각의 태그들의 이름이 너무나도 직관적인 듯 하다.
고로 설명도 pass
어쩔 수 없는 것도 있는 것 같다.
image를 뜻하는 img 태그 등, 이미지가 아니더라도 단일적인 마크업과 다르게 좀 더 기능적으로 사용할 수 있는 picture,figure 태그도 있다.
문서 설명 picture,figure들를 읽어보니 문서를 구조화하고 의미를 부여하는데 용이한 기능적인 것들이 포함 되어 있다.
하지만 호환성의 문제(물론 주로 internet eXXXX)때문에 일일이 신경 써주기 힘든 부분도 있기 때문에 현실과 타협하게 되면 사용을 안하게 되는 부분이 큰 듯 하다.