HTML SEMANTIC TAG(HTML 시맨틱 태그) -1-

블록요소(Block Element)

• div, h1, p 등

• 사용 가능한 최대 가로 너비를 사용함

• 크기를 지정할 수 있음

• width: 100%; height: 0;로 시작

• 수직으로 쌓임

• margin, padding 위, 아래, 좌, 우로 사용이 가능함

인라인 요소(Inline Element)

• span, img

• 필요한 만큼의 너비를 사용함

• 크기를 지정할 수 없음

• width: 0; hright: 0;로 시작

• 수평으로 쌓임

• margin, padding 위, 아래는 사용할 수 없음

<meta>

• <meta http-equiv="X-UA-Compatible" content="ie=edge">: 익스플로러에서 원활한 수행 가능하게 함

• MIME type

• base 상대 경로를 입력할 때 base를 통해서 쉽게 접근 가능(base는 html 문서에서 1번만 사용 가능함)

<header>

• 소개나 탐색을 돕는 그룹을 의미함, 로고, 검색바, 네비게이션바 등

• header태그 안에 header 혹은 footer를 넣을 수 없음

• display: block;

<footer>

• 작성자 구획, 저작권 데이터, 관련된 문서의 링크 등을 포함함

• display: block;

<h1>-<h6>

• 6단계의 문서 제목을 구현함

• 폰트를 줄이기 위해 단계를 낮추지 않아야 함

• 제목 단계를 건너뛰는 것을 피해야 함

• h1은 한페이지에 하나만 사용하는 것을 권장

<main>

• 주요 콘텐츠를 나타냄

• 문서의 핵심 주제나 애플리케이션의 핵심 기능에 대해 부연 또는 직접적으로 연관된 콘텐츠들로 구성

• 하나의 main만 존재해야함

• 인터넷 익스플로러에서는 작동이 안됨

• display: block;

<article>

• 독립적으로 구분되거나 재사용 가능한 영역을 설정

• 매거진, 신문기사, 블로그 등

• h1~h6를 포함하여야 함

• 작성일자와 시간을 <time>의 datetime 속성으로 표현

• display: block;

<section>

• 문서의 일반적인 영역을 설정

• h1~h6를 포함하여 식별

• section 내부에 article이 들어갈 수 있고 그 반대도 가능함

• display: block;

• div와 다르게 의미를 갖고 있어서 제목을 포함해야 함

<aside>

• 문서의 별도 콘텐츠를 설정

• 광고나, 링크 등의 사이드바를 설정

• display: block;

<nav>

• 다른 페이지 링크를 제공하는 영역을 설정

• naviation, 보통 메뉴 home, about, contact, 목차, 색인 등을 포함 함

• display: block;

<address>

• 연락처 정보를 제공하기 위해 사용

• 주소, 전화번호, 이메일 등을 포함 함

• display: block;

<div>

• 본질적으로 아무것도 나타내지 않는 콘텐츠 영역 설정

• 의미 없음, 꾸미는 목적으로 사용

• display: block;

<ol>, <ul>, <li>

• 각 항목<li>의 정렬된 목록<ol>이나 정렬되지 않은 목록<ul>을 설정

• ol과 ul은 자식으로 li만 포함 가능

• li는 단독으로 사용할 수 없으며, ol이나 ul에 자식으로 포함 되어야 함

• ol의 항목 순서는 중요도를 의미할 수 있음

• ol은 reversed(역순으로 설정), start(시작값 설정), type(항목 번호의 유형 설정)의 속성을 가짐

• li는 value(항목의 값을 설정, 숫자 값)의 속성을 가짐

<dl>, <dt>, <dd>

• 용어<dt>와 정의<dd>쌍들의 영역<dl>을 설정

• Description List, Definition Details, Definition Term

• dl은 dd, dt만을 포함해야 함

• 키, 값 형태를 표시할 때 유용함

• <dfn>은 용어 하나를 정의 하는 태그

<p>

• 하나의 문장 혹은 문단을 설정

• Paragraph

• 정보통신보조기기 등은 p태그를 통해서 다음 문단으로 넘어감

• display: block;

<hr />

• 문단의 분리를 위해 설정

• 빈태그

• horizontal Rule

• 수평선(border)로 표시, 의미적 관점으로 주제와 내용을 분리할 때 사용해야 함

• display: block;

<pre>

• 서식이 미리 지정된 텍스트를 설정

• preformatted text

• 텍스트의 공백과 줄바꿈을 유지하여 표시할 수 있음

• Monospace 글꼴 계열로 표시 됨

<blockquote>

• 일반적인 인용문을 설정

• cite 속성을 가짐(인용된 정보의 URL을 값으로 가짐)

<a>

• 다른 URL로 연결할 수 있는 하이퍼링크를 설정하는 태그

• "#"을 통해 같은 페이지에서 다른 위치로 이동도 가능함

• download: 리소스를 다운로드 하는 용도로 사용됨

• href: 링크 URL

• hreflang: 링크 URL언어

• rel: 현재 문서와 링크 URL의 관계

• target: 링크 URL의 표시 위치

• type: 링크 URL의 MIME 타입

• display: inline;

<abbr>

• 약어를 지정

• Abbreviation

• title 속성을 사용하여 전체 글자나 설명을 제공

• <abbr tilte="Hyper Text Markup Language>HTML</abbr>

• 마우스를 올리면 표시 됨

<b>

• Bring Attention

• 문체가 다른 글자의 범위를 설정

• 특별한 의미는 없음

• 읽기 흐름에 도움을 주는 용도로 사용

• 글자가 두껍게 표시됨

<mark>

• 사용자의 관심을 끌기 위해 하이라이팅할 때 사용

• 형광펜 사용과 같음

• 글자 배경이 노란색으로 표시됨

<em>

• Emphasis

• 단순한 의미 강조를 표시함

• 중첩이 가능

• 중첩될수록 강조 의미가 강해짐

• Italic(기울어진 글씨체)로 사용

<strong>

• 의미의 중요성을 나타내기 위해 사용

• 기본적으로 글자가 두껍게 표시됨

<i>

• 표현할 수 있는 적합한 의미가 아닌 경우 사용

• 평범한 글자와 구분하기 위해 사용(아이콘, 특수기호 등)

<dfn>

• 용어를 정의할 때 사용

• Definition

<cite>

• 창작물에 대한 참조를 설정 함

• 기본적으로 Italic체로 표시됨

<q>

• 짧은 인용문을 설정

• Quotation

<u>

• 밑줄이 있는 글자를 설정

• Underline

• 순수하게 꾸미는 용도의 요소로 사용

• <a>와 헷갈릴 수 있는 위치에서 사용하지 않도록 주의

• <span style="text-decoration: uline">과 같이 CSS로 대체 가능할 때는 사용하지 않는 것을 권장함

<code>

• 컴퓨터 코드 범위를 설정

• 문장 안에 code를 활용할 때 사용함

• 기본적으로 고정폭 글꼴 계열로 표시됨

<kbd>

• 키보드에서 사용자 입력을 나타내는 텍스트 범위 설정

<sup>, <sub>

• 위첨자와 아래첨자를 설정

<time>

• 날짜나 시간을 나타내기 위한 목적으로 사용

• datetime 속성을 유효한 날짜 문자의 의미로 표시함

• 인터넷 익스플로러에서는 지원이 안됨

<span>

• 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정