HTML 시맨틱 마크업이란

프리윌린 과제전형에서 탈락한 이유중에, HTML 시맨틱 마크업에 대한 이해 부족이라는 말을 들었다. 그것을 보완하기 위해 이렇게 자료를 찾아본다.

 

일단 w3schools.com 페이지에서 개요를 찾아본다.

https://www.w3schools.com/html/html5_semantic_elements.asp

HTML5 Semantic Elements

시멘틱은 언어에서 의미론을 말한다.

시멘틱 요소 = 의미를 가지고 있는 요소이다.

 

시멘틱 요소란 무엇인가?

시멘틱 요소는 브라우저와 개발자 모두에게 자신의 의미를 설명한다.

시멘틱이 아닌 요소 (div, span): 자신이 담고있는 컨텐츠에 대해 아무것도 말해주지 못한다.

시멘틱 요소 (form, table, article): 명백하게 자신의 컨텐츠에 대해 정의한다.

 

현대 브라우저는 모두 시멘틱 요소를 지원하고 있다.

 

HTML5에서 추가된 시멘틱 요소는 다음과 같다.

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

자주 쓰이는 시멘틱 요소 설명

<section> 요소

문서에서 section을 정의한다.

W3C's HTML5문서에 따르면, "section은 컨텐츠의 주제별 묶음으로, 보통 제목을 가지고 있다" 라고 되어있다.

 

<article> 요소

독립적이고 자기 자신의 컨텐츠를 명시한다.

자기 스스로 말이 되어야 하며, 다른 웹의 요소와 독립적으로 읽혀야 한다.

 

article 요소를 사용할 수 있는 것들은 다음과 같다.

• Forum post
• Blog post
• Newspaper article

<section> 안에 <article>을 넣거나 그 반대도 가능 할까?

 

그게 어디에 반드시 있어야 하는지 정의할 수 없다. 

다른 사이트들을 보면 여러가지 경우가 있다.

 

<header> 요소

문서나 section에서 헤더를 명시한다.

서두 컨테이너에서 사용되어야 한다.

하나의 문서에서 여러개의 header를 사용할 수 있다.

 

<footer> 요소

문서나 section에서 푸터를 명시한다.

담고있는 요소에 대한 정보를 포함해야 한다.

예를 들어, 문서 작성자, 저작권 정보, 사용권 동의 문서 링크, 연락처 등등이다.

하나의 문서에 여러개의 footer를 사용할 수 있다.

 

<nav> 요소

네비게이션 링크에 대한 모음이다.

단, 모든 링크가 nav 요소에 포함될 필요는 없다.

nav 요소는 네비게이션 링크의 모음으로 만들어졌다.

 

<aside> 요소

한 쪽에 위치해 있는 컨텐츠를 정의한다.

반드시 주위 컨텐츠와 관련되어야 한다.

 

<figure>와 <figcaption> 요소

figure caption의 목적은 사진에 시각적인 설명을 더하는 것이다.

HTML5에서는 img 요소와 figcaption 요소는 figure 요소로 그룹화 될 수 있다.

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

 

왜 시멘틱 요소를 사용해야 하는가?

HTML5 이전에는 header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav 등을 구분하기 위해 개발자들이 그들만의 id나 class로 구분하였다.

이것은 검색 엔진이 웹 사이트를 정확히 판별하지 못하도록 하였다.

HTML5에서 새로 생긴 시멘틱 요소들은 이것들을 좀 더 쉽게 만들어 주었다.

 

추가적인 시멘틱 요소들

<article>	독립된 컨텐츠영역을 지정합니다.
<aside>	페이지의 왼쪽 혹은 오른쪽에 위치한 컨텐츠영역을 지정합니다.
<bdi>	텍스트의 방향이 반대일 경우 사용합니다.
<details>	추가정보를 기술하는 영역을 지정합니다.
<dialog>	대화상자나 창을 지정하며 open속성을 사용하여 숨기거나 보이도록 할 수 있습니다.
<figcaption>	<figure> 요소의 제목을 지정합니다.
<figure>	문서흐름상 이해를 위해 필요한 그림,동영상등을 포함할때 사용합니다.
<footer>	문서나 Section의 하단 정보 영역을 지정합니다.
<header>	문서나 Section의 상단 정보 영역을 지정합니다.
<main>	문서의 주 컨텐츠영역을 지정합니다.
<mark>	마크되거나 하이라이트된 텍스트.
<menuitem>	팝업메뉴의 아이템을 지정합니다.
<meter>	설정된 범위안에 특정값을 막대그래프식으로 표현합니다.
<nav>	문서의 네비게이션을 지정합니다.
<progress>	<meter>태그와 비슷하게 동작하며 현재 진행되고 있는 수치를 보여줍니다.
<rp>	<rt>태그가 지원되지않는 브라우저를 위해 사용합니다.
<rt>	<ruby>태그와 같이 사용합니다.
<ruby>	일본어나 중국어에서 글자위에 글자를 쓸때 사용합니다.
<section>	문단구분을 지정합니다.
<summary>	<details> 요소안에서 제목이나 요약등의 내용을 포함합니다.
<time>	날짜/시간 표현
<wbr>	줄바꿈위치를 지정합니다.

 

그럼 div는 어떨때 사용해야 할까?

mozila에 따르면 (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div), Usage Notes에 이렇게 적혀있다.

"div 요소는 오직 적절한 시멘틱 요소가 없을때만 사용되야 한다"

 

추가 궁금증

HTML outline을 위해서는 Heading이 필수적이라고 하는데 Heading이 필요 없는 곳에도 반드시 넣어야 할까?

 

글을 마치며

네이버로 시멘틱 마크업좀 참고해보려고 했더니 다 div로 되어있다. 내가 이래서 프리윌린 떨어졌구나.

디자인적으로 웹을 짜는 것도 중요하지만 구조적인 부분에서 웹을 구성하는 것도 중요하다. 웹은 시각적인 표현 그 이상이다.

 

HTML 사양 설명서: https://www.w3.org/TR/html51/

Heading에 대하여: https://ideveloper2.tistory.com/161

HTML5 outliner: https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=ko

normalize.css: https://necolas.github.io/normalize.css/