이번 HTML 포스트에서는 시맨틱Semantic 태그들을 배워보겠습니다.
지난 포스트들처럼 HTML의 '정보'와 관련된 내용입니다.
굳이 사용을 해도 화면상으로는 아무런 변화가 없는 태그들이지만, '정보'를 제공하는 웹페이지로서의 가치를 높여주는 태그들입니다.
Semantic Elements (의미론적인 태그)
영상의 썸네일은 없지만 재생은 됩니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML - 수업소개</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1><a href="index.html">HTML</a></h1>
</header>
<nav>
<ol>
<li><a href="1.html">기술소개</a></li>
<li><a href="2.html">기본문법<a/></li>
<li><a href="3.html">하이퍼텍스트와 속성</a></li>
<li><a href="4.html">리스트와 태그의 중첩</a></li>
</ol>
</nav>
<section>
<article>
<h2>선행학습</h2>
본 수업을 효과적으로 수행하기 위해서는 웹애플리케이션에 대한 전반적인 이해가 필요합니다. 이를 위해서 준비된 수업은 아래 링크를 통해서 접근하실 수 있습니다.
</article>
<article>
<h2>의미론적 태그</h2>
문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야 합니다. 특히 HTML5에서는 웹페이지에서 통상 많이 사용하는 구조에 의미를 분명히 부여하기 위해서 의미론적 태그(semantic element)를 새롭게 정의해서 제공하고 있습니다.
</article>
</section>
<footer>
<ul>
<li><a href="privacy.html">개인보호정책</a></li>
<li><a href="about.html">회사소개</a></li>
</ul>
</footer>
</body>
</html>
시맨틱Semantic 태그들은 브라우저와 개발자 모두에게 웹페이지의 의미를 명확하게 설명합니다.
<article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time> 등 여러 가지 태그들이 있습니다.
(나열한 순서는 사용 순서와 관계없이 알파벳 순으로 나열했습니다.)
<header></header> 태그는 말 그대로 웹사이트의 헤더에 해당하는 부분을 묶어줍니다.
보통 웹페이지의 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 header로 묶어줍니다.
<nav></nav> 태그는 웹페이지의 네비게이션(블로그로 치면 카테고리)에 해당하는 메뉴를 묶어줍니다.
<article></article>은 본문입니다.
단락을 크게 나눠서 여러 개의 article로 자른 후, article끼리 묶어서 <section></section>에 넣어줍니다.
<footer></footer> 태그는 웹페이지의 하단에 위치하는 정보들을 묶어줍니다.
이 블로그로 예를 들자면 스크롤을 제일 아래까지 내렸을 때에 짙은 회색 바탕에 해당하는 부분입니다.
댓글 쓰기
1. 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
2. 가능하면 비로그인 방문자 분께서는 익명보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
3. 구글 블로그에 댓글을 쓰고 '게시' 버튼을 클릭했을 때 가끔 에러가 발생해서 댓글이 날아가는 이슈가 있습니다.
혹시 장문의 댓글을 남기실 분들은 혹시 모를 에러를 대비해 '게시' 버튼 클릭 전에 댓글을 복사해두세요.