구조적인 웹페이지를 위한 시맨틱 태그(Semantic Tag) 살펴보기

코딩 이야기/HTML & CSS

구조적인 웹페이지를 위한 시맨틱 태그(Semantic Tag) 살펴보기 – HTML5

아재코더 2021. 12. 14. 13:37

HTML4에는 없고 HTML5에는 있는 시맨틱 태그(semantic tag)에 대해 살펴봅니다. 시맨틱 태그는 태그 자체가 특별한 기능을 하는 것이 아닌 웹 페이지의 구조를 일목요연하게 파악할 수 있게끔 돕는 기능을 합니다. 시맨틱 태그를 적용하지 않고도 페이지를 작성할 수 있으나 시맨틱 태그를 적용한 페이지가 좀 더 구조적이라 할 수 있습니다.

태그만 보고도 어디가 제목이며 어디가 메뉴이고 어느 부분이 본문 내용인지 쉽게 파악할 수 있습니다. 이렇게 시맨틱 태그를 적용하게 되면 화면을 읽어주는 기능을 구현할 때 어느 부분이 제목이며 어느 부분이 본문인지를 쉽게 구분하며, 검색 사이트를 통해 해당 페이지의 본문을 검색할 때 <nav> 또는 <header>부터 검색하지 않고 <section> 또는 <article> 태그에서 바로 검색할 수 있게끔 합니다. 결론을 말씀드리자면 시맨틱 태그는 웹페이지에 기능을 더하기보다는 페이지 자체를 구조적으로 만들어 사용자 접근성을 높일 수 있도록 도와줍니다.

<header> 태그는 해당 웹 페이지에서 머리말을 나타냅니다. 헤더의 내용으로는 <form> 태그를 통해 입력창을 넣거나 <nav> 태그를 통해 메뉴를 넣습니다. 앞에서 살펴본 <head> 태그와는 전혀 다른 점을 유의합니다.

<header>

<h1>밥이좋아의 코딩 이야기</h1>

<h2>늦은 나이에 시작하는 파이썬 코딩</h2>

</header>

<nav> 태그는 해당 사이트 내에서 다른 페이지로 연결하거나 다른 사이트로 연결하는 링크 모음을 나타냅니다. 내비게이션 역할을 하는 <nav> 태그는 페이지 어디에서나 적용할 수 있습니다.

<nav class="crumbs">

<ol>

<li class="crumb"><a href="#">프로그래밍 언어</a></li>

<li class="crumb"><a href="#">인터프리터 언어</a></li>

<li class="crumb">파이썬</li>

</ol>

</nav>

(<nav > 클래스에 CSS를 일부 적용하였습니다.

<section> 태그는 주제별 콘텐츠를 나타냅니다. <article> 태그가 본문 내용을 다룬다면 <section>태그는 좀 더 상위 주제를 나타낼 때 사용합니다. <section>태그와 <article>태그를 혼용하는 경우가 많지만 통상 블로그 내용이 <article>태그가 되고 <article>을 모아 놓은 게 <section>이 됩니다. 그리고 <aside>태그는 주로 본문 이외의 내용을 표기할 때 사용합니다. (네이버 블로그를 기준으로 사이드바가 되겠네요!)

<iframe>태그는 외부 문서를 불러올 때 사용합니다.

<iframe src="main.html" width="500"></iframe>

<iframe> 태그의 속성에 대해 살펴봅니다.

속성	설명
width	인라인 프레임의 너비(픽셀 또는 백분율로 표기)
height	인라인 프레임의 높이(픽셀 또는 백분율로 표기)
name	인라인 프레임의 이름
src	프레임에 표시할 웹페이지 주소
seamless	프레임의 테두리를 없애 본문의 일부처럼 보이게 함

앞서 언급한 바와 같이 시맨틱 태그는 별도의 기능이 있는 게 아니라 태그를 사용함에 따라 HTML5 표준에 좀 더 가깝고 구조적인 웹페이지 만들 수 있게끔 합니다. 물론 <div> 태그처럼 HTML4에서 주로 사용되던 태그도 사용합니다만 좀 더 구조적인 웹 페이지를 위해 시맨틱 태그와 함께 사용하시길 권장합니다.