달력

9

« 2020/9 »

  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  •  
  •  
  •  

시멘틱 태그

   

sematic

무의미한 태그가 아니라

'의미를 갖는다'는 뜻으로, 각 태그가 스스로 의미를 지닌다는 뜻

   

   

시멘틱 태그

태그

설명

header

사이트에 대한 소개 정보나 메인 메뉴, 사이트 로고 등이 포함됨

hgroup

제목과 부제목을 묶는 역할

nav

사이트나 메뉴나 링크 같은 내비게이션 요소들이 포함

section

실제 문서 내용이 들어감

article

문서 내용이 많을 경우 여러 개의 <article>요소로 나눌 수 있음

aside

문서의 주요 내용 외의 내용들을 넣어 문서의 주 영역 주변에 배치

footer

작성자 정보나 저작권 정보, 또는 관련 문서 링크 등 부가 정보들을 담고 있음

   

   

표현을 위한 태그

태그

설명

mark

특정 텍스트를 강조하고자 할 때 사용하는 태그

   

   

소스코드

<html>

<head>

<meta charset="UTF-8">

<title>시멘틱 태그</title>

</head>

<body>

<header id="page_header">

<hgroup>

<h1>대한 대학교 홈페이지</h1>

<h4>세계를 향상 지식의 공간</h4>

</hgroup>

<nav>

<ul>

<li><a href="">1학년</a></li>

<li><a href="">2학년</a></li>

<li><a href="">3학년</a></li>

<li><a href="">4학년</a></li>

</ul>

</nav>

</header>

<section>

<header>

<h3>이달의 소식</h3>

</header>

<article>

네셔널 컨테스트에서 <strong>대상 수상</strong> 하여 대한 대학교를 알렸습니다. 수상자는 <mark>홍길동</mark>입니다.

</article>

</section>

<footer>

2020 대한 대학교

</footer>

</body>

</html>

   


   

   

   

   

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

HTML5 지원 API  (0) 2014.06.05
Tomcat 설정 및 Dynamic Web Project 생성  (0) 2014.06.05
02.html-시멘틱 태그 작성  (0) 2014.05.20
01.html-시멘틱 태그  (0) 2014.05.20
HTML5 시멘틱 태그  (0) 2014.05.20
ch01-first / 01.html-Hello World  (0) 2014.05.17
Posted by codedragon codedragon

댓글을 달아 주세요