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
|
프레임의 테두리를 없애 본문의 일부처럼 보이게 함
|
<footer> 태그는 통상 웹 페이지 제일 하단에 표시하며 페이지 제작자 또는 소유주, 저작권 정보 등을 표시합니다. <footer> 태그 안에도 <header>, <section>, <article> 태그 등을 포함할 수 있습니다.
앞서 언급한 바와 같이 시맨틱 태그는 별도의 기능이 있는 게 아니라 태그를 사용함에 따라 HTML5 표준에 좀 더 가깝고 구조적인 웹페이지 만들 수 있게끔 합니다. 물론 <div> 태그처럼 HTML4에서 주로 사용되던 태그도 사용합니다만 좀 더 구조적인 웹 페이지를 위해 시맨틱 태그와 함께 사용하시길 권장합니다.
'코딩 이야기 > HTML & CSS' 카테고리의 다른 글
| 웹 페이지 만들고 배포하기 - HTML5 (0) | 2021.12.14 |
|---|---|
| 웹 페이지에 동영상/오디오 파일 재생하기 - HTML5 (0) | 2021.12.14 |
| input 태그 속성에 대해 자세히 살펴보기 – HTML5 (0) | 2021.12.14 |
| 폼(form)과 input 태그 살펴보기 – HTML5 (0) | 2021.12.14 |
| 웹 페이지에 하이퍼링크와 이미지 표시하기 – HTML5 (0) | 2021.12.14 |
댓글