less than 1 minute read

1. Semantic Tag

  • Semantics
  • Semantic HTML
  • HTML Semantic Elements
  • What are Semantic Elements?

    A semantic element clearly describes its meaning to both the browser and the developer.

    Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

    Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

  • 태그(요소)를 개발자들만 인지할 수 있도록 작성되는 부분을 지양하고, 의미 있는 태그(요소)를 적극적으로 사용하여 가독성, 접근성을 높일 수 있도록 Semantic Tag 사용을 지향

1.1 Semantic Tag 종류

Tag Description
<article> 컨텐츠 정의 / 참조
<details> 추가 세부 정보
<figcaption> <figure>의 캡션 / 참조
<figure> 자체 포함된 컨텐츠 지정 / 참조
<footer> 바닥글 / 참조
<header> 머릿글 / 참조
<main> 주요 컨텐츠
<mark> 강조표시 컨텐츠
<nav> 네비게이션 링크 / 참조
<section> <header>, <footer> 사이에 구역 정의 <section> 중첩 사용 가능/ 참조
<summary> <summary> 요소의 제목
<time> 날짜/시간

Leave a comment