[HTML] 태그 마무리 정리

1. 텍스트 관련 태그

HTML에서 텍스트에 사용할 수 있는 태그

• hn 태그 : 주제나 제목 성격의 텍스트를 작성할 때
• p 태그 : 텍스트로 문장 또는 단락을 구성할 때 사용
• br 태그 : 텍스트를 줄 바꿈 할때 사용
• blockquote 태그 : 문단 단위의 인용문을 작성할 때 사용
• q 태그 : 문장 단위의 짧은 인용문을 작성할 때 사용
• ins 태그 : 추가할 텍스트를 표시할 때 사용
• del 태그 : 삭제할 텍스트를 표시할 때 사용
• sub 태그 : 아래 첨자를 표시할 때 사용
• sup 태그 : 위 첨자를 표시할 때 사용

 

2. 그룹을 위한 태그

HTML에서 그룹화에 사용하는 태그로 div, span 태그가 있는데 이 태그들은 태그 자체에 어떠한 의미도 없다.

 

3. 목록을 만드는 태그

목록을 생성할 때는 ul, ol, dl 태그를 사용한다.

• ul 태그 : 비순형 목록을 만들고, 목록 내용을 구성할 때는 li 태그 사용
• ol 태그 : 순서형 목록을 만들고, 목록 내용을 구성할 때는 li 태그 사용
• dl 태그 : 정의형 목록을 만들고, 목록 내용을 구성할 때는 dt와 dd 태그 사용 

 

4. 링크와 이미지

웹 페이지 내부의 특정 위치 또는 외부의 다른 문서와 연결하는 것을 링크라고 하는데 링크는 HTML의 a 태그로 생성한다.

a 태그에서 href 속성을 필수 이며 target 속성은 선택적으로 지정할 수 있다. 이미지를 삽입하고 싶으면 img 태그를 사용한다

img 태그는 이미지의 경로를 지정하는 src 속성과 이미지 설명을 작성하는 alt 속성을 필수로 작성해야한다.

 

5. 강조 관련 태그

텍스트를 강조하는 태그로는 strong, em 태그가 있다.

 

6. 폼 관련 태그

폼 관련 태그는 HTML에서 제공하는 태그 중 유일하게 사용자와 상호작용할 수 있는 태그로 관련태그는 form, input, label, fieldset, legend, select, button 태그가 있다 

• form 태그 : 폼 양식을 의미
• input 태그 : 한 줄짜리 입력 요소 생성
• label 태그 : 폼 요소에 이름을 붙일 때 사용
• fieldset 태그 : 관련 있는 폼 요소끼리 그룹을 지을 때 사용
• legend 태그 : 그룹 지은 요소에 이름을 붙일 때 사용
• textarea 태그 : 여러 줄 입력 요소 생성
• select 태그 :  콤보박스 생성
• button 태그 : 버튼 요소 생성

 

7. 표 관련 태그

표는 행과 열로 구성된 2차원 격자 모양의 데이터 형태를 의미하며 HTML에서는 다음과 가튼 태그로 표를 구성한다.

• table 태그 : 표를 생성할 때 사용
• tr, td, th 태그 : 행과 열을 생성할 때 사용
• caption 태그 : 표의 제목을 지정할 때 사용
• col, colgroup 태그 : 열을 그룹화할 때 사용
• thead, tfoot, tbody 태그 : 행을 그룹화할 때 사용
• th, td 태그와 rowspan, colspan 속성 : 셀을 병합할 때 사용

 

8. 멀티미디어 태그

웹 페이지에서 대표적인 멀티미디어 요소로는 오디오와 비디오가 있다.

• audio 태그 : 오디오 요소를 삽입할 때 사용
• video 태그 : 비디오 요소를 삽입할 때 사용

 

9. 시맨틱 태그

시맨틱 태그는 태그의 이름만으로 태그의 용도나 역할에 대한 의미가 명확한 태그를 말한다.

시맨틱 태그는 의미 있게 HTML 구조를 설계한 웹 페이지를 시맨틱 웹이라고 한다.

HTML5에서는 웹 페이지 구조를 설계하기 위한 시맨틱 태그로 header, nav, section, article, aside, footer 태그가 추가 되었다.

 

10. 글로벌 속성

모든 태그에서 공통으로 사용할 수 있는 속성을 글로벌 속성이라고 한다. 자주 사용하는 글로벌 속성으로는 class, id, style, title, lang, hidden, data-* 속성이 있다.

속성	값	설명
class	value	요소에 클래스 값을 지정한다. 클래스 값은 CSS에서 클래스선택자로 활용한다
id	value	요소에 아이디 값을 지정한다. 아이디 값은 CSS에서 아이디 선택자로 활용한다
style	style	요소에 인라인 스타일을 지정한다
title	text	요소에 추가 정보를 지정한다. 마우스를 요소 위에 올리면 툴팁(tooltip)으로 추가 정보가 표시된다. 툴팁은 요소에 마우스 커서를 올렸을때 추가 설명이 뜨는 말풍선 형태의 그래픽 요소를 말한다
lang	language code	요소에 사용한 텍스트의 언어 정보를 지정한다
hidden	hidden	요소를 화면에서 감춘다
data-*	value	사용자가 임의의 속성을 만들 수 있다