본문 바로가기

Computer/HTML5

시맨틱(semantic) 마크업(Markup)

시맨틱(semantic) 마크업(Markup)


시맨틱(semantic) = '의미론적인'


마크업(Markup) = '태그(HTML)' 등을 이용하여 데이터의 구조를 명기하는 언어의 한가지





 HTML / CSS / JS 의 분리를 통한 웹표준화



HTML : 홈페이지의 구조와 내용을 담고 있다.


CSS : 홈페이지의 표현을 담고 있다.


JS : 홈페이지의 동작을 담고 있다. 



 시맨틱(semantic) 마크업(Markup)의 이점


- 접근성

- SEO

- 가독성  이외



 Heading 태그


<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 사용


 List 태그


내용에 따라 <ol>, <ul>, <dl>을 사용 


ol : Ordered List – 순서가 있는 목록 


ul : Unordered List – 순서가 없는 목록 


dl : Definition List – 정의 목록



 이외 태그


<p> 문단 태그 </p>


<em> 강조 태그  </em>


<strong> 강한 강조 </strong>


<q> 짧은 인용 </q>


<cite> 작품 제목 </cite>


<abbr> 약자 표기 </abbr>


<dfn> 의미 정의 </dfn>


<code> 개발코드 </code>


<samp> 시스템 출력 </samp>


<kbd> 키보드 입력 </kbd>


<var> 변수 </var>


<ins> 추가된 내용 </ins>


<del> 삭제된 내용 </del>


<address> 연락처 </address>


<blockquote> 인용문 </blockquote>



 HTML5 에서 제거된 태그들


<big> 큰 글자 </big>


<center> 중앙정렬 </center>


<dir> 파일 목록 </dir>


<font> 폰트 모양 </font>


<tt> 타이프체 </tt>


<u> 밑줄 </u>


<acronym> 두문자어 </acronym>


<applet> 애플릿 </applet>


<basefont> 기본서체 </basefont>


<frame> 프레임 </frame>


<frameset> 프레임 셋 </frameset>


<noframes> 프레임 미지원 </noframes>


<strike> 가로줄 </strike>

'Computer > HTML5' 카테고리의 다른 글

HTML5 란?  (2) 2014.09.10