출처
https://developer.mozilla.org/en-US/docs/Glossary/Semantics
왜 궁금했을까
이따금 혼자 개발자 도구를 열고 이것저거 만져보는 시간을 가지곤 한다. 어느 날, HTML tag 마다 user agent stylesheet에서 디폴트로 정의하는 스타일링으로는 무엇이 있을까 읽어보고 있었다.
디브는 기본적으로 이런 스타일링을 가지고 있고,,,
h1은 기본적으로 주어지는 스타일링이 많구나... 이 친구는 용도에 맞게 잘 써야겠네
그리고 섹션은 디브랑 스타일링이 다른게 없네..??
div 태그와 header footer section 등, semantic tag 로 알려진 몇 태그 사이에 스타일링 측면에서 차이점이 없다는 것을 발견했다!
그렇다면, 그냥 div로만 모든 페이지를 채워도 상관 없는게 아닐까?
굳이 다른 태그로 구분하는데에 생기는 이점은 뭘까?
궁금해져서 공부해봤다...!
Semantic tag
semantic tag는 표현을 넘어 의미를 전달하는 HTML 요소이다. <div>나 <span>과 같은 일반적이거나 비의미론적 요소와 달리 시맨틱 태그는 감싸고 있는 내용에 대한 컨텍스트를 제공한다.
시맨틱 태그의 일반적인 예로는 <header>, <footer>, <article>, <nav>, <section>, <aside> 등이 있다.
각 시맨틱 태그마다, 권장되는 사용법이 있다.
다음은 시맨틱 태그의 종류와 그들의 속성에 대해 소개하는 표이다.
| 태그 | 설명 | 특별 기능 |
|---|---|---|
<article> | 페이지 내용과 독립적으로 재사용 및 분배될 수 있는 독립적인 콘텐츠를 나타냅니다. | 블로그 게시물, 뉴스 기사, 포럼 게시물 등에 주로 사용됩니다. |
<aside> | 주변 콘텐츠와 관련이 있는 콘텐츠를 나타냅니다. 사이드바나 인용구와 같은 내용이 포함됩니다. | 주로 부차적인 콘텐츠나 네비게이션 링크에 사용됩니다. |
<details> | 사용자가 추가 정보나 컨트롤을 얻을 수 있는 폭로 위젯을 나타냅니다. | 첫 번째 자식 요소로 <summary>를 사용해야 합니다. |
<figcaption> | <figure> 요소의 콘텐츠에 대한 캡션이나 설명을 나타냅니다. | <figure> 콘텐츠에 대한 설명을 제공합니다. |
<figure> | 이미지, 다이어그램, 일러스트레이션, 코드 스니펫 등과 같이 자체 포함된 콘텐츠를 나타냅니다. | 관련 콘텐츠를 그룹화하는 방법을 제공합니다. |
<footer> | 가장 가까운 부모 섹션 콘텐츠나 루트 요소에 대한 바닥글을 나타냅니다. | 일반적으로 포함 요소에 대한 정보를 포함합니다. |
<form> | 서버로 정보를 제출하기 위한 대화형 컨트롤의 섹션을 나타냅니다. | 사용자 입력을 위한 대화형 양식을 생성하는 데 사용됩니다. |
<header> | 소개 콘텐츠를 나타냅니다. 일반적으로 소개 또는 탐색 도구의 그룹입니다. | 제목, 로고, 네비게이션 메뉴 등을 포함하는 경우가 많습니다. |
<main> | 문서의 <body>의 주요 콘텐츠를 나타냅니다. | 페이지 간에 반복되는 콘텐츠를 포함해서는 안 됩니다. |
<mark> | 참조나 강조를 위해 강조된 또는 표시된 텍스트를 나타냅니다. | 주로 검색 용어나 핵심 구문을 강조하는 데 사용됩니다. |
<nav> | 탐색 링크의 섹션을 나타냅니다. | 네비게이션 메뉴나 다른 페이지로의 링크를 정의하는 데 사용됩니다. |
<section> | 주제에 따른 콘텐츠의 그룹을 나타냅니다. | 조직적 목적을 위해 관련 콘텐츠를 그룹화하는 데 사용됩니다. |
<summary> | <details> 요소의 콘텐츠에 대한 요약, 캡션 또는 설명을 나타냅니다. | 세부 정보 콘텐츠의 간략한 개요 또는 설명을 제공합니다. |
<time> | 특정 시간 또는 시간 범위를 나타냅니다. | 날짜, 시간, 기간 또는 기타 시간 관련 정보를 표시하는 데 사용됩니다. |
시맨틱 태그 사용의 이점
개선된 접근성: 시맨틱 태그는 스크린 리더와 같은 보조 기술이 콘텐츠를 이해하고 탐색할 수 있도록 명확한 구조적 의미를 제공하여 접근성을 향상시킨다. 이를 통해 장애를 가진 사용자도 콘텐츠를 쉽게 이해하고 탐색할 수 있다.향상된 SEO: 검색 엔진은 잘 구조화되고 의미론적인 콘텐츠를 우선적으로 처리한다. 의미론적 태그를 적절하게 사용하여 웹 사이트의 검색 엔진 순위와 가시성을 향상시킬 수 있다.코드 가독성과 유지 관리성: 시맨틱 태그는 HTML 코드를 더 읽기 쉽고 이해하기 쉽게 만든다. 의미있는 코드 블록을 찾는 것이 수많은 클래스로 지정된div들을 검색하는 것보다 훨씬 쉽기 때문이다.
이를 통해 현재 개발 중인 프로젝트 뿐만 아니라 향후 작업할 수 있는 다른 개발자들에게도 코드의 목적을 전달할 수 있다. 추가적인 주석이나 문서화 없이도 웹 사이트의 다양한 섹션의 목적을 전달할 수 있다.미래 지향성: 의미론적 HTML은 웹 표준이 발전하고 새로운 기술이 등장하는 경우에도 웹 사이트의 내용이 호환되고 적응 가능하도록 견고한 기반이 된다.- 개발자에게 채워야 할 데이터의 유형을 제안하기도 한다.
- 의미론적 명명은 올바른 사용자 지정 요소/구성 요소 명명을 반영한다.
시맨틱 태그의 사용 예시
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h2>Blog Post Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
</article>
</section>
<aside>
<h3>Recent Posts</h3>
<ul>
<li><a href="#">Post 1</a></li>
<li><a href="#">Post 2</a></li>
<li><a href="#">Post 3</a></li>
</ul>
</aside>
<footer>
<p>© 2024 Your Website. All rights reserved.</p>
</footer>
결론
의미론적 태그를 HTML 코드에 통합하는 것은 웹 개발 프로젝트에 다양한 이점을 제공하는 기본적인 실천 방법이다. 접근성과 SEO를 개선하고 코드의 가독성을 높이며 웹 사이트의 미래 지향성을 확보하기 위해 의미론적 요소의 사용은 필수적이다. 의미론적 HTML을 통해 보다 구조화되고 유지 관리 가능하며 접근성이 뛰어난 웹 콘텐츠를 구축함으로써 포괄적이고 사용자 친화적인 웹 경험을 제공할 수 있다..!
따라서, 나도 웹 페이지의 구조를 짤 때, div로 떡칠하기 보다는, 용도에 맞는 태그에 대해 한번이라도 더 고민해야겠다고 결심한다...!
화이팅! 시맨틱 태그도 알게 된, 나 자신!
잠깐, 그래서 SEO가 뭔데?
이 대답에 자신 있게 답할 수 없는 나 자신...
다시 공부해보겠다. 공부는 끝이 없는 과정이랄까...
SEO
SEO(Search Engine Optimization)는 웹 사이트를 검색 결과에서 보다 더 눈에 띄도록 만드는 과정이며, 이는 검색 순위를 개선하는 것으로도 표현된다.
검색 엔진은 웹을 크롤링(크롤링에 대한 추가 정보)하여 페이지에서 페이지로 링크를 따라가고 발견한 콘텐츠를 색인화한다. 검색 시, 검색 엔진은 색인화된 콘텐츠를 표시합니다.
크롤러는 특정 규칙을 따르는데, 웹 사이트의 SEO를 할 때 이러한 규칙을 엄격히 준수하면 웹 사이트가 최상의 결과 중 하나로 표시되는 가능성이 높아지며, 트래픽과 수익(전자 상거래 및 광고)을 증가시킬 수 있다.
검색 엔진은 SEO에 대한 일부 지침을 제공하지만, 대형 검색 엔진은 결과 순위를 비밀로 유지한다 영업비밀. SEO는 공식 검색 엔진 지침, 경험적 지식 및 과학 논문 또는 특허에서 얻은 이론적 지식을 결합한다.
SEO 방법은 세 가지 큰 항목으로 나뉜다:
-
Technical class
의미론적 HTML을 사용하여 콘텐츠를 태그한다. 웹 사이트를 탐색하는 동안 크롤러가 색인화하길 원하는 콘텐츠만 찾아야 한다. -
Copywriting class
방문자의 어휘를 사용하여 콘텐츠를 작성한다. 텍스트뿐만 아니라 이미지도 사용하여 크롤러가 주제를 이해할 수 있게 한다. -
Popularity class
타 사이트에서 링크를 받을수록 트래픽이 가장 많이 발생한다.
