HTML5 태그

제목 표시 태그

HTML에서 제목을 표시할 때 사용하는 태그. h1부터 h6까지 있으며, 숫자가 작을수록 더 중요한 제목을 나타냄

• h1: 최상위 제목
• h2: 두 번째로 중요한 제목
• h3: 세 번째로 중요한 제목
• h4 ~ h6: 점점 덜 중요한 제목

 

문단 및 줄바꿈 태그

문단을 나누고 줄을 바꾸는 데 사용되는 태그

• p: 문단을 나타냄. 텍스트를 단락으로 구분하는 데 사용
• br: 줄바꿈을 나타냄. 텍스트 내에서 강제 개행을 할 때 사용 (Shift+Enter)

 

글자 스타일링 태그

글자를 굵게, 기울임, 밑줄 등 다양한 스타일로 표시할 수 있음. 이 태그들은 텍스트의 가독성을 높이고, 강조할 부분을 시각적으로 구분하는 데 사용

• b: 글자 굵게 표시. 의미보다는 스타일을 강조
• strong: 글자 굵게 표시하며, 의미를 강조, 스크린 리더가 이 태그를 읽을 때 강한 강조로 인식
• i: 글자 기울임 표시. 의미보다는 스타일을 강조
• em: 글자 기울임 표시하며, 의미를 강조, 스크린 리더가 이 태그를 읽을 때 강조로 인식
• u: 글자 밑줄 표시. 스타일을 강조할 때 사용
• s: 글자 취소선 표시. 삭제된 텍스트를 나타낼 때 사용
• del: 글자 취소선 표시하며, 의미를 전달함. 시각장애인을 위한 의미를 포함

 

글자 크기 태그

글자의 크기를 조절할 수 있음. 기본 폰트 사이즈는 16px. 사용자는 큰 글자와 작은 글자를 통해 강조하고자 하는 부분을 시각적으로 구분할 수 있음

• big: 글자 크게 표시
• small: 글자 작게 표시

 

첨자 태그

위 첨자와 아래 첨자를 표시할 때 사용함. 주로 수학식이나 화학식에서 사용

• sup: 위 첨자. 예: x²
• sub: 아래 첨자. 예: H₂O

 

형광펜 배경색 글자 태그

글자에 형광펜 배경색을 적용함. 중요한 부분을 강조하는 데 사용

• mark: 형광펜 배경색 글자. 예: 강조 표시

수평선 태그

페이지에 수평선을 삽입함. 콘텐츠를 구분하는 데 사용

• hr: 수평선. 콘텐츠를 시각적으로 구분하는 용도로 사용

<a> 태그 (Anchor Tag)

<a> 태그는 앵커(Anchor) 태그로 불리며, HTML 문서에서 하이퍼링크를 생성하는 데 사용된다.

이 태그를 통해 다른 웹 페이지나 파일로의 링크를 설정할 수 있다.

 

주요 속성

• href: 링크의 목적지를 지정한다. URL이나 파일 경로를 포함할 수 있다.
• target: 링크를 클릭했을 때 열리는 위치를 지정한다. _blank, _self, _parent, _top 등을 사용할 수 있다.
  • _blank: 링크를 새 탭이나 새 창에서 연다.
  • self: 링크를 현재 창이나 탭에서 연다. 기본값이다.
  • _parent: 링크를 부모 프레임에서 연다. 프레임이 없으면 현재 창이나 탭에서 연다.
  • _top: 링크를 최상위 프레임에서 연다. 모든 프레임을 제거하고 현재 창이나 탭에서 연다.
• rel: 링크와 대상 간의 관계를 명시한다. noopener, noreferrer, nofollow 등이 있다

 

<img> 태그 (Image Tag)

<img> 태그는 HTML 문서에서 이미지를 삽입하는 데 사용된다. 이 태그는 닫는 태그가 없는 자체 닫힘 태그(self-closing tag)이다.

 

주요 속성

• src: 삽입할 이미지의 경로를 지정.
• alt: 이미지의 대체 텍스트를 제공, 이미지가 로드되지 않을 때 표시되며, 시각장애인을 위한 화면 낭독기에서도 사용한다.
• width: 이미지의 너비를 지정.
• height: 이미지의 높이를 지정.

 

<ul> 태그 (Unordered List)

<ul> 태그는 순서가 없는 목록을 작성하는 데 사용된다. 목록 항목은 <li> 태그를 사용하여 정의된다. 주로 점(bullet)을 사용하여 각 항목을 표시한다.

 

<ol> 태그 (Ordered List)

<ol> 태그는 순서가 있는 목록을 작성하는 데 사용된다. 목록 항목은 <li> 태그를 사용하여 정의된다. 주로 숫자나 알파벳을 사용하여 각 항목을 표시한다.