HTML 웹표준/웹접근성/웹호환성
시멘틱 태그
시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻이다.
즉, HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다.
예를 들어, <div> 태그는 non-semantic 태그라고 할 수 있고
<table>, <article> 등의 태그는 semantic 태그라고 볼 수 있다.
일반적으로 <div> 태그만 보고는 이 태그 안에 들어간 내용의 의미를 알 수가 없다.
반면, <table>, <article> 등의 태그는 대략이라도 태그 안에 들어갈 내용의 의미를 유추할 수 있다.
<table> 태그 안에는 표가 들어갈 것이고, <article> 태그 안에는 어떤 형태의 글이든 글이 들어갈 것이라는 것 정도는 유추 할수 있다.
종류
| 속성 | 설명 |
|---|---|
| <article> | 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있습니다. |
| <aside> | 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다. |
| <details> | "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다. 요약이나 레이블은 |
| <figcaption> | 부모 |
| <footer> | 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다. |
| <header> | 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다. |
| <main> | 문서 <body>의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다./td> |
| <mark> | 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다. |
| <nav> | 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다. |
| <section> | 주제별 그룹의 콘텐츠 섹션을 나타낼 때 사용합니다. |
| <summary> | 상세 요소의 공개 상자에 대한 요약, 캡션 또는 범례를 지정한다. <요약> 요소를 클릭하면 부모 <상세> 요소의 상태가 열리거나 닫힌다. |
| <time> | 시간의 특정 지점 또는 구간을 나타냅니다. datetime 특성의 값을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 때 사용할 수 있습니다. |
HTML5에 없어진 태그
<align>
<background-color>
<basefont>
<border>
<big>
<center>
<color>
<font>
<frame>
<frameset>
<noframes>
<hspace>
<tt>
<vspace>
HTML5에 의미가 변경된 태그
<acronym> => <abbr> <applet> => <embed> <dir> => <ul> <strike> => <del> 또는 <s>