HTML의 개념들(2)

● Image Map

그림 부분에 영역을 지정하여 하이퍼 링크로 연결하는 것이다

클릭할 수 있는 영역을 지닌 이미지를 말하며, map 태그와 area 태그로 구성된다

 

형식

○ html5 문서 구조화와 웹 폼

● 텍스트 일부를 마크 업하는 html5 시맨틱 태그(Semantic Tag)

시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공한다

<div> 태그 등은 non-semantic tag, <table>, <article> 등의 태그들은 semantic tag이다

div 태그만 보고는 이 태그 안에 들어갈 내용의 의미를 알 수가 없다
반면 table, article 등의 태그는 대략이라도 태그 안에 들어갈 내용의 의미를 유추할 수 있다
이렇게

의미를 가지는 태그가 시맨틱 태그

이다

 

div 태그는 안에 어떠한 태그들도 올 수 있기 때문에 의미를 알 수 없지만 table 태그 안에는 표가 들어갈 것이고, 
article 태그는 어떤 형태의 글이든 글이 들어갈 것이라는 것 정도는 유추할 수 있다

 

좀 더 자세히 살펴보면, 

이전의 html에서 header나 footer를 표현하기 위해 아래와 같이 <div> 태그를 사용하여

개발자들이 자유롭게 class명이나 id를 정의하였다면,

<div class="header"> 
<div id="footer">

 

HTML5에서는 아래와 같이 미리 정의된 태그를 사용하게 된다.

<header>
<footer>

 

둘의 차이점은

<div> 태그 안의 이름은 개발자 마음대로 정의할 수 있기 때문에 헤더 정보 표현을 위해

<div class='head'>, <div class='hd'>등 여러 방법으로 표현이 가능하지만,

HTML5에서는 시맨틱 태그를 제공하여 HTML태그의 의미를 명확하게 할 수 있다는 것이다.

 

● HTML5에서 새로 제공하는 시맨틱 태그들

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>
• etc...