1) Semantic Element
: 브라우저와 개발자 모두에게 요소의 의미를 명확하게 설명한다.
<article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>
대표적으로 몇 가지만 살펴보자!
- header
: 소개 및 탐색에 도움을 주는 콘텐츠를 나타내며 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있다.
- nav
: 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 섹션을 나타낸다. 주로 메뉴, 목차, 색인에 쓰인다.
-
주요 탐색 링크 블록을 위한 요소이므로, 문서의 모든 링크가 nav 안에 있을 필요는 없다.
-
하나는 사이트 전체 탐색, 다른 하나는 현재 페이지 내 탐색으로 사용하는 등 하나의 문서에서 여러 개의 nav 태그를 가질 수 있다.
- article
: 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 '재사용할 수 있는' 구획을 나타낸다.
주로 게시판과 블로그 글, 매거진이나 뉴스 기사 등을 나타낼 때 사용한다.
-
하나의 문서가 여러개의 article을 가질 수 있다.
예를 들어, 사용자가 스크롤하면 계속해서 다음 글을 보여주는 블로그의 경우 각각의 글이 article 요소가 되며, 그 안에는 여러개의 section이 존재할 수 있다.
-
각각의 article을 식별할 수단으로 h1-h6를 자식으로 포함한다.
-
article이 중첩되어 있을 때, 안쪽에 있는 요소는 바깥쪽에 있는 요소와 관련된 글을 나타낸다.
- section
-
section 요소는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용한다.
대개, 문서 요약에 해당 구획이 논리적으로 나타나야 하면 section이 좋은 선택이다.
-
section은 각각을 식별할 수단이 필요한데, 주로 제목(h1-h6) 요소를 section의 자식으로 포함하는 방법을 사용한다.
-
section 요소를 일반 컨테이너로 사용하면 안된다. 단순한 스타일링이 목적이라면 div 요소를 사용해야 한다.
-
요소의 콘텐츠를 따로 구분해야 할 필요가 있으면 article 요소를 쓰는 것이 좋다.
- aside
: 문서의 주요 내용과 간접적으로만 연관된 부분을 나타낸다. 주로 사이드바나 콜아웃 박스로 표현한다.
<article>
<p>
디즈니 만화영화 <em>인어 공주</em>는
1989년 처음 개봉했습니다.
</p>
<aside>
인어 공주는 첫 개봉 당시 8700만불의 흥행을 기록했습니다.
</aside>
<p>
영화에 대한 정보...
</p>
</article>- footer
: 주로 (address 요소로 감싸진) 작성자 정보, 저작권 정보, 관련 문서 등의 내용을 담는다.
footer 요소는 섹셔닝 컨텐츠가 아니므로 새로운 섹션을 추가하지 않는다.
<footer>
<p> © 2021 Merry</p>
</footer>2) Non-Semantic Element
- div (block level)
: 어떠한 의미도 없이 오직 스타일링만을 위한 컨테이너로 사용하며, CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않는다.
❗ div는 '의미를 가진' 다른 요소(article, nav 등)가 적절하지 않을 때만 사용해야 한다.
- span (inline level)
: div와 매우 유사하지만 inline element라는 차이가 있다.
주로 구문속에 한 덩어리를 스타일링 해줘야할때 사용된다.
<p>Hi, I'm <span>merry!</span> Nice to meet you.</p>
/* 예를 들어, 'merry!'를 파란색으로 스타일링 해주고 싶을 때 묶어준다. */3) Block vs. Inline level
이미지 출처
4) input / label
<label for="input_name">Name: <label>
<input id="input_name" type="text">
<input>은 <label>과 자주 사용된다.
