[매일 HTML5 공부 06] 시맨틱 마크업을 위한 요소들

 

시맨틱 마크업(Semantic Markup)이란?

 

컴퓨터가 웹 정보자원의 의미를 이해할 수 있도록 문서의 논리적인 구조를 묘사하는 것

 

그룹요소

 

p, br, blockquote, ol, ul, dl, figure, div, hr, pre

 

그룹요소 사용해보기

 

ficure

[소스]

 

	<figure>
		<img src="http:⁄⁄cfile28.uf.tistory.com⁄image⁄2657454C5180D6BD35953D" width="240" height="150" alt="베르나르베르베르의뇌">
		<figcaption>해당 컨텐츠 설명은 figcaption 요소를 사용하여 마크업 한다.<⁄figcaption>
	<⁄figure>

[결과]

 

해당 컨텐츠 설명은 figcaption 요소를 사용하여 마크업 한다.

 

목록형 ul , ol ,dl 

[소스]

 

	<ul>
		<li>ul는 비순서형 목록이다.<⁄li>
		<li>목록 항목이 순서를 변경해도 의미가 변하지 않는 콘텐츠를 마크업한다.<⁄a><⁄li>
	<⁄ul>
	
	<ol>
		<li>ol는 순서형 목록이다.<⁄li>
		<li>속성에는 compact, reverseㅇ, start, type 등이 있습니다.<⁄li>
		<li>reversed는 html5에서 추가된 항목이며, 내림차순으로 표현된다.<⁄li>
	<⁄ol>
	
	<dl>
	  <dt>dl요소<⁄dt>
	  <dd>정의형 목록이다.<⁄dd>
	  <dt>dt는 제목<⁄dt>
	  <dd>dd는 내용<⁄dd>
	<⁄dl>		

 

[결과]

 

 

텍스트 레벨 요소

 

a, time, em, strong, q, cite, abbr, dfn, small, mark, b ,i

 

텍스트 레벨 요소 사용해보기

 

[소스]

<a href="https:⁄⁄www.google.co.kr">https:⁄⁄www.google.co.kr<⁄a>
<time pubdate="pubdate" datetime="2013-05-04T22:28:00+09:00">2013년 5월 04일<⁄time>
<em>강조하는 콘텐츠<⁄em>
<strong>중요성을 나타내는 콘텐츠<⁄strong>
<q>단락의 텍스트 일부를 인용<⁄q>
<cite>인용한 콘텐츠의 출처 정보<⁄cite>
<abbr>약어<⁄abbr>
<dfn>정의어<⁄dfn>
<small>작은글씨로 표시하는 주석, 저작권표시<⁄small>
<mark>참조 목적으로 특정 텍스트 범위에 하이라이트로 강조<⁄mark>
<b>굵은 글씨 ⁄강조 도는 중요의 의미를 가지지 않는다.<⁄b>
<i>이탤릭체 표현<⁄i>

[결과]

https://www.google.co.kr
2013년 5월 04일
강조하는 콘텐츠
중요성을 나타내는 콘텐츠
단락의 텍스트 일부를 인용
인용한 콘텐츠의 출처 정보
약어
정의어
작은글씨로 표시하는 주석, 저작권표시
참조 목적으로 특정 텍스트 범위에 하이라이트로 강조
굵은 글씨 /강조 도는 중요의 의미를 가지지 않는다.
이탤릭체 표현