HTML5로 넘어오면서 태그의 가장 큰 변화는 시멘틱 태그이다.
일단, "Semantic"의 사전적 정의는 "의미론적" 이다.
즉, 시멘틱 태그는 각각 의미를 포함하고 있는 태그이다.
이러한 시멘틱 태그는 마치 컵,연필,지우개와 같이 설명이 없어도 바로 용도를 유추 할 수 있게 한다.
예를 들어서...
<div>,<span>과 같은 태그만을 사용하면 용도를 바로 알아차리 힘들지만,
헤더에는<header> // 메뉴에는<nav> // 메인에는<main>과 같은 태그를 사용하면 보다 쉽게 용도를 유추할 수 있다.
SEO최적화(검색엔진) : 검색엔진은 자동으로 내 웹사이트를 분석하여 사용자들에게 제공하기 때문에 시멘틱 태그를 잘 사용하면 검색 결과의 노출에 유리할 수 있게 해준다.
Accessibility(접근성) : '스크린 리더' 나 '키보드'를 이용하여 웹에 접근 할때 보다 뛰어난 접근성을 제공해준다.
개발자(우리)를 위해 : 코드공유시 이해하기 쉽고, 유지보수성을 높여준다.
<address> 콘텐츠 작성자나 사이트 소유자의 정보등을 부가적으로 담는 기능
<hgroup> 제목과 관련된 부제목을 묶는 태그
<main> 이름처럼 문서 <body>의 중심 주제, 주요 내용 또는 응용 프로그램의 중심 기능과 직접 관련되어나 확장되는 콘텐츠를 나타낸다.
<details> 주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타냅니다.
<figure> 이미지, 다이어그램, 사진 등 독립적인 컨튼츠 정의시 사용
<figcaption> <figure> 요소의 설명 캔션(caption) 정의
<mark> 현재 맥락에 관련이 깊거나 중요한 부분 강조
<time> 시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림같은 기능 구현
<summary> details 요소에 대한 요약, 캡션 또는 범례를 지정합니다. summary 요소를 클릭하면 상위 details 요소의 상태가 열리고 닫힙니다.
태그 더 알아보기
내가 만들었던 html 레이아웃 분석
article vs section
i vs em
b vs strong
i,em : 이탈릭체 // b,strong : 볼드
i,b는 시각적으로만 강조가 된다 (책의 제목, 인용구 처럼 시각적으로만 필요한 곳)
em,strong 은 시각 뿐만 아니라 스크린 리더기에서도 강조가 된다(진짜로 강조해야하는 내용에 사용)
ol vs ul vs dl
img vs CSS-background
button vs a
table vs CSS
참고 자료 출처
https://www.youtube.com/watch?v=T7h8O7dpJIg
https://stonefree.tistory.com/59
https://velog.io/@syoung125/%EC%8B%9C%EB%A7%A8%ED%8B%B1-%ED%83%9C%EA%B7%B8-Semantic-Tag-%EC%9E%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
https://snusang.tistory.com/4
태그 더 알아보기
📚HTML 요소 참고서 바로가기