Post

HTML 기초 태그 분류

HTML 기초 태그 분류

<html></html>: HTML 문서의 루트 요소

<head></head>: 문서의 메타데이터 영역

<body></body>: 문서의 본문 내용 영역

display 속성에 따른 분류

block 태그

  • 문서의 구조를 구성하는 태그
  • 부모 요소의 전체 너비 만큼을 차지 한다
  • 너비와 높이를 지정 할 수 있다
  • <div></div> <p></p> <h1></h1> <ul></ul> <ol></ol> <li></li>

inline 태그

  • 문서의 컨텐츠를 감싸는 태그
  • 컨텐츠 크기만큼의 너비를 차지한다
  • 너비와 높이를 지정할 수 없다
  • 텍스트나 다른 inline 요소를 감싸는 데 사용된다. 예를 들어 <span> 태그는 텍스트를 감싸는 용도

의미론적 태그와 비의미론적 태그

의미론적 태그 (semantic tag)

  • 태그 이름을 통해 컨텐츠의 의미와 역할을 명확하게 전달 하는 태그
  • 의미론적 태그의 장점 :
    • 문서의구조와 내용을 명확히 정의
    • 웹 접근성 향상
    • 검색 엔진 최적화

주요 의미론적 태그 <p>, <h#> <header> : 문서나 섹션의 머리말 <nav> : 내비게이션 링크 그룹 <main> : 문서의 주요 콘텐츠 <article> : 독립적이고 완전한 콘텐츠 블록 <section> : 문서의 논리적 구역 <aside> : 본문과 간접적으로 관련된 콘텐츠 <footer> : 문서나 섹션의 바닥글

비의미론적 태그 (non-semantic tag)

  • 태그 이름이 컨텐츠의 의미를 전달하지 않는 태그
  • 웹 페이지를 구조화 하는 데 사용 된다 주요 비의미론적 태그 <div>, <span>
This post is licensed under CC BY 4.0 by the author.