시멘틱 태그 Semantic Tag

시맨틱 태그 (Semantic Tag)

시맨틱태그가 무엇일까?

w3schools.com 에서는 이렇게 정의한다 : 

What are Semantic Elements?

시맨틱 요소는 자신의 의미를 브라우저와 개발자 모두에게 명확하게 설명한다.

non-semantic 요소들의 예: <div>와 <span> - 자신의 컨텐츠에 대해 아무것도 설명해주지 않는다.

semantic 요소들의 예: <form>, <table>, <article> - 자신의 컨텐츠를 명확하게 정의한다.

HTML5 이전에는 <div>와 <span>에 id와 class를 붙여 구역을 나누고 스타일을 지정했다. 

아래 코드는 현재 네이버 홈페이지에서 소스보기를 통해 가져온  첫 부분이다.

<div class="....">로 떡칠되어있는 것을 볼 수 있다.

의미가 없는 <div> 태그에 이름을 붙이고 임의로 구역을 나눈 것이다.

<!-- //스킵 내비게이션 -->
    <div id="PM_ID_ct" class="wrap" >
        <!-- 헤더 -->
<div class="header" role="banner">
    
<div class="special_bg">
<div class="area_flex">
<div class="area_logo">
 
<h1>
<a data-clk="top.logo" href="/"><span class="naver_logo">네이버</span></a>
</h1>
 
</div>
<div class="area_links">
<a data-clk="top.mkhome" href="http://help.naver.com/support/alias/contents2/naverhome/naverhome_1.naver" class="al_favorite">네이버를 시작페이지로<span class="al_ico_link"></span></a>
<span class="al_bar"></span>
<a data-clk="top.jrnaver" href="http://jr.naver.com" class="al_jr"><span class="blind">쥬니어네이버</span><span class="al_ico"></span></a>
<a data-clk="top.happybean" href="http://happybean.naver.com/main/SectionMain.nhn" class="al_happybean"><span class="blind">해피빈</span><span class="al_ico"></span></a>
</div>

HTML5 에서는 이 방식에서 탈피해 시맨틱태그를 사용하여 코드의 가독성을 높이고 명확하게 한다.

<div class="header">가 아니라, <header>와 같이 뜻이 명확한 태그를 제공하기 때문이다.

HTML5에서의 시맨틱 요소

다음은 HTML5의 새로운 의미 요소 알파벳순 목록이다 .

태그를 클릭하면  HTML5 Reference  페이지로 이동한다. 

태그	설명
<article>	내용을 정의한다.
<aside>	페이지 콘텐츠를 제외한 콘텐츠를 정의한다. 링크, 광고, 사이드바 표시 등.
<details>	사용자가 보거나 숨길 수있는 추가 세부 정보를 정의한다.
<figcaption>	<figure> 요소에 대한 캡션을 정의한다.
<figure>	일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 된 콘텐츠를 지정한다.
<footer>	문서 또는 섹션의 바닥글을 지정한다. 주로 저작권, 연락처 정보 등 내용이 삽입되며 <header>, <section>, <article> 등 다른 레이아웃 사용가능.
<header>	문서나 섹션의 머릿글을 지정한다. 사이트 맨 위쪽이나 왼쪽에 사용하며 헤더 안에 <form> 태그를 이용, 검색창을 넣거나 <nav>태그를 이용해 사이트메뉴를 넣는다.
<main>	문서의 주요 내용을 지정한다.
<mark>	강조표시된 텍스트를 정의한다. 형광펜을 칠한 것처럼 노랗게 칠해진다.
<nav>	네비게이션 링크를 정의한다. 같은 사이트내의 링크나 다른 사이트로의 링크들의 모음이다.
<section>	<header>, <footer>와 함께 문서의 구역을 정의한다. <section>안에 <section>을 넣을 수도 있고, <article>을 이용해 내용을 넣는다.
<summary>	<details> 요소를 위한 눈에 보이는 제목을 정의한다.
<time>	날짜/시간을 정의한다.

+ 그외 :

<hn>

각 웹 콘텐츠 영역에서 제목을 표시할 때 사용한 태그. 

<h1>은 페이지당 단 한 번만 사용하는 것이 권장된다.

웹표준에서는 <hn>을 사용해 제목을 표시해야 하며, 단순히 크기를 키우고 굵게 표시하고 싶다는 이유로 <hn>태그를 쓰는 것은 금지된다.

<hgroup>

의미는 없지만 제목과 부제목을 묶는 용도의 태그다 . 

가독성 향상을 위해 사용한다.

<address> 

웹페이지 저작자의 이름이나 제작자의 웹페이지, 피드백을 위한 이메일주소 등의 연락처주소를 넣기 위한 태그다.

실제 현실의 우편물주소를 넣는 건 아니다. (실제 우편물 주소에는 <p>를 쓰자. ) 이탤릭체로 표시된다.