[사용자 친화 웹] Semantic HTML

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다

 

Semantic HTML

웹 표준에서는 html을 시맨틱하게 작성하는 것을 강조한다.

시맨틱한 Html이 무엇인지 알아보려 한다.

 

1. div와 span으로 화면 구성하기

 

Div와 sapn으로 작성한 html은 각각의 역할을 확실히 알아내기 어렵습니다.

 

2. 시맨틱 요소로 화면 구성하기

같은 화면의 구조를 갖지만 다른 종류의 요소를 사용한 예시를 보여드리겠습니다.

Div와 span만 사용했을 때와 비교를 해보겠습니다.

각 요소의 이름만 보고도 화면에서 어떤역할을 할지 쉽게 추측할 수 있습니다.

 

이처럼 요소가 어떤 내용을 담게 될지, 어떤 기능을 하게 될지 확실하게 의미를 가지고 있는 요소를 시맨틱 요소라고 합니다.

그리고 시맨틱 요소를 적절하게 사용하여 구성한 html을 시맨틱html이라고 합니다.

 

시맨틱 HTML의 필요성

1. 개발자간 소통
   • Div와 span만 이용해서 만들었던 예시와 시맨틱요소를 사용해서 만들었던 에시를 비교해보겠습니다.
     첫 예시는 각각의 요소가 무슨역할을 하는 지 한번에 알기 어렵기 때문에 각각 주석을 넣어 설명을 하는 등의 노력이 필요하지만 두번째 예시는 그럴 가능성을 확 줄여줍니다.
2. 검색효율성
   • 시맨틱 요소를 사용하면, 어떤 요소에 더 중요한 내용이 들어있을지 우선 순위를 정할 수 있고, 우선 순위가 높다고 파악된 페이지를 검색 결과 상단에 표시하게 됩니다.
3. 웹 접근성
   • 웹 접근성은 나이, 성별, 장애 여부, 사용 환경을 떠나서 항상 동일한 수준의 정보를 제공할 수 있어야 함을 뜻합니다. 한 가지 예시를 들면, 시각 장애인의 경우 웹 페이지에 접근할 때 음성으로 화면을 스크린리더를 이용하게 되는데요. 이 때, HTML이 시맨틱 요소로 구성되어 있다면 화면의 구조에 대한 정보까지 추가로 전달해줄 수 있어 콘텐츠를 좀 더 정확하게 전달할 수 있게 됩니다. 시맨틱 요소만 잘 사용해도 웹 접근성을 향상시킬 수 있다는 의미입니다.

 

시맨틱 요소의 종류

자주 사용되는 시맨틱 요소들은 다음과 같습니다.

요소 종류	설명
<header>	페이지나 요소의 최상단에 위치하는 머릿말 역할의 요소입니다.
<nav>	메뉴, 목차 등에 사용되는 요소입니다.
<aside>	문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소입니다.
<main>	이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소입니다.
<article>	게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소입니다. 각각의 <article>을 구분하기 위한 수단이 필요하며, 보통 제목(<hgroup>)을 포함하는 방법을 사용합니다.
<section>	문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용합니다. 제목(<hgroup>)을 포함하는 경우가 많습니다.
<hgroup>	제목을 표시할 때 사용하는 요소로, <h1> ~ <h6> 요소가 <hgroup>입니다.
<footer>	페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소입니다.

 

시맨틱 HTML 예시 (MDN)

 

<header>

• 현재는 페이지 최상단에 위치
• 페이지 최상단에 위치하는 경우 사이트 전체에서 사용할 수 있는 내용을 담습니다
• 지금은 로고, 사이트,다크모드 등이 있습니다.
  • 최상단 뿐만 아니라<acticle>,<main>등 다른 요소의 머리말 역할로도 할 수 있습니다.

 

<nav>

• 네비게이션 바의 역할로 링크들을 담고 있습니다.

 

<aside>

• 메인 콘텐츠와 관련이 있지만 직접적인 연관은 없는 내용이 들어가는 요소입니다.
• 우측에 있는 제목별 북마크, 페이지 하단에 있는 콘텐츠 오류 제보 등의 내용이 aside요소안에 들어가 있습니다.

 

<main>

• 페이지의 메인 콘텐츠가 들어가는 요소입니다.

 

<article>

• 게시글, 뉴스 기사처럼 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소입니다.
• 재사용하는 부분인 만큼, 각각의 <article> 을 식별할 수 있는 요소가 필요합니다.
  • <hgroup> 요소를 사용하여 식별하는 경우가 많습니다.

 

<section>

• 문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용합니다.
• 적합한 의미의 요소가 없을 때 사용하기 때문에, 의미를 부여하기 위한 요소를 포함시키는 것이 좋습니다.
  • <hgroup> 을 포함하는 경우가 많습니다.

 

<hgroup>

• 제목을 표시하기 위해서 사용하는 요소입니다.
• <h1> 부터 <h6> 까지 있으며, 숫자가 클 수록 글자의 크기는 작아집니다.
  • 숫자가 작은 제목이 숫자가 큰 제목을 포함하는 방식으로 사용합니다.
• 해당 페이지에서는 <article> 요소의 제목으로는 <h1>, <section> 요소의 제목으로는 <h2> 를 사용하고 있습니다.
  • <hgroup> 요소의 숫자만 봐도 <article> 요소가 <section> 요소를 포함하는 관계임을 파악할 수 있습니다.

 

<footer>

• 페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소입니다.
• 사이트 제공자, 저작권, 정책, 사이트맵 등의 내용을 포함하고 있습니다.