[Blog] Semantic Tag
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