First Step

Semantic HTML(의미론적 HTML)

1. Semantic HTML(의미론적 HTML, 시맨틱 html)?

w3schools.com에 따르면 Semanctic html은 브라우저와 개발자 모두에게 코드(Element)의 의미를 명확하게 전달해준다고 설명한다.

  • Non-semantic Elements:
    , 등 : 태그로 어떤 내용이 들어가있는지 알 수 없다.
  • Semantic Elements:
    , ,
    등: 태그 자체로 어떤 내용이 들어가있는지 유추해볼 수 있다.

    2. HTML5에서 새롭게 등장한 Semantic HTML

    <!-- 이전 -->
<div id="nav">
<div class="header">
<div id="footer">
<!-- 이후 -->
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

    3. 구조화

    header&footer

    4. 예시-네이버

    header&footer