HTML(4) 태그 종류

1. div & span

 

div

콘텐츠 분할 요소. 여러 태그들을 그룹핑 하기 위한 태그.

블록 요소.

CSS로 스타일을 주기 전에는 콘텐츠나 레이아웃에 어떠한 영향도 주지 않음.

 

span

인라인 요소.

div와 마찬가지로 CSS로 스타일 주기 전에는 콘텐츠나 레이아웃에 어떠한 영향도 주지 않음.

---

2. Sections

 

header

소개 및 탐색에 도움을 줌.

회사명, 제목, 로고, 검색 폼 등 요소 포함.

head 태그와 혼동 주의.

헤더를 중첩 사용하거나 헤더 안에 푸터 사용 X

 

nav

navigation bar.

문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크.

메뉴, 목차, 브레드크럼 등으로 사용.

페이지의 주요 탐색 링크를 위한 태그.

하나의 웹페이지에 여러 개의 nav 태그를 가질 수 있음.

 

footer

페이지의 작성자, 저작권정보, 관련 문서 등의 내용.

 

main

body의 주요 콘텐츠.

웹페이지에서 한번만 사용.

여러 페이지에서 반복되는 콘텐츠를 포함X

 

article

독립적으로 구분하는 구획.

아티클을 제거해도 페이지는 정상적으로 돌아가야함.

다른 기능에 영향을 주지 않음.

대표적으로 뉴스 홈페이지에 기사들.

게시판, 블로그 글, 매거진, 뉴스 기사, 위젯, 실시간 채팅창 등

제목 요소를 자식으로 포함해야함.

 

section

제목 요소를 자식으로 포함해야함.

독립적으로 사용한다면 article 사용, 앞뒤 문맥이 연결성이 필요하거나, 더 적합한 의미를 가진 요소가 없을 때 section 사용.

단순 스타일링 목적으로는 div 사용.

 

aside

문서의 주요 내용과 간접적으로 연관된 부분을 나타냄.

문서의 주요 흐름을 따라가지않고 부조적인 역할만 하는 공간.

각주, 광고 배너등에 사용.

---

3. Contents

 

h1, h2, h3, h4, h5, h6

Heading : 제목

윕 페이지가 하나의 책이라고 생각한다면 제목 태그는 목차.

h1 ~ h6 순서대로 작성.

 

a

다른 페이지나 같은 페이지의 어느 위치, 파일, 그 외 다른 URL로 연결 할 수 있는 하이퍼링크.

href : hypertext reference

target : 속성값 ex) _self, _blank

download : 링크 이동 대신 URL을 저장

인라인 요소이지만, 예외적으로 블록 요소들을 감쌀 수 있음.

 

p

paragraph : 하나의 문단

HTML에서 문단은 이미지나 입력 폼 등 관련있는 컨텐츠는 무엇이든 될 수 있음.

블록 요소.

 

strong

중대하거나 긴급한 콘텐츠. 단어 또는 문장

기본적으로 굵은 글꼴이 적용.

스크린 리더를 사용할 때 거센 억양으로 소리를 내어 발음.

 

br

line break의 약어. 줄을 나눈다는 뜻

HTML은 엔터 값을 인식 X

 

hr

이야기에서 장면 전환 혹은 문단 안에서 주제가 변경되었을 때 사용.

단락을 구분할 때 사용하므로 <p> 태그 내의 사용 X

 

code

짧은 코드 조각을 나타낼 때 사용.

텍스트의 고정 폭 글꼴을 사용.

 

pre

html에서 작성한 내용 그대로 표현.

공백이 필요한 코드, 아스키 아트 등

---

4. 목록 태그

ol

ordered list의 약자. 순차적 목록

정렬된, 순서가 있는 보통 숫자 목록을 의미

type : 항목을 셀 때 사용할 카운터 유형 ex) 1, a, A, i, I

start : 항목을 셀 때 시작할 수.

reversed : 순서 역전

순서가 중요한 목록에 적용.

 

ul

unordered list의 약자. 비순차적 목록

정렬되지 않은, 보통 불릿으로 표현되는 목록.

순서가 중요하지 않는 목록에 적용.

 

li

목록의 항목을 나타냄.

단독으로 사용X.

ol, ul의 자식 요소로만 사용

주의) ol, ul의 자식 요소로는 li만 사용

---

5. Media

img

image의 약자. 문서에 이미지를 삽입

src : 경로

alt : 대체 텍스트, 이미지에 대한 설명. src에 지정한 이미지를 불러오지 못했을 때, alt값 내용을 보여줌.