시맨틱(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>
