HTML5의 새로운 구조 태그

이전 HTML 페이지에서는 기본적으로 모두 Div+CSS 레이아웃 방식을 사용했습니다. 검색 엔진이 페이지의 콘텐츠를 크롤링할 때 Div 중 하나의 콘텐츠가 기사 콘텐츠 컨테이너, 탐색 모듈 컨테이너 또는 작성자가 소개한 컨테이너 등인지 추측할 수 있습니다. 즉, HTML 문서 전체의 구조가 명확하게 정의되어 있지 않습니다. 이 문제를 해결하기 위해 HTML5에서는 머리글, 바닥글, 탐색, 기사 내용 및 구조와 관련된 기타 구조 요소 태그를 특별히 추가합니다.

이 새로운 태그에 대해 이야기하기 전에 먼저 일반 페이지의 레이아웃을 살펴보겠습니다.

QQ截图20161013150243.png

위 그림에서 매우 명확하게 볼 수 있는 것은 일반 페이지에는 헤더, 탐색, 기사 내용, 첨부된 오른쪽 열 및 하단 모듈이 있지만 클래스를 통해 구분하고 다양한 CSS 스타일을 통해 처리합니다. 그러나 상대적으로 클래스는 보편적인 표준 사양이 아니며 검색 엔진은 특정 부분의 기능만 추측할 수 있습니다. 또한 이 페이지 프로그램을 시각 장애인에게 제공하면 문서 구조와 내용이 그다지 명확하지 않습니다. 새로운 HTML5 태그가 가져온 새로운 레이아웃은 다음과 같습니다.

QQ截图20161013150249.png

코드는 다음과 같습니다.

<!DOCTYPE html>

<html>
    <head>
        <title>my page</title>
    </head>
    <body>
        <header>header</header>
        <nav>nav</nav>
        <article>
            <section>section</section>
        </article>
        <aside>aside</aside>
        <footer>footer</footer>
    </body>
</html>

위의 직접적인 감각적 이해를 마친 후 HTML5의 관련 구조 태그를 하나씩 소개하겠습니다.

<section>

<section> 태그는 문서의 섹션을 정의합니다. 장, 머리글, 바닥글 또는 문서의 기타 부분 등입니다. 일반적으로 섹션화된 콘텐츠에 사용되며 문서 스트림에서 새 섹션을 시작합니다. 일반적으로 내용과 제목으로 구성된 일반 문서 내용이나 응용 프로그램 블록을 나타내는 데 사용됩니다. 그러나 섹션 요소 태그는 일반적인 컨테이너 요소가 아니며 일반적으로 제목이 있는 주제별 콘텐츠를 나타냅니다.
특정 사항을 설명할 때 일반적으로 섹션 대신 기사를 사용하는 것이 좋습니다. 섹션을 사용할 때 위치나 다른 곳에서 사용되는지 여부에 대해 걱정하지 않고 h1을 제목으로 사용할 수 있습니다. 컨테이너의 스타일을 직접 지정하거나 스크립트를 통해 동작을 정의해야 하는 경우 섹션 대신 div 요소를 사용하는 것이 좋습니다.

<section>
    <h1>section是什么？</h1>
    <h2>一个新章节</h2>
    <article>
        <h2>关于section</h2>
        <p>section的介绍</p>
        ...
    </article>
</section>

섹션보다 의미가 더 명확한 특수 섹션 태그입니다. 관련 콘텐츠의 독립적이고 완전한 블록을 나타냅니다. 특정 사항을 설명할 때 일반적으로 섹션 대신 기사를 사용하는 것이 좋습니다.

기사에는 제목 부분(일반적으로 머리글에 포함)이 있으며 바닥글도 포함될 수 있습니다.

기사는 중첩될 수 있으며 내부 기사는 외부 기사 태그와 종속 관계를 갖습니다.

아아아앙

<nav>

은 페이지 탐색을 위한 링크 그룹으로 사용할 수 있으며, 여기에 포함된 탐색 요소는 다른 페이지나 현재 페이지의 다른 부분에 연결되어 HTML 코드를 더 의미적으로 정확하고 화면 판독기와 같은 지원 장치를 더 효과적으로 만듭니다.

<article>
    <header>
        <hgroup>
            <h1>这是一篇介绍HTML 5结构标签的文章</h1>
            <h2>HTML 5的革新</h2>
        </hgroup>
        <time datetime="2011-03-20">2011.03.20</time>
    </header>
    <p>文章内容详情</p>
</article>

<aside>

aside 태그는 텍스트가 아닌 콘텐츠를 로드하는 데 사용되며 페이지의 별도 부분으로 간주됩니다. 여기에 포함된 콘텐츠는 페이지의 주요 콘텐츠와 별개이며 페이지의 콘텐츠, 섹션 또는 정보에 영향을 주지 않고 삭제할 수 있습니다. 광고, 링크 그룹, 사이드바 등

<nav>
    <ul>
        <li>厚德IT</li>
        <li>FlyDragon</li>
        <li>J飞龙天惊</li>
    </ul>
</nav>

헤더 태그는 문서의 헤더, 일반적으로 일부 안내 및 탐색 정보를 정의합니다. 웹페이지의 헤더에만 쓰는 것이 아니고, 웹페이지의 콘텐츠에도 쓸 수 있습니다.

일반적으로 헤더 태그에는 제목 태그(h1-h6)가 하나 이상 포함되며 hgroup 태그, 표 콘텐츠, 로고, 검색 양식, 탐색 탐색 등도 포함될 수 있습니다.

<aside>
    <h1>作者简介</h1>
    <p>厚德IT</p>
</aside>

바닥글 태그는 페이지, 기사 또는 콘텐츠의 일부와 관련된 정보가 포함된 섹션이나 문서의 바닥글을 정의합니다. 기사 작성자나 날짜 등. 기본적으로 헤더 태그와 동일하며 한 페이지에서 여러 번 사용할 수 있습니다. 섹션 뒤에 바닥글을 추가하면 해당 섹션의 바닥글과 동일합니다.

<header>
    <hgroup>
        <h1>网站标题</h1>
        <h1>网站副标题</h1>
    </hgroup>
</header>

hgroup 태그는 웹 페이지 또는 섹션의 제목 요소(h1-h6)를 결합합니다. 예를 들어, 섹션에 연속적인 h-시리즈 태그 요소가 있는 경우 이를 hgroup으로 묶을 수 있습니다.

<footer>
    页脚信息
</footer>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <article> <header> <hgroup> <h1>这是一篇介绍HTML 5结构标签的文章</h1> <h2>HTML 5的革新</h2> </hgroup> <time datetime="2016-10-10">2016.10.10</time> </header> <p>文章内容详情</p> </article> </body> </html>

제출하다 코드 재설정

자동운전