Semantic MarkUp / HTML5 new elements

등장 배경

---

인터넷 마케팅 방식의 한 방식으로 검색 엔진 최적화이다. 검색 엔진 최적화는 HTML코드에서 정보를 모아 검색 키워드에 맞는 적절한 웹사이트를 구성해서, 검색 결과의 상위에 나올 수 있도록 하는 작업. 웹페이지의 내용을 파악하고 검색엔진에 노출될 수 있도록 하기위해 HTML요소를 적절하게 사용한 시멘틱 마크업이 필요하다.

 

시멘틱 마크업

---

POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻. 시멘틱은 즉, 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻함. 시멘틱 마크업은 적절한 HTML 요소를 올바르게 사용하는 것에서 시작.

<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>

각각의 요소가 같은 모습으로 표현되나 그 의미가 같지는 않다. <b>는 의미 없이 단순히 텍스트를 굵게 표현하는 태그지만, <strong>은 중요하다는 의미를 지닌다. <strong>은 중요하다는 의미에 맞춰 브라우저에 의해 굵은 스타일로 표현된 것. <i>는 단순히 기울어진 글자를 표현하지만, <em>은 글자의 특정 부분을 강조하는 의미. <u>와 <s>는 단순히 글자에 선을 그은 것이고, <ins>와 <del>은 내용이 새롭게 추가되거나 삭제가 되었다는 의미. 따라서 상황에 맞게 중요하다는사용하는 것이 적절하고 시멘틱한 마크업이다.

 

HTML5에서 생긴 Sematic element

---

1. <article>  
2. <aside>
3. <details>
4. <figcaption> : 도표, 도해 등의 다른 데이터에 대한 설명, 이미지 안에 제목쓰기
5. <figure> : 주 문서에 영향 주지 않고 참조하는 이미지, 도표, 코드 조각 등
6. <footer> : 보통 작성자 구획, 저작권 데이터, 관련 링크에 대한 정보 포함
7. <header> : 소개, 탐색 돕는 것의 그룹을 나타냄. 이미지 안에 글쓰기. 예시코드 참고
8. <main> : body의 주요 콘텐츠 나타냄. 문서의 핵심 주제, 부연 설명 등
9. <mark> : 참조목적 하이라이트 글자
10. <nav> : 현재 페이지에서 다른 페이지로 가는 링크 순서를 보여주는 구획
11. <section> : 컨텐츠의 일반적인 구획
12. <summary> : 상세 요소의 공개 상자에 대한 요약, 캡션, 또는 범례 지정
13. <time> : 24시간 시각, 날짜