CodeLab - 시멘틱 태그 01.html

CODEDRAGON Development/Web, WWW

반응형

 

 

 

CodeLab - 시멘틱 태그 01.html

  • sematic
  • 시멘틱 태그
  • 표현을 위한 태그
  • 소스코드
  • 출력결과

 


 

   

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>

   

 

   

출력결과