프론트엔드 로드맵 8 의미론적(Semantic)인 HTML란 무엇인가?

시맨틱(Semantic)이란?

'의미'를 뜻한다. 따라서 시맨틱 구조라 하면, HTML의 요소(Element)가 가진 목적이나 역할에 따라서 의미론적인 구조를 말한다.

예를 들어 <h1> 태그는 "이 페이지에서 최상위 제목"을 뜻하는 의미로 사용된다.

 

<h1>이것은 제목입니다</h1>

동일하게 보이도록 작성할 수도 있다.

<span style="font-size: 32px; margin: 21px 0">이것은 제목입니다.</span>

그러나 이렇게 짠 코드는 의미적 가치(semantic value)가 없으므로 시맨틱 구조에 위배된다. 

 

<시멘틱 구조로 코드를 짤 경우 생기는 이점>

 - 의미론적 마크업을 통해 중요 키워드가 검색 엔진에 영향을 줄 수 있다.

 - 시각 장애가 있는 사용자가 페이지를 탐색할 때 의미론적 마크업의 도움으로 보다 쉽게 읽어낼 수 있다.

 - 의미를 부여하면 코드 블록을 분류하고 정리하는 데에 훨씬 도움이 된다.

 - 개발자에게 태그 안에 들어갈 데이터 유형을 제안한다.

 

<의미론적 요소 Element들>

 - <article>

 - <aside>

 - <details>

 - <figcaption>

 - <figure>

 - <footer>

 - <header>

 - <main>

 - <mark>

 - <nav>

 - <section>

 - <summary>

 - <time>

 

...외에도 백 여개의 요소들이 있다.

 

 

section은 문서 내에서 서로 관련있는 것들끼리의 묶음. 주로 제목을 가지고 있는 컨텐츠의 주제 그룹을 말한다. 일반적으로 h1-h6 요소들을 자식으로 갖는다. 일반적인 컨테이너로 사용하지 말 것.

 

<section>

  <h1>소개글</h1>

  <p>안녕? 나는 보망고라고 해</p>

</section>

 

** section 태그 브라우저 호환성

Chrome 5 / IE 9 / Firefox 4 / Opera 11.1 / Safari 4.1

 

 

article은 독립된 구조나 재사용 가능한 영역을 구성할 때 쓰이는 태그. 블로그나 매거진 언론 매체 등의 기사 등이 포함된다. section과 같이 h1-h6 요소들을 자식으로 갖는다. 쓰임이 유사하기 때문에 구분하기 쉽지 않음. article 태그가 서로 중첩된 경우 안쪽 요소는 밖의 요소와 관련된 내용을 담고 있다.

 

<article>

  <h1>오늘의 식단표</h1>

  <article>

    <h2>2020년 4월 20일</h2>

    <p>시금치 반찬</p>

  </article>

</article>

** article 태그 브라우저 호환성
Chrome 5 / IE 9 / Firefox 4 / Opera 11.1 / Safari 4.1

 

section은 article을 묶을 수 있고 article도 section을 묶을 수 있다.
좋은 예가 있어서 퍼옴.

 

<article>

  사람

  <section>뚱뚱한 사람</section>

  <section>마른 사람</section>

</article>

 

<section>

  <article>블로그 글1</article>

  <article>블로그 글2</article>

  <article>블로그 글3</article>

</section>

 

>> 차이점을 구분하자면, section은 단락을 구분지을 수 있는 큰 섹션을 열고 닫을 때 사용. article은 개별적인 요소를 묶어 하나의 독립적인 내용을 (반복해서) 사용할 수 있는 요소... 그런데 아리까리할 때는 그냥 div를 써야겠다는 결심이 선다....;;;

 

+ 이런 시맨틱 구조에 영향을 받아, class와 id를 네이밍할 때에도 style1, style2, 이런 식이 아니라, 구체적으로 쓰이는 용도에 따라 의미를 부여하는 네이밍을 하는 추세라고 한다.

 

참고 사이트: 

https://developer.mozilla.org/ko/docs/Glossary/Semantics
https://aboooks.tistory.com/346