HTML은 기본적으로 정보를 구조화하고 표현하는 언어이다. 따라서, 정보를 빠르게 전달할 수 있도록 코드를 작성하는 것과 SEO(검색최적화)를 해내는 것은 중요한 일이다. 이를 위해서 Semantic HTML element에 대해서 알아보자.
SEO(Search Engine Optimiztion)
SEO(검색최적화)는 검색결과에 웹사이트가 더 잘 보이도록 만드는 것을 말한다. 검색 엔진이 페이지를 검색해가는 규칙에 맞게 웹페이지를 만들어 검색결과의 상단에 자주 노출될 수 있도록 하는 것이다.
Semantic HTML
처음 <div> element를 사용하게 된다면 만능처럼 느껴질 수도 있다. 언제든지 편의를 위해서 <div> element를 사용하여 content나 다른 element들을 묶고 class나 id를 부여하여 구조화 및 스타일을 적용할 수도 있기 때문이다. 하지만 HTML5에서 더욱 다양한 semantic element들을 제공하게 되면서 Semantic하게 HTML을 작성하는 것이 매우 중요해졌다. semantic하게 HTML을 작성했을 때 얻는 큰 이유는 다음과 같다.
- screen reader 등을 사용하는 유저의 가독성을 늘려주고 조금 더 쉽게 접근할 수 있도록 해준다.
- SEO(Search Engine Optimization), 검색최적화를 향상시켜준다.
그림 출처 : codecademy - Learn HTML
👍 왼쪽은 non-semantic 하게 작성된 HTML이고 오른쪽은 semantic 하게 작성된 HTML이다. 한 눈에 봐도 오른쪽의 구조가 이해하기 쉽다.
sectioning elements
HTML5가 도입되면서 다음과 같은 몇 개의 sectioning elements가 추가되었다.
<nav><section><article><aside>
sectioning elements 은 각각의 의미적 용도에 맞게 잘 사용하면 되지만 공통적으로 heading tag를 포함해서 작성해야 한다.
1. <nav>
페이지에서 링크와 관련된 요소들을 묶어주는 element이다. 로그인, 홈 등의 링크들을 묶거나 여러가지 contents가 포함 된 페이지로 이동하는 링크들을 묶는데 사용할 수 있다. heading tag의 경우에는 묶어진 링크들의 제목을 작성해주므로서 어떤 용도의 링크들인지 쉽게 알아볼 수 있도록 한다.
2. <section>
제목과 내용으로 이루어진 독립적인 구획을 나누는 용도로 주로 사용한다. 예를 들어 제품을 판매하는 페이지의 경우에 제품에 대한 설명 영역, 제품에 대한 리뷰 영역 등으로 나눠질 수 있는데 각 영역을 <section> element를 통해 묶을 수 있다. heading tag의 경우 각 영역의 제목을 작성해주면 된다.
3. <article>
<section> 과 유사하게 제목과 내용으로 이루어진 독립적인 구획을 나누는데 사용하지만 의미적으로 기사나 블로그 포스트, 매거진 등에 대한 내용을 묶을 때 사용한다. 다른 sectioning element와 마찬가지로 heading tag를 사용하여 제목을 작성하여 준다.
4. <aside>
페이지의 메인 내용을 이해하는데 필수적이지 않은 요소들을 묶을 때 사용한다. 부가적으로 작성하는 element이기 때문에 중요한 내용을 포함하지 않아야 한다. 예를 들어 사이드 바 등에 <aside> element를 사용할 수있다. heading tag를 사용하여 어떤 부가적 요소를 나타내는지 작성하여 준다.
structural elements
위의 sectioning element는 아니지만 구조화를 돕는 3개의 elements도 있다.
1. <header>
<header> element는 주로 페이지의 상단에 위치하는 요소들을 묶을 때 사용한다. <h1> ~ <h6> 의 heading tag들을 묶거나 상단 메뉴들에 사용할 수 있다. 또한, 다른 sectioning elements에 포함되어 머리말의 역할을 할 수 있다.
2. <main>
<main> element는 페이지의 핵심적인 내용을 묶는데 사용한다. <main> element를 사용할 때 주의할 점은 <header> & <footer> element 와는 다르게 한 번만 사용해야 한다는 것이다.
3. <footer>
<footer> element는 주로 페이지의 하단에 위치하는 요소들을 묶을 때 사용한다. 연락처나 저작권, 사용 조건, 관련 된 사이트맵 등의 정보들이 주를 이룬다. <header> element와 마찬가지로 다른 sectioning elements에 포함시켜 사용할 수 있다.
