구조요소, 시멘틱요소
1. 컨테이너 (div vs span)
지난 블록요소와 인라인 요소에서 살펴보았듯이 div 태그와 span태그는 모두 아무런 의미도 가지고 있지 않는 요소라는 점에서는 공통점이 있습니다. 또한 전역 특성만 포함합니다.
하지만 div태그는 block요소, span태그는 inline요소라는 점에서 큰 차이가 있습니다.
1-1 <div>: 콘텐츠 분할 요소 (block요소)
<div> 요소는 플로우 콘텐츠를 위한 통용 컨테이너입니다. 아무런 의미도 가지고 있지 않아 CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않습니다.
<div> 요소는 "순수" 컨테이너로서 아무것도 표현하지 않습니다. 대신 다른 요소 여럿을 묶어 class나 id 속성으로 꾸미기 쉽도록 돕거나, 문서의 특정 구역이 다른 언어임을 표시(lang 속성 사용)하는 등의 용도로 사용할 수 있습니다.
1-2 <span> : (Inline요소)
<span> 요소는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다. 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다.
2. 시멘틱 웹(Semantic Web)
HTML5에서는 시맨틱 웹을 쉽게 구성할수 있도록 만들어주는 요소들이 추가되었는데, 기존에
<div id="header"> 내용 </div>로만 나타낼수 있던 head 부분을
<header> 내용 </header>로 쉽게 더 의미론적으로 나타낼수 있게 되었습니다.
이는 div와 id=header 모두 읽었던 예전 XHTML이나 HTML4보다 훨씬 효율적이라고 볼수 있습니다.
의미론적인 마크업을 사용했을 때의 이점
- 검색 엔진은 의미론적 마크업을 분석하여 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주합니다.
- 시각 장애가 있는 사용자가 스크린리더로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있습니다.
- 의미가 없는 끊임없는 div들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽습니다.
- 개발자에게 태그 안에 채워질 데이터 유형을 제안합니다.
- 의미 있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소/구성 요소의 이름짓기(naming)을 반영합니다.
3. header, footer
3-1 <header> 태그
<header> 요소는 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다. 웹페이지의 헤더는 하나만 사용을 해야합니다.
3-2 <footer> 태그
<footer> 요소는 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.
4. nav : 탐색 구획 요소
MDN의 nav
<nav> 요소는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다.
5. aside : : 별도 구획 요소
<aside> 요소는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.
MDN의 nav & aside
<article>
<p>
디즈니 만화영화 <em>인어 공주</em>는
1989년 처음 개봉했습니다.
</p>
<aside>
인어 공주는 첫 개봉 당시 8700만불의 흥행을 기록했습니다.
</aside>
<p>
영화에 대한 정보...
</p>
</article>6. main
<main> 요소는 문서 <body>의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다. body영역에서 하나만 사용이 가능합니다.
<main>요소는 인터넷익스플로어에는 지원하지 않습니다.
7. article vs section
article과 section은 비슷하면서도 다른 시멘틱 웹입니다. 구분 하는 방법은 article을 먼저 사용하고 만약 article이 아니라고 생각이 된다면 section을 사용하는 것입니다.
section안에 article을 사용할 수 있고, article안에 section을 사용할 수 있습니다.
7-1 <article>
<article> 요소는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있습니다.
하나의 문서가 여러 개의 <article>을 가질 수 있습니다. 예컨대 사용자가 스크롤하면 계속해서 다음 글을 보여주는 블로그의 경우, 각각의 글이 <article> 요소가 되며, 그 안에는 또 여러 개의 <section>이 존재할 수 있습니다.
각각의 <article>을 식별할 수단이 필요합니다. 주로 제목(<h1>-<h6>) 요소를 <article>의 자식으로 포함하는 방법을 사용합니다.
8. section :일반 구획 요소
<section> 요소는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. 보통 <section>은 제목을 포함하지만, 항상 그런 것은 아닙니다.
<section> 요소를 일반 컨테이너로 사용해서는 안됩니다. 특히 단순한 스타일링이 목적이라면 <div> 요소를 사용해야 합니다. 대개, 문서 요약에 해당 구획이 논리적으로 나타나야 하면 <section>이 좋은 선택입니다.
