Non-semantic Elements
<div>,<span>은 내용물에 대해 나에게 어떤 것도 알려주지 못한다.
Semantic Elements
<form>,<table>,<article>... 등의 예시가 있습니다. 이런 elements들은 내용물에 대해 확실한 정보를 준다.
Semantic Elements를 활용하여 페이지 레이아웃하기
semantic elements는 페이지 레이아웃을 의미있게 묘사해준다. 또, 더 이해하기 쉽고 코드를 깔끔하게 정리할 수 있도록 도와준다.
<section> Element
- section은 내용의 주제에 따라 그룹핑을 하며, 독립적인 구획을 나타난다. * 주로 heading과 같이 쓰인다.
<section>
<h2>Introduction</h2>
<p>This document provides a guide to help with the important task of choosing the correct Apple.</p>
</section>
<section>
<h2>Criteria</h2>
<p>There are many different criteria to be considered when choosing an Apple — size, color, firmness, sweetness, tartness...</p>
</section>- 주로 제목(h1,h2...)요소를 자식으로 포함하는 방법을 사용해 각 세션을 구분합니다.
<section>
<h2>Heading</h2>
<img>some image</img>
</section>- 단순한 스타일링이 목적이라면
<div>사용 권장.
<header> Element
- 문서나 섹션의 머릿글
- 한 문서의 여러개의 header가 있을 수 있다.
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
<footer> Element
- 문서나 섹션의 꼬릿말
- 항상 포함된 요소에 대한 정보를 담고 있어야 한다.
- 주로 문서의 저자나 저작권 정보, 사용법을 위한 링크, 연락처 정보 등을 포함
- 하나의 문서에서 여러개의 footer가 있을 수 있다.
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</footer><nav> Element
- 네비게이션 링크의 총 집합
- 모든 문서의 링크가
<nav>의 안에 있어야하는 건 아님.<nav>는 오직 중요한 블록의 네비게이션 링크를 위한 것이다.
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
<aside> Element
- 위치한 내용과 벗어난 곳에 위치한 내용.
- aside는 주변의 내용과 연관되어 있어야한다.
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
개발자