HTML 카테고리(Content Categories)
카테고리 | 설명 |
1. 메타데이터 콘텐츠(Metadata Content) | 문서의 메타 정보와 관련된 요소입니다. |
2. 플로우 콘텐츠(Flow Content) | 대분분 body요소 안에서 사용하는 요소들입니다. |
3. 섹션 콘텐츠(Section Conetnt) | 웹 문서의 섹션 영역을 정의하는 요소입니다. |
4. 헤딩 콘텐츠(Heading Content) | 섹션의 제목과 관련된 요소입니다. |
5. 프레이징 콘텐츠(Phrasing Content) | 문장과 텍스트가 관련된 요소입니다. |
6. 임베디드 콘텐츠(Embedded Content) | 다른 소스를 가져오거나 삽입시키는 컨텐츠와 관련된 요소입니다. |
7. 인터랙티브 콘텐츠(Interactive Content) | 상호작용을 위한 컨텐츠 요소입니다. |
1. 메타데이터 콘텐츠 (Metadata Content)
: 웹 문서와 관련된 정보를 표현하는 콘텐츠와 다른 문서와의 관계를 유지하는 콘텐츠입니다.
2. 플로우 콘텐츠(Flow Content)
: 대분분 body요소 안에서 사용하는 요소들입니다.
요소 | 설명 | |
<address> | 연락처 정보를 설정합니다. | 블록요소 |
<embed> | 외부 어플리케이션을 연결합니다. | 인라인요소 |
<command> | 사용자가 호출 할 수 있는 명렁어를 설정합니다. | |
<datalist> | <input> 요소의 미리 정의된 옵션의 리스트를 정의합니다. | |
<del> | 문서의 삭제된(delete) 텍스트를 정의합니다. | 인라인요소 |
<details> | 컨텐츠를 숨기거나 보여줄 수 있습니다. (펼치기/접기) | 인라인요소 |
<dfn> | 전문적인 용어를 정의할 때 사용합니다. | 인라인요소 |
<dl> | 설명 목록을 정의합니다. | 인라인요소 |
<em> | 텍스트를 강조하는데 사용합니다. | 인라인요소 |
<span> | 인라인 요소 그룹화를 정의합니다. | 인라인요소 |
<small> | 저작권 또는 법적인 텍스트를 정의합니다. | 인라인요소 |
<b> | 글씨를 두껍게 표현할 때 사용합니다. |
인라인요소 |
<strong> | 중요한 의미를 갖는 텍스트를 정의합니다. |
인라인요소 |
<i> | 기술적인 구문, 다른 언어 및 사상, 선박이름에 정의합니다. | 인라인요소 |
<mark> | 참조용 표시를 정의합니다. | 블록요소 |
<q> | 짧은 인용을 정의합니다. | 인라인요소 |
<u> | 밑줄을 표시할 때 사용합니다. | 인라인요소 |
<blockquote> | 긴 문장의 인용문을 정의합니다. | 블록요소 |
<hr> | 단란간의 주제별 구분을 나타냅니다. | |
<fieldset> | 폼 요소의 그룹 내부 영역을 설정합니다. | 인라인요소 |
<input> | 데이터를 입력할 수 있는 폼 컨트롤을 정의합니다. | 인라인요소 |
<menu> | 메뉴 리스트를 정의합니다. | 블록요소 |
<nav> | 웹 문서 내에 네비게이션 링크를 정의합니다. | 블록요소 |
<object> | 문서내에 포함된 멀티미디어 요소를 정의합니다. | 블록요소 |
<sub> | 텍스트 아래첨자(subscript)를 정의합니다. | 인라인요소 |
<sup> | 텍스트 위첨자(superscript)를 정의합니다. | 인라인요소 |
<textarea> | 여러줄의 텍스트를 편집할 수 있는 컨트롤을 정의합니다. | 인라인요소 |
<time> | 날자와 시간을 정의합니다. | 블록요소 |
<noscript> | 스크립트를 지원하지 않는 브라우저를 위한 대체 태그입니다. | 블록요소 |
※ 참고
1. 텍스트
- 글씨를 특별한 이유로 평범한 글자와 구분하기 위해서는 <i> 태그를 사용합니다.
- 글씨를 중요성과 관련성을 전달하지 않고, 다른 텍스트와 구별 할 때 <b> 태그를 사용합니다.
- 글씨를 강조하고 싶다면 <em> 태그를 사용합니다.
- 글씨의 중요성을 강조하고 싶다면 <strong> 태그를 사용합니다.
- 글씨의 중요성과 강조를 고려하지 않는 단순 참고용 표시를 사용한다면 <mark> 태그를 사용합니다.
- 글씨의 전문적인 용어를 정의할 때는 <dfn> 태그를 사용합니다.
- 글씨의 맞춤법이 틀린 단어를 표현하고 싶다면 <u> 태그를 사용합니다.
2. 목록
<dl> 태그는 용어를 설명하는 목록형 태그입니다.
<dt> 태그는 용어의 제목을 설명하는 목록형 태그입니다.
<dd> 태그는 용어를 설명하는 태그입니다.
<ul> 태그는 순서가 없는 목록형 태그입니다.
<ol> 태그는 순서가 있는 목록형 태그입니다.
<li> 태그는 목록의 항목 태그입니다.
3. 섹션 콘텐츠(Section Conetnt)
: 웹 문서의 제목 영역을 정의하는 요소입니다.
요소 | 설명 |
<article> | 웹 문서 내에 독립적인 컨텐츠를 정의합니다. (HTML5) |
<aside> | 웹 문서 내에 사이드 컨텐츠를 정의합니다. (HTML5) |
<nav> | 웹 문서 내에 네비게이션 링크를 정의합니다. |
<section> | 주제별 그룹의 콘텐츠 섹션을 정의합니다. |
헤드 콘텐츠 (Heading content)
: 웹 문서의 제목 영역을 정의하는 요소입니다.
5. 프레이징 콘텐츠 (Phrasing content)
: 프레이징 콘텐츠는 문장과 텍스트가 관련된 요소입니다.
요소 | 설명 |
<code> | 마크업 코드를 정의합니다. |
<data> | 주어진 내용을 기계가 읽을 수 있도록 설정합니다. |
<progress> | 작업의 진행상태를 정의합니다. |
<output> | 계산의 결과를 보여줍니다. |
6. 임베디드 콘텐츠 (Embedded content)
: 다른 소스를 가져오거나 삽입시키는 컨텐츠와 관련된 요소입니다.
7. 인터렉티브 콘텐츠 (Interactive content)
: 상호작용을하기 위한 컨텐츠 요소입니다.
요소 | 설명 |
<label> | <input> 요소의 라벨을 지정합니다. |
[참고사이트]
'프론트엔드 > HTML' 카테고리의 다른 글
[CSS] 브라우저 기본값 초기화 리셋 reset.css 개념 잡기 (0) | 2020.06.16 |
---|---|
엔티티 (entity) / 엔터티 HTML 특수문자 유니코드 리스트 (0) | 2020.01.21 |
[HTML] 웹표준 코딩 용어 GNB, LNB, SNB, FNB 네비게이션 클래스명 이름 종류와 차이 (0) | 2020.01.17 |
[HTML5] 기본 문법 태그 개념 & 정리 Introduction & Syntax (0) | 2019.12.19 |
[Canvas VS SVG ] HTML 태그 장점 단점 특징 차이점 비교하기 (0) | 2019.12.10 |