Main root
html
<html></html>HTML 문서의 최상위 태그를 나타내며, "루트 요소"라고도 부른다. 모든 다른 태그는 <html>의 후손이어야 한다.
Document metadata
메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가진다. 스타일과 스크립트 메타데이터는 페이지 안에서 정의할 수도 있고, 해당하는 정보를 가진 다른 파일로 링크할 수도 있다.
head
<!doctype html>
<html>
<head>
<title>문서 제목</title>
</head>
</html>문서가 사용할 제목, 스크립트, 스타일 시트 등의 정보를 담는다.
meta
<meta charset="utf-8">
<!-- 3초 후 리다이렉트 -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">self-closing 태그
base, link, script, style, title과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타낸다.
charset
페이지의 문자 인코딩을 선언한다. 이 속성이 존재할 경우, 그 값은 반드시 문자열 "utf-8"의 대소문자 구분 없는 ASCII 표현이어야 한다.content
http-equiv또는name속성의 값을 담는다.http-equiv
프래그마 지시문을 정의한다. 특성의 이름(http-equiv(alent))에서 알 수 있듯이, 가능한 값은 특정 HTTP 헤더이다.refresh
다음을 지정한다.content특성에 양의 정수 값을 설정한 경우, 페이지를 다시 불러오기 전까지의 초 단위 대기시간.content특성이 양의 정수 값을 가지고 그 뒤를 문자열;url=과 유효한 URL이 뒤따른다면, 해당 URL로 이동하기 전까지의 초 단위 대기시간.
name
name과content속성을 함께 사용하면서 문서의 메타데이터를 이름-값 쌍으로 제공할 수 있다.name은 이름,content는 값을 담당한다.
title
<title>Grandma's Heavy Metal Festival Journal</title>브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의한다.
페이지의 <head> 안에서 사용해야 한다.
Sectioning root
body
<html>
<head>
<title>문서 제목</title>
</head>
<body>
<p>문단입니다</p>
</body>
</html>HTML 문서의 내용을 나타낸다. 한 문서에 하나의 body만 존재할 수 있다.
Content sectioning
address
<address>
You can contact author at <a href="http://www.somedomain.com/contact">
www.somedomain.com</a>.<br>
If you see any bugs, please <a href="mailto:webmaster@somedomain.com">
contact webmaster</a>.<br>
You may also want to visit us:<br>
Mozilla Foundation<br>
331 E Evelyn Ave<br>
Mountain View, CA 94041<br>
USA
</address>가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타낸다.
Semantic
비록 겉보기는 <i>나 <em> 요소와 같지만, <address> 요소는 자체적인 의미를 갖고 있으므로 연락처 표기에는 더 적합하다.
aside
<article>
<p>
디즈니 만화영화 <em>인어 공주</em>는
1989년 처음 개봉했습니다.
</p>
<aside>
인어 공주는 첫 개봉 당시 8700만불의 흥행을 기록했습니다.
</aside>
<p>
영화에 대한 정보...
</p>
</article>문서의 주요 내용과 간접적으로만 연관된 부분을 나타낸다. 주로 사이드바 혹은 콜아웃 박스로 표현한다.
footer
가장 가까운 Sectioning Content나 Sectioning root의 푸터를 나타낸다. 푸터는 일반적으로 Section의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다.
header
소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있다.
h1, h2, ... , h6
6단계의 section 제목을 나타낸다. sectioning 단계는 h1이 가장 높고 h6은 가장 낮다.
main
문서 <body>의 주요 콘텐츠를 나타낸다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어진다.
Text content
HTML 텍스트 콘텐츠를 사용하여 여는 <body>와 닫는 </body> 태그 사이의 블록이나 콘텐츠 sectioning을 정리할 수 있다. 해당 콘텐츠의 목적이나 구조 판별에 사용하므로 접근성과 SEO(검색 엔진 최적화, 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정)에 중요하다.
div
플로우 콘텐츠를 위한 통용 컨테이너이다. CSS로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않는다.
li
= list item
목록의 항목을 나타낸다.
ol
= ordered list
정렬된 목록을 나타낸다. 보통 숫자 목록으로 표현한다.
p
= paragraph
하나의 문단을 나타낸다.
ul
= unordered list
정렬되지 않은 목록을 나타낸다. 보통 bullet으로 표현한다.
Inline text semantics
a
<a href="https://example.com" target="_blank">Website</a>href 속성을 이용해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만든다. <a> 안의 콘텐츠는 링크 목적지의 설명을 나타내야 한다.
href
"HTTP reference" or "hyperlink reference"target
default:_self
설정해주지 않으면 현재 페이지에서href값의 페이지로 이동한다.
_blank를 주면 새 탭에서 열린다.
abbr
준말 또는 머리글자를 나타낸다.
br
텍스트 안에 줄바꿈(캐리지 리턴)을 생성한다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용하다.
code
짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시한다.
mark
현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타낸다.
형광펜처럼 표시된다.
span
Semantic
구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않는다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있다.
strong
중대하거나 긴급한 콘텐츠를 나타낸다. 보통 브라우저는 굵은 글씨로 표시한다.
sub
활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정한다.
sup
활자 배치를 위 첨자로 해야 하는 인라인 텍스트를 지정한다.
Image and multimedia
사진, 오디오, 비디오 등 다양한 멀티미디어 리소스를 지원한다.
audio
문서에 소리 콘텐츠를 포함할 때 사용한다.
img
<img src="/image/image.jpg" alt="Just an image"/>self-closing 태그
문서에 이미지를 삽입한다.
src
필수 속성으로, 포함하고자 하는 이미지로의 경로를 지정한다.alt
이미지의 텍스트 설명으로 필수는 아니지만, 스크린 리더가alt의 값을 읽어 사용자에게 이미지를 설명하므로, 접근성 차원에서 매우 유용하다.
또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여준다.
Forms
HTML은 여러가지 입력 가능한 요소를 제공한다. 이런 요소를 서로 조합하면 사용자가 내용을 채우고, 웹사이트나 어플리케이션에 제출할 수 있다.
button
클릭 가능한 버튼을 나타낸다. 버튼은 form 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있다.
form
정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다.
input
웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다.
label
사용자 인터페이스 항목의 설명을 나타낸다.
Interactive elements
HTML은 상호작용 가능한 사용자 인터페이스 객체를 만들 때 사용할 수 있는 요소를 지원한다.
dialog
닫을 수 있는 경고, 검사기, 창 등 대화 상자 및 기타 다른 상호작용 가능한 컴포넌트를 나타낸다.
