HTML 문서 구조
시맨틱 태그
시멘틱(semantic) 이란 '의미론적인', '의미가 통하는'이라는 뜻이 있습니다. 의미에 맞는 태그, 요소를 사용하고 구조화를 잘 해주어야 기계뿐 아니라 사람에게도 명확한 의미를 전달할 수 있습니다.
시맨틱 태그를 사용하여 얻는 이점
-
검색 엔진에 의해 검색 결과가 상위에 노출될 수 있게 합니다.
검색 엔진의 동작 원리
검색 엔진은 크게 정보 수집, 색인 그리고 검색의 순서로 동작합니다.
검색 엔진은 사용자가 검색 엔진을 사용하기 전에 미리 웹 상에서 정보를 수집하여 색인을 만들어 놓습니다.
그리고나서 사용자가 찾고자 하는 정보의 키워드를 입력하면, 미리 만들어 놓은 색인 중에서 입력된 키워드에 해당하는 정보들을 찾아서 보여주는 것입니다.
코딩의 시작, TCP School
-
시각 장애가 있는 사용자가 스크린 리더로 페이지를 탐색할 때 웹 사이트의 구조를 제대로 이해할 수 있습니다.
-
문서 구조가 정확히 나눠지므로 다양한 기기에서 웹 문서를 표현하기가 쉽습니다.
HTML 레이아웃
레이아웃(layout)은 각 구성요소를 제한된 공간 안에 효과적으로 배열하는 일을 의미합니다. 웹 페이지는 디자인은 서로 달라 보여도 대부분 비슷한 구조로 짜여져 있습니다.
HTML5에서는 웹 페이지의 레이아웃만을 위한 시맨틱 요소들을 제공합니다. 이는 웹 브라우저가 문서 구조를 파악하는데 중요한 역할을 합니다.
<header>
웹 페이지의 헤더 내용을 포함하는 데 사용됩니다. 헤더에는 소개 콘텐츠, 제목 요소, 검색 창, 웹페이지의 로고 또는 아이콘, 저작권 정보 등이 포함됩니다. 한 문서 내에 여러 개의 header 요소가 존재할 수 있습니다.
<header>
<h1>HTML</h1>
</header>
...
<section>
<header>
<h2>HTML Tags</h2>
<p>HTML tags are ...</p>
</header>
</section><nav>
같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만듭니다. <nav> 요소는 주요 탐색 링크에만 쓰입니다. 문서의 모든 링크가 <nav> 요소 안에 있을 필요가 없으며 사이트 전체 탐색이나 현재 페이지 내 탐색으로 사용하는 등 하나의 문서에서 여러 개의 <nav> 태그를 가질 수 있습니다. 주로 메뉴, 목차, 색인에 쓰입니다.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav><main>
해당 문서의 주요 콘텐츠를 나타냅니다. 사이드바, 탐색 링크, 저작권 정보, 사이트 로고 및 검색 양식과 같은 문서에서 반복되는 콘텐츠를 포함해서는 안 됩니다. 하나의 문서에는 단 하나의 <main>만 사용해야 합니다.
<main>
<h1>Front-end web develop</h1>
<p>Front-end web development is the development of the graphical user interface of a website.</p>
<section>
<h2>HTML</h2>
<p>HyperText Markup Language (HTML) is the backbone of any website development process, without which a web page does not exist</p>
</section>
<section>
<h2>CSS</h2>
<p>Cascading Style Sheets (CSS) controls the presentation aspect of the site and allows your site to have its own unique look.</p>
</section>
<section>
<h2>JavaScript</h2>
<p>JavaScript is an event-based imperative programming language (as opposed to HTML's declarative language model) that is used to transform a static HTML page into a dynamic interface.</p>
</section>
</main><section>
웹 페이지의 구역을 나타내는 데 사용됩니다. 섹션의 예로는 장(chapter), 탭 대화 상자 내의 다양한 탭 페이지, 논문의 장/절 등이 있습니다. 각각의 구역을 구별하기 위해 제목 요소(h1~h6)를 자식 요소로 포함하고 있는 경우가 많습니다. 단순한 스타일링이 목적이라면 <div> 요소를 사용해야 합니다.
<article>
문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구역을 나타냅니다. 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 여기에 해당합니다.
<h1>Most Popular Browsers</h1>
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>article vs section
자체만으로 다른 페이지에 보여질 수 있을 때 article을 사용하며 section은 일반적으로 제목(h1-h6)으로 시작하여 관련된 정보를 포함하고 있는 구역입니다.
<article> 내에 많은 내용이 포함될텐데 연관있는 내용들을 묶어줄 때 <section>을 사용할 수 있습니다. 여러 개의 <section>을 <article>로 묶을 수 있고 그 반대도 가능합니다.
<aside>
주요 콘텐츠에 대한 몇 가지 추가 정보를 포함하는 데 사용됩니다. 문서의 주요 내용과 간접적으로만 연관되어 해당 콘텐츠들로부터 분리시킬 수 있는 콘텐츠로 구성된 페이지 영역을 정의합니다.
<p>HTML(Hypertext Markup Language) is a markup language that tells web browsers how to structure the web pages you visit.</p>
<aside>
<h4>markup language</h4>
<p>A markup language is a set of rules governing what markup information may be included in a document and how it is combined with the content of the document in a way to facilitate use by humans and computer programs.</p>
</aside><footer>
작성자, 저작권 정보, 관련 문서, 사이트맵 등 문서 또는 구역의 바닥글 콘텐츠를 포함하는 데 사용됩니다. 연락처 정보는 <address> 태그 내에 작성합니다. 하나의 HTML 문서에는 여러 개의 <footer> 요소가 포함될 수 있습니다.
<footer>
<a href="#">About Us</a>|
<a href="#">Privacy Policy</a>
<p>Copyright © 2022 .. All rights reserved</p>
<address>Contact 010-1234-5678</address>
</footer>Reference
