🏷️ Semantic HTML

9oorm·2021년 7월 23일

HTML

목록 보기

2/2

🏷️Semantic HTML이란?

시맨틱(semantic)은 "의미의, 의미론적인" 이라는 뜻을 가진다.
즉, 시맨틱(semantic) HTML이란 의미론적 HTML을 말한다.
우리는 HTML의 요소에 대해 생각할 때 그 요소가 어떻게 보일지에 대해 생각하지 말고 실제로 무엇을 의미하고 나타내는 것인지 생각해야 한다. 이게 기본적인 시맨틱 HTML의 정의다.

non-semantic elements의 예시

<div>, <b>, <i> 등이 있다. 이들은 아무런 의미가 없는 element이다.

semantic elements의 예시

<section>, <strong>, <em> 등이 있다. HTML 5와 함께 새롭게 등장한 elements를 포함한 이들은 개발자와 브라우저 모두에게 의미를 전달할 수 있다.

이쯤에서 우리는 왜 이렇게 코드를 작성해야 하는지 의문점을 가질 수 있다.

🤔 왜 시맨틱한(semantic) HTML을 작성해야 할까?

검색 엔진 최적화
: 구글과 같은 검색 엔진이 우리가 작성한 내용을 이해하는 과정에서 Semantic elements를 통해 무엇이 중요하고 웹 페이지가 무엇에 관한 것인지 더 잘 분석할 수 있다.
스크린 리더를 이용하는 사람들
: 스크린 리더는 웹 페이지를 탐색할 때 Semantic elements을 푯말로 사용한다고 한다.

이 외에도 나를 포함한 누군가가 코드를 볼 때 가독성을 높여 문서의 전체적인 구조를 파악하기 쉽게 하는 등 다양한 이유가 존재한다.

✨ 대표적인 HTML의 시맨틱(Semantic) 요소(element)들

요소	설명
`<article>`	페이지 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다.
`<aside>`	문서의 주요 내용과 간접적으로만 연관된 부분을 나타낸다.
`<details>`	"열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성한다.
`<figcaption>`	부모 `<figure>` 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타낸다.
`<figure>`	독립적인 콘텐츠를 표현, `<figcaption>` 요소를 사용해 설명을 붙일 수 있다.
`<footer>`	문서나 섹션의 꼬릿말, 일반적으로 구획의 작성자, 저작권, 관련 문서 등의 내용을 나타낸다.
`<header>`	문서나 섹션의 꼬릿말, 소개 및 탐색에 도움을 주는 콘텐츠를 표현한다.
`<main>`	문서`<body>` 의 주요 콘텐츠, `hidden` 속성 없이는 문서에 하나이상 존재하지 않는다.
`<mark>`	현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타낸다.
`<nav>`	문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획(메뉴, 목차, 색인 등)을 나타낸다.
`<section>`	HTML 문서의 독립적인 구획을 나타낸다, 보통은 제목을 포함한다.
`<summary>`	`<details>` 요소의 공개 상자에 대한 요약, 캡션 또는 범례 지정을 나타낸다.
`<time>`	시간의 특정 지점 또는 구간을 나타낸다.

9oorm

구름구름

이전 포스트