[HTML]의미론적 태그

HTML 5부터 제공되는 태그

 

시맨틱 요소는 브라우저와 개발자 모두에게 그 의미를 명확하게 설명.

비의미적 요소 의 예 : <div>및 <span>- 내용에 대해 아무 것도 알려주지 않는 반면

의미론적 요소 의 예 : <form>, <table>및 <article>- 내용을 명확하게 정의.

 

일반 div들과 구별이 됨.

 

 

수많은 div들 중에서도 nav, main, footer로 구별을 하기가 쉽다!!

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

TagDescription

<article>	Defines independent, self-contained content
<aside>	Defines content aside from the page content
<details>	Defines additional details that the user can view or hide
<figcaption>	Defines a caption for a <figure> element
<figure>	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>	Defines a footer for a document or section
<header>	Specifies a header for a document or section
<main>	Specifies the main content of a document
<mark>	Defines marked/highlighted text
<nav>	Defines navigation links
<section>	Defines a section in a document
<summary>	Defines a visible heading for a <details> element
<time>	Defines a date/time

https://www.w3schools.com/html/html5_semantic_elements.asp

HTML Semantic Elements

 

 

 

따라서 CSS사용할때도 .nav{}가 아니라 nav{}로 작성해야함.

HTML Semantic Elements 사용 전

HTML Semantic Elements 사용 후

구별하기 참 쉽다.