HTML 콘텐츠 구분 / 문자 콘텐츠

<header>

소개나 탐색을 돕는 그룹

로고, 주요 메뉴 설정

header나 footer는 header 태그 안에 들어갈 수 없다

address, footer, 다른 header의 요소가 될 수 없다

전역 속성만을 포함한다.

블럭요소

IE 9버전 부터 사용

 

<footer>

가장 가까운 구획화 컨텐츠나 구획화 루트의 푸터

일반적으로 작성자 구획, 저작권 데이터, 관련된 문서의 링크에 대한 정보를 포함

가장 하단에 있는 바(회사명, Contact, 주소, 사업자 등)

전역속성만 포함한다.

블럭요소

IE 9버전 부터 사용

 

<h1>~<h6>

6단계의 문서 제목 구현

h1이 가장 높고 h6이 가장 낮다

제목의 정보는 문서의 목차를 만드는 것처럼 사용할 수 있다.

제목 폰트 크기를 줄이기 위해 낮은 단계 사용하지 말자. 대신 css의 font-size 속성을 사용하자

제목 단계를 건너 뛰지 말자! h1으로 시작해서 h2 ... 순차적으로 기입하자.

첫 번째 단계의 제목은 한 페이지에 하나만 사용

 

<main>

body의 주요 컨텐츠를 나타냄

블로그나 어플리케이션의 핵심 포스트 부분을 지정

한 문서에 하나의 main 요소만 포함 가능

블럭요소

IE 지원 안함

 

<article>

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

블로그 포스트, 매거진/신문 기사

h1~h6 포함하여 식별, time의 datetime 속성가지고 작성

블럭요소

 

<section>

문서의 일반적인 영역 지정(article과의 차이 - aritcle은 독립성이 있어야 하나 section은 그렇진 않음. 영역 나누기용)

section안에 article이 있든, article 안에 section이 있든 상관X

div와 차이점 - div와 다르게 의미를 가지고 있음(제목)

h1~ h6 포함하여 식별

블럭요소

 

<aside>

문서의 별도 컨텐츠

보통 광고나 배너, 기타 링크 등의 사이드바를 설정

블럭요소

 

section article은 서로 뒤바뀔 수도 있음

<nav>

다른 페이지 링크를 제공하는 영역

메뉴를 묶을 때 사용 - ol, ul 태그가 삽입돼서 같이 사용

메뉴들(Home, About, Contact), 목차, 색인 등을 설정

블럭요소

 

<address>

body, article, footer 등에서 연락처 정보(주소, 이메일, 전화번호) 제공하기 위해 포함하여 사용

블럭요소

 

<div>

= division

본질적으로 아무것도 나타내지 않는 콘텐츠 영역(의미X)

div가 존재하는 특정 영역을 찾고 그 영역에 css나 js로 제어할 때 사용

블럭요소

 

<ol>, <ul>, <li>

= ol(ordered list - 순서가 있는 목록), ul(unordered list - 순서가 필요하지 않은 목록), li(list item - 항목)

각 항목(li)의 정렬된 목록(ol)이나 정렬되지 않은 목록(ul)을 설정

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

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

ol의 항목 순서는 중요도를 의미할 수 있다.

ol보다 ul태그가 훨씬 더 많이 사용된다.

ol, ul은 블럭요소

li는 리스트 아이템(블럭요소라고 이해)

 

ol 속성

- reversed : 항목을 역순으로 설정(IE 지원 불가)

- start : 항목에 매겨지는 번호의 시작 값 [숫자(Number)]

- type : 항목에 매겨지는 번호의 유형, [a, A, i, I, 1]

 

li 속성

- value : 항목의 순서를 설정 [숫자(Number)](입력한 부분부터 항목들의 순서가 다시 지정됨)

 

<dl>, <dt>, <dd>

= dl(description list), dd(definition details), dt(definition, term)

용어(dt)의 정의(dd)쌍들의 영역(dl)을 설정

블럭요소

 

dl은 dd, dt만을 포함해야 함 => 스타일링하기가 까다로워서 ul, li로 대체해서 사용되는 경우가 많음

키(key)/값(value) 형태(용어 - 설명의 구조)를 표시할 때 유용

 

<p>

= paragraph

하나의 문단을 설정(문장, 문단, 단락 만들 때 사용)

정보통신보조기기 등이 다음 문단(<p>)으로 넘어갈 수 있는 단축키 제공함

블럭요소

 

<hr />(빈태그)

=Horizontal Rule

문단의 분리(주제에 의한)를 위해 설정

대부분의 경우 수평선(border)으로 표시(시각적 관점)되나 의미적 관점으로만 사용해야 함(수평선 쓰기 위해 hr 쓰는게 아님)

블럭요소(사각형)

 

<pre>

= preformatted text

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

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

기본적으로 monospace 글꼴 계열(모든 글자의 너비가 같음)로 표시

블럭요소

 

<blockquote>

= block quotation

일반적인 인용문을 설정

- cite : 인용된 정보의 URL [값: URL]

블럭요소