HTML 요소의 종류

(2021-10-18)

HTML 요소 종류, html 요소 종류, HTML 태그, html 태그, 요소 종류


1. HTML 요소들의 종류

  ㅇ `HTML 기본 문서 구조`를 위한 요소들
     - 기본 구조 정보 : html, head, body                              ☞ HTML 기본 구조 요소 참조
        . html 요소  : 문서 형태 선언
        . head 요소  : 문서 정보들을 나타내는 곳
        . body 요소  : 문서 본문을 나타냄
     - 부가 정보 제공 : base, link, meta, noscript, script, style, title
        . (주로, head 요소 내 사용 가능 요소들)
           .. meta 요소, title 요소, link 요소, base 요소, style 요소, script 요소 등

  ㅇ `영역(섹션) 구획`을 위한 요소들                                         ☞ 시맨틱 요소 침조
     - (웹페이지 논리 구획) : 웹페이지 전체 또는 일정 영역을 논리적인 구획으로 분할할 때 유용
        .  header, nav, section, article, aside, footer
           
     - 영역(섹션) 구획 세부사항
        . details (세부 설명)
        . summary (요약)
        . output (출력 결과)

  ㅇ `컨텐츠 가독성 제고`를 위한, (내용 묶기/구분) 요소들
     - 제목,표제 (Heading) : h1 ~ h6 (6 단계 구분), hgroup
     - 단락 (Paragraph) : p (유사한 주제를 갖는 문자열의 묶음)
     - 줄바꿈 (Newline) : br
     - 수평선(또는,주제 분리) : hr (horizontal rule)
     - 인용문 : blockquote
     - 공간 분할
        . div 요소 (block 형식으로 공간 분할, 가장 일반적이고 가독성 있는 구조 제공)
        . span 요소 (inline 형식으로 공간 분할)
     - 띄어쓰기 인식 가능 : pre
        . html 문서는 띄어쓰기(스페이스바,,엔터 등)를 무시하나,
        . pre 요소는 이를 그대로 출력시킴
     - 기타 : figure, figcaption

  ㅇ `하이퍼 링크(앵커)`를 만드는 요소
     - a 요소

  ㅇ `목록 형식`을 만드는 요소 
     - ol (ordered list), ul (unordered list), li (description list)
     - dt (정의 목록), dd (정의 글자), dl (정의 설명)

  ㅇ `테이블 형식`을 만드는 요소 (table 요소)
     - table, tbody, td, tfoot, th, thead, tr
     - col (표 열), caption (표 제목), colgroup (표 열 그룹)

  ㅇ `표시 부분이 특정 의미`를 갖도록 하는 요소
     - abbr (축약형 약어 표시)
     - address (우편물 주소 표시)
     - cite (인용 작품 제목)
     - code (컴퓨터 코드)
     - dfn (용어 정의)
     - kbd (키보드 입력임을 표시)
     - q (짧은 인용구 표시)
     - samp (프로그램 샘플 코드)
     - var (변수 표시)
     - 강조 (중요 내용 표시)
        . strong (강한 강조) : 통상, 굵은 글꼴체
           .. 해당 컨텐츠가 강한 중요성,심각성,긴급성을 갖고 있음을 가리킴
           .. 단지 주의를 끄는 굵은 글꼴체가 아님
        . em (EMphasis, 약한 강조) : 통상, 기울임체
           .. 주위 텍스트에 비해 강조되도록(눈에 띄도록) 함
           .. 단어 하나 혹은 몇 개로 제한됨

  ㅇ `글자/단어/구문에 스타일링`을 주는 요소                                  ☞ CSS 텍스트 참조
     - b (강조)
     - i (이탤릭체/기울어진 글자)
     - s 또는 del (수평 취소선)
     - small (작은 글자)
     - sub (아래 첨자)
     - sup (위첨자)
     - u 또는 ins (밑줄)

  ㅇ 멀티미디어 요소
     - 플러그인 없이 웹브라우저가 직접/전용 지원
        . 비디오 : video 요소
        . 오디오 : audio 요소
     - 한편, 기존 플래시 처럼 플러그인을 통해 랜더링시키는 마크업/태그 : embed, object

  ㅇ 이미지 요소 : img 요소

  ㅇ `입력 양식`을 만들기 위한 요소                                  ☞ 폼 요소 (form 요소) 참조
     - fieldset, form, input, button, select, label,legend, textarea
     - 폼 레이블 컨트롤 : label
     - 폼 컨트롤 그룹핑 : fieldset (그룹핑 기능), legend (그룹핑에 대한 주석)

  ㅇ 스크립트 요소 : script 요소
     - 기본적으로 script 태그 내 내용을 자바스크립트 코드로 해석함

  ㅇ 기타 요소들
     - area
     - bdi, bdo
     - canvas, command
     - datalist
     - iframe
     - keygen
     - map, mark, menu, meter
     - option
     - param, progress
     - rp, rt, ruby
     - time, track
     - wbr


3. [참고사항]블록 요소(태그) 및 인라인 요소(태그) 구분                             ☞ CSS 박스 모델 참조
     - 블록 요소   : p, h1~h6, div, ol, ul 등
     - 인라인 요소 : a, span, img 등



Copyrightⓒ written by 차재복 (Cha Jae Bok)
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"