이 글은 w3school과 MDN의 내용을 공부하여 개인적인 해석을 한 내용입니다.
틀린 부분이 있다면 댓글로 남겨주세요 😆
시맨틱 요소(Semantic Element)란?
시맨틱(Semantic)이라는 단어에서 알 수 있 듯, 의미를 담고 있는 요소들을 말합니다.
이 개념은 HTML 뿐만 아니라 CSS, JavaScript에서도 적용되는 개념이며, 이번 글은 HTML 위주로 다룹니다.
W3School에서 소개하는 정의는
"A semantic element clearly describes its meaning to both the browser and the developer."
브라우저에서 보여지는 단계와 개발 단계에서 모두 의미를 명확히 알 수 있는 요소
쉽게 말하면, 사용자가 보는 화면과 개발자가 개발하는 단계에서 모두 의미를 알 수 있는 요소입니다.
예시를 들어보면,
시멘틱 요소가 아닌 태그들에는 <div>, <span> 태그 등이 있으며,
시멘틱 요소인 태그들은 <form>, <table>, <nav> 등이 있습니다.
여러 태그들을 나열하는 HTML의 특성상 <div>, <span> 등을 사용하는 것보다 <form>, <table>, <nav> 등 태그 이름만으로도 용도를 알 수 있는 시맨틱 태그를 사용하는 것이 가독성 차원에서 좋은데요, 이외에도 사용하는 이유가 있습니다.
시맨틱 태그를 사용하는 이유
1. 개발 단계에서의 가독성 향상
- 끊임없는 <div> 태그 탐색을 줄일 수 있으며, 개발자에게 태그 안에 채워질 데이터 유형을 제안합니다.
2. 검색엔진최적화(SEO) 성능 향상
- 우리가 쓰는 Naver나 Google 같은 검색엔진은 웹페이지를 방문해 정보를 얻고 이를 바탕으로 사용자에게 검색 기능을 제공합니다.
- 시맨틱 태그는 관련 키워드와 문구에 대해 웹페이지를 최적화하는 데 도움이 되며, 이를 통해 검색 결과 상에서 웹 사이트 노출 순위를 높이고, 더 많은 트래픽을 유도할 수 있습니다.
3. 웹 접근성 향상
- 웹 접근성이란, 사람들이 웹페이지를 탐색하고 페이지와 상호 작용하는 데 도움이 되는 화면 판독기, 키보드 또는 음성 명령과 같은 보조 기술들을 이용할 때 얼마나 정보를 제공할 수 있는가에 대한 내용입니다.
- 즉, 화면 판독기, 키보드 또는 음성 명령과 같은 보조 기술을 사용하여 웹 페이지를 이용하시는 분들께 정보를 얼마나 확실하게 전달할 수 있는가입니다.
- 웹 접근성의 필요성을 의심할 수 있지만, 지속적으로 웹 접근성에 대한 이미지가 뚜렷해지는 요즘 웹 접근성은 필수 요소입니다.
웹 접근성 관련 기사
[판결] "'시각장애인 정보접근 차별' 온라인 대형 쇼핑몰, 10만원씩 배상"
시각장애인들이 온라인 정보이용에서 차별을 받고 있다며 대형 온라인 쇼핑몰 운영사들을 상대로 낸 손해배상소송에서 법원이 시각장애인들의 손을 들어줬다. 장애인차별금지법이 금지하고
www.lawtimes.co.kr
시맨틱 태그 종류
시맨틱 태그를 사용은 컨텐츠의 의미와 기능에 따라 각 부분에 적합한 요소들을 선택해서 적용해야합니다.
예를 들어, 로고나 제목 등이 포함된 페이지 상단에는 <header>를 사용하고, 저작권이나 연락처, 소셜 미디어 계정 링크가 포함된 하단에는 <footer> 태그를 사용해야 합니다.
또한, 요소가 명확한 계층 구조와 구조를 형성하도록 요소들을 올바르게 중첩해야합니다. <div>와 같은 의미 없는 요소나 속성을 사용하지 않아야 합니다.
| 태그 | 설명 | 사용 예시 |
| <article> | - 독립적인 글을 다루는데 사용 - 독립적으로 배포하거나 재사용할 수 있는 독립적인 컨텐츠 정의 |
블로그 게시물, 뉴스 기사, 제품 리뷰 등 |
| <aside> | - 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냄(전역 특성만 포함, 괄호에 묶인 텍스트라도 문서의 주요 플로우에 포함되어야 하므로 해당 요소를 통해 나타내면 안 됨) | 사이드 바, 콜아웃 박스 |
| <details> | - 사용자가 보이거나 숨길 수 있는 추가 세부 정보를 정의하는 태그. - 사용자와 상호작용이 가능하다는 점이 특징. - 사용자는 버튼을 통해 열고 닫을 수 있음 |
내용이 많은 글, 축약 가능한 글 |
| <figure> | 자체 포함된 컨텐츠 지정 | 일러스트레이션, 다이어그램, 사진, 코드 목록 등 |
| <figcaption> | <figure> 태그에 대한 간략한 설명 | |
| <footer> | 가장 가까운 구획 컨텐츠나 구획 루트를 페이지 하단에 나타냄 | 구획의 작성자, 저작권 정보, 관련 문서 등 |
| <form> | 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냄 | 로그인, 입력창 등 |
| <header> | 소개 및 탐색에 도움을 주는 컨텐츠를 나타냄 | 제목, 로고, 검색 폼, 작성자 이름 등 |
| <main> | - <body> 태그의 주요 컨텐츠를 나타냄 - 주요 컨텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 컨텐츠로 이루어짐 |
문서의 유일한 내용이므로 반복적인 내용은 제외 |
| <mark> | - 현재 맥락에 관련이 깊거나 중요해 표시한 부분을 나타냄 - <strong> 태그와 비교할 수 있는데, <mark>는 연관성을 가진 부분을, <strong>는 중요도를 가진 부분을 나타낼 때 사용 |
연관성을 띄는 글자 |
| <nav> | 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냄 | 메뉴, 목차, 색인 |
| <section> | - 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용 - 보통 제목을 포함(필수는 아님) |
스타일링이 목적이라면 <div> 태그 사용 |
| <summary> | <details> 태그의 요약, 제목 등을 나타내는 데 사용 | |
| <time> | - 시간의 특정 지점, 구간을 나타냄 - datetime 특성의 값을 지정해 보다 적절한 검색 결과나 알림 같은 특정 기능을 구현할 때 사용 |
참조
시맨틱 태그 (Semantic Tag)란? - 태그 요소의 종류와 이점
시맨틱 태그 (Semantic Tag)는 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그를 말합니다. 이번 글을 통해 시맨틱 태그 요소의 종류와 이점까지 확인해보세요.
seo.tbwakorea.com
HTML Semantic Elements
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
Semantics - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN
프로그래밍에서, 시맨틱은 코드 조각의 '의미'를 나타냅니다. 예를 들어, ("이게 어떻게 시각적으로 보여질까?" 보다는), 이 Javascript 라인을 실행하는 것은 어떤 효과가 있나요?", 혹은 "이 HTML 엘
developer.mozilla.org
'WEB > HTML' 카테고리의 다른 글
| HTML(3) - 속성(Attribute) (2) | 2023.03.19 |
|---|---|
| HTML(2) - 요소(Element) (0) | 2023.03.19 |
| HTML(1) - 기본 구조 (1) | 2023.03.19 |
| HTML이란?(개념 이해) (0) | 2023.03.19 |