2020. 8. 21. 15:19ㆍHTML, CSS/HTML
▶ <main>
-
문서 내부의 핵심적인 Contents를 지칭할 때 사용.
- <body> 내의 주요 Contents를 나타냄. -
주요 Contents 구역은 문서의 핵심 주제나 애플리케이션의 핵심 기능성에 대한 부연, 또는 직접적으로 연관된 Contents로 이루어짐.
- 예로 블로그에서 사이드, 광고, footer 등의 부분을 제외하고 핵심 포스트 부분이 main에 해당. -
<main>은 hidden 속성이 사용된 것을 제외하고 문서당 하나만 존재해야 함.
-
Internet Explorer에서 지원하지 않음.
-
Block level 요소.
▶ <article>
-
독립적으로 구분되거나 재사용 가능한 영역을 설정.
-
<header>, <footer>, <main> 태그는 문서의 헤더, 푸터, 메인(핵심)을 지정해 범위를 설정<article>은 매거진, 뉴스 기사, 블로그 등에 사용됨.
-
일반적으로 <h1>~<h6>를 포함하여 식별.
작성일자와 시간을 <time>의 datetime 속성으로 작성. -
독립성을 가진 요소
<article class="forecast">
<h1>Weather forecast for Seattle</h1>
<article class="day-forecast">
<h2>03 March 2018</h2>
<p>Rain.</p>
</article>
<article class="day-forecast">
<h2>04 March 2018</h2>
<p>Periods of rain.</p>
</article>
<article class="day-forecast">
<h2>05 March 2018</h2>
<p>Heavy rain.</p>
</article>
</article> - .day-forecast인 <article>이 .forecast인 <article> 외부에 존재한다고 하더라도 Contents로서의 가치가 유지된다면 다른 태그보다는 <article>을 사용하는 것이 좋음.
- <article>의 핵심은 독립적이어야 하고 재사용이 가능해야 한다는 것.
-
Block level 요소.
▶ <section>
-
문서의 일반적인 영역을 설정(↔ <article>은 독립성을 가지고 있는 영역이라는 의미).
-
<section>은 일반적으로 영역을 나누는 용도로 활용됨. 또한 각 영역에는 어떠한 의미가 있기 때문에 제목을 포함.
- <div>와의 차이점. <div>는 의미를 가지지 않는 구역인 데 반해 <section>은 의미를 가지고 있기 때문에 제목이 포함됨.
- <article>의 경우 독립성이 유지되는 Contents. 제목을 가지고 있음.※ <article>은 강한 의미를, <section>은 보다 rough한 의미를 가지며 <div>의 경우 별다른 의미를 갖지 않음.
-
<section> 내부에는 <article>이 들어갈 수 있고, <article> 내부에도 <section>이 포함될 수 있음.
-
Block level 요소.
▶ <aside>
-
문서에 별도 Contents를 지정함.
-
보통 배너, 광고 기타 링크 등의 사이드바(side bar)를 통한 핵심 Contents와는 관련이 없는 내용들에 해당.
-
Block level 요소.
- <aside>는 전체 콘텐츠와 구분되는 side 영역에 해당함.
- 보통 오른쪽 영역에 위치하는데 왼쪽에는 보통 navigation 메뉴가 위치하기 때문.
※ HTML을 각각의 태그가 가지는 의미를 기준으로 구성하면 브라우저 입장에서는 의미를 부여해서 생각할 수 있는 동시에 각 태그들은 사이트 분석 시 유효하게 쓰일 수 있음.
따라서 각각의 태그를 적재적소에 적절한 의미로 사용할 필요가 있다는 것.
'HTML, CSS > HTML' 카테고리의 다른 글
| [HTML] 문자 콘텐츠(1) - ol, ul, li, dl, dt, dd (0) | 2020.08.22 |
|---|---|
| [HTML] Contents 구분(3) - nav, address, div (0) | 2020.08.21 |
| [HTML] Contents 구분(1) - header, footer, h1 ~ h6 (0) | 2020.08.21 |
| [HTML] Block 요소와 Inline 요소 (0) | 2020.08.20 |
| [HTML] 메타데이터(2) - <meta> (0) | 2020.08.20 |