시맨틱 태그
div를 활용해서 영역을 구분하여 공간을 꾸밀 수 있지만,
페이지의 각 영역의 의미를 구별하기가 어렵고 효과적인 검색이 어려움
시맨틱 태그는 div 태그를 세분화하여 각 태그에 의미를 부여하고,
태그만으로 문서를 쉽게 이해할 수 있도록 의미를 부여한 새로운 태그임
시맨틱 태그는 어떤 표현이나 행위를 지시하기 보다는
웹 문서의 내용이 담고 있는 의미를 명확히 전달할 목적으로 만든 태그임
<header>
. 머릿말 영역
페이지 혹은 내용의 상단의 머릿말을 지정
페이지 제목, 소개글이나 로고, 이미지 등이 포함되는 영역
</header>
<nav>
. 메뉴 영역
페이지 이동을 위한 메뉴 영역을 지정
이전페이지, 다음페이지, 특정페이지나 사이트에 대해 연결하는 영역
네비게이션 요소로 구성됨
</nav>
<aside>
. 보조 영역
페이지의 좌우, 측면공간 같은 보조영역을 지정
광고의 즐겨찾기 링크, 관련 이미지 정보등을 제공
</aside>
<section>
. 형식적 구분영역
제목을 갖는 연관된 내용을 지정
하나의 제목을 중심으로 내용들을 그룹화한 영역
</section>
<article>
. 내용적 구분영역
독립적인 개별 내용 영역을 지정
신문, 잡지의 기사, 블로그의 댓글 등을 제공하는 영역
별도로 배포되거나 재사용이 가능한 내용으로 그룹화함
</article>
<footer>
. 꼬리말 영역
페이지(혹은 내용)하단의 꼬리말을 지정
작성자, 작성일, 저작권, 연락처 등 웹페이지관련 추가 정보를 포함
</footer>
시맨틱태그 구조
<nav>글로벌 내비게이션</nav>
</header>
<nav>
<ul>
<li><a href="#">Home</a>
<li><a href="#">페이지1</a>
<li><a href="#">페이지2</a>
</ul>
</nav>
<nav>
<p><a href="#">home</a> | <a href="#">카테고리명</a> | <a href="#">기사제목</a></p>
</nav>
<article>
<header>
<h1>블로그 기사 제목1</h1>
<p>2022년 5월 20일</p>
</header>
<main>
<section>
<h1>1. 큰 표제</h1>
<p>블로그 기사 본문이 들어갑니다.</p>
</section>
<section>
<h1>2. 큰 표제</h1>
<p>블로그 기사 본문이 들어갑니다.</p>
</section>
<aside>
<h2>관련 링크</h2>
<ul>
<li><a href="#">관련기사 제목1</a>
<li><a href="#">관련기사 제목2</a>
</ul>
</aside>
</main>
<footer>
<p><a href="#">코멘트를 본다</a></p>
</footer>
</article>
<footer>
<p><small>copyright~~~~~~</small></p>
</footer>
</body>
시맨틱태그 구조
<style type="text/css">
html, body {margin: 0; padding: 0}
#header {width: 100%; height:150px; background-color:#F0FFF0;}
#nav {width: 15%; height:600px; background-color:#FFF5EE; float:left;}
#section{width: 70%; height:600px; background-color:#FFFFF0; float:left;}
#aside {width: 15%; height:600px; background-color:#F0FFFF; float:left;}
#footer {width: 100%; height:100px; background-color:#FFFAFA; clear: both;}
</style>
</head>
<body>
<header id="header">Header</header>
<nav id="nav">nav</nav>
<section id="section">section</section>
<aside id="aside">aside</aside>
<footer id="footer">footer</footer>
</body>
시맨틱태그와 iframe활용 (사이트 연결)
<style type="text/css">
html, body {margin: 0; padding: 0}
#header {width: 100%; height:150px; background-color:#F0FFF0;}
#nav {width: 25%; height:300px; background-color:#FFF5EE; float:left;}
#section{width: 50%; height:300px; background-color:#FFFFF0; float:left;}
#aside {width: 25%; height:200px; background-color:#F0FFFF; float:left;}
#footer {width: 100%; height:100px; background-color:#FFFAFA; clear: both;}
</style>
</head>
<body>
<header id="header">Header: HTML5 문서 구조화</header>
<nav id="nav">
<ul>
<li><a href="https://www.naver.com" target="frame">네이버</a>
<li><a href="https://www.daum.net" target="frame">다음</a>
</ul>
</nav>
<section id="section" align="center">
section<br><br>
section 영역<br><br>
<iframe
name="frame"
src="s8_2.html"
width="400" height="200"
frameborder="0"
>
</iframe>
</section>
<aside id="aside">aside</aside>
<footer id="footer">
footer<br><br>
copyright 2020 by java
</footer>
</body>
시맨틱태그와 div 활용
<header>
<h1><a href="https://www.facebook.com/elvis">Elvis Presley</a></h1>
</header>
<section>
<article>
<h2><a href="https://ko.wikipedia.org/wiki/엘비스_프레슬리">Who is Elvis?</a></h2>
<div class="entry">
<p>
엘비스 프레슬리는 20세기 가장 잘 알려진 미국 가수 중 한명이었다.<br>
하나의 문화 아이콘으로 엘비스의 음악들은 세계적으로 선풍적 인기를 끌었으며,<br>
'로큰롤의 제왕'으로 불리곤 한다. <br>
그는 미시시피 주의 투펄로에서 태어났다.<br>
</p>
</div>
</article>
<article>
<h2><a href="http://biography.com/people/elvis-presley-9446466">His music and life</a></h2>
<div class="entry">
<p>
Elvis Presley came from very humble beginnings and grew up to become one of the biggest names in rock 'n' roll.
By the mid-1950s, he appeared on the radio, television and the silver screen.
On August 16, 1977, at age 42, he died of heart failure, which was related to his drug addiction.
Since his death, Presley has remained one of the world's most popular music icons.
</p>
</div>
</article>
</section>
<nav>
<a href="#">« Previous Entries</a>
</nav>
<nav>
<ul>
<li><h2>Archives</h2>
<ul>
<li><a href="http://www.elvisthemusic.com">Elvis The Music</a>
<li><a href="http://www.graceland.com">Elvis Home Graceland</a>
<li><a href="http://www.last.fm/music/Elvis+Presley">Free Listening Video</a>
</ul>
</nav>
<footer>
<p>Copyright 2022 Elvis</p>
</footer>
figure 태그
. 본문에 삽입된 그림을 블록화하는 시맨틱태그
. 이미지, 동영상, 소스코드 등 콘텐츠를 블록화 할 수 있음
<style type="text/css">
#figure{background-color: #FFDAB9}
</style>
</head>
<body>
<h2>figure태그 활용</h2>
<hr>
<figure>
<figcaption>alert()함수활용</figcaption>
<pre>
<code>function f() {alert("경고합니다.");}</code>
</pre>
<hr>
<small>실행결과</small>
<pre>
<img src="" alt="실행결과">
</pre>
</figure>
<details> : 상세정보를 담는 시맨틱블록태그
- 핸들이 화면에 나타나며 클릭시 상세정보를 감추거나 보이게 할 수 있음
<summary> : detail로 구성되는 블록의 제목을 표현함
details태그와 summary태그
Q & A 리스트
<hr>
<details>
<summary>Question 1</summary>
<p>웹 개발자가 알아야할 3가지 언어?</p>
</details>
<details>
<summary>Answer 1</summary>
<p>HTML, CSS, Javascript</p>
</details>
인라인 시맨틱 태그
<hr>
<p>
내일은 <mark>HTML5 시험</mark><br>
시간은 <time>09:30</time><br>
난이도 <meter value="0.8" max="1.0">8080%</meter>
<progress value="2" max="10"></progress>
</p>