HTML5 144개의 태그 중 가장 많이 쓰이는 것

HTML5의 종류 (by Bard)

 

HTML5는 100개 이상의 태그를 제공합니다. HTML5의 태그는 크게 6가지로 분류됩니다.

 

• 컨텐츠 태그: 텍스트, 이미지, 링크 등을 표시하는 태그입니다.
• 컨테이너 태그: 다른 태그를 포함하는 태그입니다.
• 폼 태그: 사용자 입력을 수집하는 태그입니다.
• 헤드 태그: HTML 문서의 메타 데이터를 포함하는 태그입니다.
• 섹션 태그: HTML 문서를 구조화하는 태그입니다.
• 스크립트 태그: JavaScript 코드를 포함하는 태그입니다.

HTML5의 태그는 HTML5 표준에서 정의되어 있습니다. HTML5 표준은 W3C에서 정의하고 있습니다.

---

시멘틱 의미를 가지는 HTML 태그 (by chatGTP)

 

 

시멘틱 의미를 가지는 HTML 태그들은 웹 페이지의 구조와 의미를 더 명확하게 표현하는데 도움을 주는 태그들입니다. 다음은 시멘틱 의미가 있는 HTML 태그들 중 일부입니다:

 

• `header`: 문서나 섹션의 헤더를 나타냅니다
• `nav`: 내비게이션 링크들을 그룹화하여 나타냅니다
• `main`: 문서의 주요 컨텐츠를 나타냅니다
• `section`: 일반적인 문서나 애플리케이션의 섹션을 나타냅니다
• `article`: 독립적인 컨텐츠 조각을 나타냅니다. 블로그 글, 뉴스 기사 등에 사용됩니다
• `aside`: 주 컨텐츠와 연관된 사이드 컨텐츠를 나타냅니다. 사이드바에 사용됩니다
• `footer`: 문서나 섹션의 푸터(마지막 부분)를 나타냅니다
• `address`: 문서 작성자 또는 문서와 연관된 연락처 정보를 나타냅니다.
• `time`: 날짜, 시간 또는 기간을 나타냅니다.
• `mark`: 텍스트에서 하이라이트 된 부분을 나타냅니다.

---

개발자들이 많이 쓰는 HTML 태그들 (By Bard)

 

• `html` 태그: HTML 문서를 시작합니다
• `head` 태그: HTML 문서의 메타 데이터를 포함합니다
• `body` 태그: HTML 문서의 본문을 포함합니다
• `title` 태그: HTML 문서의 제목을 지정합니다
• `link` 태그: HTML 문서에 CSS 파일을 연결합니다
• `script` 태그: HTML 문서에 JavaScript 파일을 연결합니다

 

• `div` 태그: 컨테이너를 생성합니다
• `p` 태그: 단락을 생성합니다
• `h1~h6` 태그: 제목 을 생성합니다
• `img` 태그: 이미지를 표시합니다
• `a` 태그: 링크를 생성합니다
• `ul` 태그: 순서가 없는 목록을 생성합니다
• `ol` 태그: 순서가 있는 목록을 생성합니다
• `li` 태그: 목록 항목을 생성합니다
• `table` 태그: 표를 생성합니다
• `tr` 태그: 표의 행을 생성합니다
• `th` 태그: 표의 열 머리글을 생성합니다
• `td` 태그: 표의 열을 생성합니다
• `form` 태그: 양식을 생성합니다
• `input` 태그: 입력 필드를 생성합니다
• `textarea` 태그: 텍스트 영역을 생성합니다
• `select` 태그: 선택 목록을 생성합니다
• `button` 태그: 버튼을 생성합니다

---

HTML 빈번한 사용 순서대로 (2021 기준, by chatGTP)

 

• `div`: 블록 수준 컨테이너를 정의하고 스타일을 적용합니다
• `a`: 하이퍼링크를 생성합니다
• `p`: 단락을 나타냅니다
• `img`: 이미지를 삽입합니다
• `ul`: 정렬되지 않은 목록을 생성합니다
• `li`: 목록 항목을 나타냅니다
• `h1~h6``: 제목을 나타냅니다
• `span`: 인라인 수준의 스타일을 적용할 때 사용합니다
• `strong`: 강조된 텍스트를 나타냅니다 (기본적으로 굵은 글씨로 표시됨)
• `em`: 강조된 텍스트를 나타냅니다 (기본적으로 이탤릭체로 표시됨)
• `br`: 줄 바꿈을 나타냅니다
• `hr`: 수평선을 삽입합니다
• `table`: 테이블을 생성합니다
• `tr`: 테이블의 행을 나타냅니다
• `td`: 테이블의 셀을 나타냅니다
• `th`: 테이블의 헤더 셀을 나타냅니다
• `input`: 사용자 입력을 받는 입력 필드를 생성합니다
• `button`: 버튼을 생성합니다
• `form`: 입력 양식을 정의하고 제출하는 데 사용합니다
• `label`: 입력 요소와 관련된 레이블을 정의합니다
• `select`: 드롭다운 목록을 생성합니다
• `option`: 드롭다운 목록의 항목을 나타냅니다
• `textarea`: 여러 줄의 텍스트를 입력하는 입력 필드를 생성합니다
• `nav`: 네비게이션 링크를 정의합니다
• `header`: 문서 또는 섹션의 헤더를 정의합니다
• `footer`: 문서 또는 섹션의 푸터를 정의합니다
• `section`: 문서의 섹션을 정의합니다
• `article`: 독립적인 컨텐츠 조각을 정의합니다
• `aside`: 문서의 사이드바 컨텐츠를 정의합니다
• `meta`: 문서의 메타데이터를 정의합니다
• `iframe`: 인라인 프레임을 생성합니다
• `figure`: 그림이나 일러스트레이션, 사진 등과 같은 독립적인 컨텐츠를 정의합니다
• `figcaption`: `figure` 요소의 캡션을 정의합니다
• `video`: 비디오 미디어를 재생하기 위한 컨테이너를 생성합니다
• `audio`: 오디오 미디어를 재생하기 위한 컨테이너를 생성합니다
• `iframe`: 인라인 프레임을 생성합니다
• `section`: 문서의 섹션을 정의합니다
• `header`: 문서 또는 섹션의 헤더를 정의합니다
• `footer`: 문서 또는 섹션의 푸터를 정의합니다
• `nav`: 네비게이션 링크를 정의합니다
• `aside`: 문서의 사이드바 컨텐츠를 정의합니다
• `article`: 독립적인 컨텐츠 조각을 정의합니다
• `main`: 문서의 주요 콘텐츠를 정의합니다
• `summary`: `details` 요소의 요약을 정의합니다
• `details`: 사용자가 "Details"를 클릭하면 정보를 표시할 수 있는 세부정보 요소를 생성합니다
• `mark`: 텍스트의 하이라이트를 나타냅니다
• `time`: 날짜, 시간, 기간을 나타냅니다
• `progress`: 작업 진행 상태를 표시하는 프로그레스 바를 생성합니다
• `meter`: 스칼라 측정의 값을 나타내는 미터 요소를 생성합니다
• `output`: 연산의 결과나 사용자 입력값을 나타내는 출력 필드를 생성합니다
• `abbr`: 축약어를 정의합니다
• `address`: 주소 정보를 나타냅니다
• `area`: 이미지 맵의 영역을 정의합니다
• `b`: 텍스트를 굵게 표시합니다
• `base`: 문서의 상대 URL들의 기본 URL을 정의합니다
• `bdi`: 양방향 텍스트 인터페이스를 정의합니다
• `bdo`: 텍스트의 쓰기 방향을 지정합니다
• `blockquote`: 긴 인용문을 나타냅니다
• `body`: 문서의 본문을 정의합니다
• `button`: 버튼을 생성합니다
• `canvas`: 그래픽 그리기를 위한 영역을 생성합니다
• `caption`: 테이블의 캡션(제목)을 정의합니다
• `cite`: 인용된 작품의 제목을 정의합니다
• `code`: 컴퓨터 코드 텍스트를 나타냅니다
• `col`: 테이블의 열을 정의합니다
• `colgroup`: 테이블의 열들의 그룹을 정의합니다
• `data`: 데이타 항목을 나타냅니다
• `datalist`: `input` 요소와 함께 옵션들의 목록을 정의합니다
• `dd`: 정의 목록의 설명을 나타냅니다
• `del`: 삭제된 텍스트를 나타냅니다
• `dialog`: 대화 상자 요소를 생성합니다
• `dfn`: 용어의 정의나 설명을 나타냅니다
• `dl`: 정의 목록을 정의합니다
• `dt`: 정의 목록의 용어를 나타냅니다
• `em`: 강조된 텍스트를 나타냅니다
• `embed`: 외부 내용을 내장합니다
• `fieldset`: 양식 요소들의 그룹을 정의합니다
• `figcaption`: `figure` 요소의 캡션을 정의합니다
• `figure`: 그림이나 일러스트레이션, 사진 등과 같은 독립적인 컨텐츠를 정의합니다
• `footer`: 문서 또는 섹션의 푸터를 정의합니다
• `form`: 입력 양식을 정의하고 제출하는 데 사용합니다
• `h` to `h`: 제목을 나타냅니다 (`h`이 가장 큰 제목이고, `h`이 가장 작은 제목입니다)
• `head`: 문서의 메타데이터와 스타일 시트, 스크립트를 포함하는 영역을 정의합니다
• `header`: 문서 또는 섹션의 헤더를 정의합니다
• `hr`: 수평선을 삽입합니다
• `html`: HTML 문서의 루트 요소를 정의합니다
• `i`: 텍스트를 이탤릭체로 표시합니다
• `iframe`: 인라인 프레임을 생성합니다
• `img`: 이미지를 삽입합니다
• `ins`: 추가된 텍스트를 나타냅니다
• `kbd`: 사용자의 키보드 입력을 나타냅니다
• `label`: 입력 요소와 관련된 레이블을 정의합니다
• `legend`: `fieldset` 요소의 제목을 정의합니다
• `li`: 목록 항목을 나타냅니다
• `link`: 문서와 외부 리소스 간의 관계를 정의합니다
• `main`: 문서의 주요 콘텐츠를 정의합니다
• `map`: 이미지 맵을 정의합니다
• `mark`: 텍스트의 하이라이트를 나타냅니다
• `meta`: 문서의 메타데이터를 정의합니다
• `meter`: 스칼라 측정의 값을 나타내는 미터 요소를 생성합니다
• `nav`: 네비게이션 링크를 정의합니다
• `noscript`: 브라우저가 스크립트를 지원하지 않을 때 대체 콘텐츠를 제공합니다
• `object`: 외부 객체를 나타내는 object 요소를 생성합니다
• `ol`: 정렬된 목록을 생성합니다
• `optgroup`: `select` 요소의 그룹화된 옵션들을 정의합니다
• `option`: `select` 또는 `datalist`의 옵션 항목을 정의합니다
• `output`: 연산의 결과나 사용자 입력값을 나타내는 출력 필드를 생성합니다
• `p`: 단락을 나타냅니다
• `param`: `object` 요소에 전달되는 매개변수를 정의합니다
• `picture`: 다중 미디어 리소스를 지원하는 이미지 컨테이너를 생성합니다
• `pre`: 서식이 미리 지정된 텍스트를 나타냅니다
• `progress`: 작업 진행 상태를 표시하는 프로그레스 바를 생성합니다
• `q`: 짧은 인용문을 나타냅니다
• `rp`: 루비 주석의 존재 여부에 따라 루비 주석의 시작 또는 끝을 나타냅니다
• `rt`: 루비 주석의 텍스트를 나타냅니다
• `ruby`: 루비 주석을 정의합니다
• `s`: 텍스트를 가운데 줄을 그어 표시합니다
• `samp`: 프로그램 출력 또는 스크립트의 샘플 출력을 나타냅니다
• `script`: 클라이언트 측 스크립트를 정의합니다
• `section`: 문서의 섹션을 정의합니다
• `select`: 드롭다운 목록을 생성합니다
• `small`: 작은 텍스트를 나타냅니다
• `source`: 미디어 요소의 소스를 정의합니다
• `span`: 인라인 수준의 스타일을 적용할 때 사용합니다
• `strong`: 강조된 텍스트를 나타냅니다 (기본적으로 굵은 글씨로 표시됨)
• `style`: 문서의 스타일 시트를 정의합니다
• `sub`: 아래 첨자를 나타냅니다
• `summary`: `details` 요소의 요약을 정의합니다
• `sup`: 위 첨자를 나타냅니다
• `svg`: 스케일러블 벡터 그래픽 요소를 정의합니다
• `table`: 테이블을 생성합니다
• `tbody`: 테이블의 본문 영역을 정의합니다
• `td`: 테이블의 셀을 나타냅니다
• `template`: 클라이언트 측 템플릿을 정의합니다
• `textarea`: 여러 줄의 텍스트를 입력하는 입력 필드를 생성합니다
• `tfoot`: 테이블의 바닥글 영역을 정의합니다
• `th`: 테이블의 헤더 셀을 나타냅니다
• `thead`: 테이블의 헤더 영역을 정의합니다
• `time`: 날짜, 시간, 기간을 나타냅니다
• `title`: 문서의 제목을 정의합니다
• `tr`: 테이블의 행을 나타냅니다
• `track`: 미디어 트랙을 정의합니다
• `u`: 텍스트를 밑줄로 표시합니다
• `ul`: 정렬되지 않은 목록을 생성합니다

 

이러한 태그들은 HTML 문서의 구조와 콘텐츠를 정의하는데에 가장 자주 사용되는 태그들입니다 웹 페이지를 구성하는데에 이러한 태그들을 적절하게 활용하여 사용자들에게 의미있는 콘텐츠를 제공할 수 있습니다

---

HTML 태그 중 사라진 것 (By Bard)

 

• `b` 태그: 굵은 글씨를 표시하는 태그로, `strong` 태그로 대체되었습니다
• `i` 태그: 기울임꼴 글씨를 표시하는 태그로, `em` 태그로 대체되었습니다
• `u` 태그: 밑줄을 표시하는 태그로, `underline` 태그로 대체되었습니다
• `strike` 태그: 취소선을 표시하는 태그로, `s` 태그로 대체되었습니다
• `font` 태그: 글꼴을 지정하는 태그로, `style` 태그로 대체되었습니다
• `center` 태그: 텍스트를 가운데 정렬하는 태그로, `justify-content: center` CSS 속성으로 대체되었습니다
• `marquee` 태그: 텍스트를 스크롤하는 태그로, 더 이상 사용되지 않습니다
• `nobr` 태그: 텍스트를 줄 바꿈하지 않는 태그로, 더 이상 사용되지 않습니다
• `isindex` 태그: 검색 상자를 생성하는 태그로, 더 이상 사용되지 않습니다