Semantic HTML
Semantic Tag 란?
Semantic Tag는 브라우저와 개발자 모두에게 명확하게 의미를 전달하는 태그이다.
ex)
non-semantic tag
<div>, <span>
- 태그 안의 content에 대한 명확한 정의가 없다.
- div, span은 컨텐츠를 나누어주는 박스일 뿐 태그가 의미를 가지지 않는다.
Semantic Tag
<form>, <table, <header>, <footer>, <nav>, <main>, <section>, <article>
- 태그 안의 content에 대해 명확하게 정의한다.
Semantic Tag를 사용하는 이유?
하지만 HTML5에서는 Semantic Tag를 사용하는 것을 볼 수 있다.
그리고 HTML4보다 5에서 어느 부분이 header인지, 어느 부분이 article인지 한눈에 확 들어온다.
- Semantic Tag를 사용하면 태그의 이름만 보고도 이 컨텐츠가 어느 부분을 의미하는지 한눈에 알아보기 쉽다.
- 물론 div로 모두 대체해도 문제는 없지만, 직관적으로 알아보기 쉬워지므로 유지보수에 큰 도움이 된다. 좋은 프로그래머가 되기 위한 필수사항이다.
여러 Semantic Tag 들
<article>
- 문서, 페이지, 사이트에서 내용을 독립적으로 구분해 배포하거나 재사용이 가능한 경우 사용한다.
<article>요소 안에 또 다른<article>요소를 사용할 수 있다.(중첩 가능)- 중첩되어 있을 때, 안쪽의 요소는 바깥쪽 요소와 관련된 글을 나타낸다.
ex) 블로그 글, 매거진, 뉴스 기사
ex2) 스크롤을 내릴때 블로그 글이 연달아 나오는 경우, 각각의 블로그 글은<article>요소이다. (그 안에 여러개의<section>요소가 존재할 수 있음)
<details>
- 사용자가 열고 닫을 수 있는 추가 내용들을 정의한다.
- 닫혀있을 때 보이는 제목은
<summary>요소를 사용하여 지정한다.
<aside>
- 문서의 메인 내용과 직접적으로 관련이 없는 내용들에 사용한다.(간접적 연관)
- 주로 사이드바, 콜아웃 박스로 표현한다.
<figure>
- 독립적인 내용을 표현한다.
<figcaption>요소를 사용해 설명을 붙일 수 있다.- 주로 문서가 참조하며, 다른 부분으로 이동해도 문제 없는 이미지, 도표 등을 맡는다.
- 안에
<figcaption>요소 중 제일 처음 요소를 설명으로 사용한다.
<figcaption>
<figure>요소에 대한 캡션을 지정한다.
<footer>
- 가장 가까운
<section>요소 내용에 대한 footer를 나타낸다. - 주로
<section>요소의 작성자 정보와 저작권 데이터, 또는 관련 문서들의 링크를 포함한다. <address>요소로 감싼 작성자 정보를<footer>요소에 포함시킬 수 있다.
<header>
- 문서의 머릿글을 지정한다.
- 주로 소개 또는
<nav>요소를 사용하여 탐색에 도움이 되는 내용을 나타낸다. - 또한 요소들은 로고,
<form>요소를 사용한 검색 form, 작성자 이름 등의 요소도 포함할 수 있다. - 부분을 나타내는 요소가 아니기 때문에 새로운 section 요소를 포함할 수 없다.
- header 요소는 제목을 나타내기 위해
<hn>요소를 포함하는데, 필수적인 것은 아니다.
<main>
- 문서의 주요 내용을 지정한다.
<mark>
- 강조된 내용을 지정한다.
<nav>
- 문서의 부분 중 현재 페이지 내 링크, 또는 다른 페이지로의 링크가 있는 부분이다.
<section>
- 문서의 독립적인 부분을 나타낸다.
- 보통 제목을 표현하기 위해
<hn>요소를 사용한다. 하지만 필수적인 것은 아니다.
<summary>
<details>요소에서 눈에 보이는 제목을 지정한다.
mdalss0113@gmail.com