HTML 기본은 알고가자 (마지막) : 의미있는 코딩(Semantic HTML / Semantic Web)

이제 HTML 관련 어느정도 기본은 이해가 되고 있다고 보면 됩니다. 이제 머리가 많이 굳어서 모든 프로그램 언어를 외우진 못해도 이런 개념이구나 정도 이해를 하면 나중에 많은 훌륭한 개발자들이 올려놓은 소스를 보고 이해도 하고 만들어 보기도 할 수 있을겁니다. 

 

그래서 오늘의 주된 주제는 최초 개발할 때도 그렇고 개발이 완료된 소스를 볼때도 필요한 체계적인 HTML 코딩에 대해 이야기를 하려합니다. 사실 기본 HTML 개념에 대한 마지막 시간이기도 하고요. 

 

우리가 웹페이지를 만들려고 할 때 한 페이지의 단락을 나누는 기본 태그는 <div>태그를 사용했습니다. 모든 페이지의 단락을 <div>태그로 사용한다면 프로그램 내용이 많을경우 나중에 검증과정이나 수정과정에서 어다애 어떤 프로그램 코딩을 했는지 알기 힘듭니다. 그래서 해당 홈페이지의 HTML 코드를 알기 쉽게 처음부터 만들어 주는게 중요합니다. 이러한 과정을 Semantic HTML방식이라고 부릅니다. 다음 그림에서 명확히 이해를 할 수 있을겁니다. 

 

Semantic HTML 개념 (출처: Codecademy)

 

오른쪽 그림을 보시면 제목을 나타내는 <header>태그, 본문을 설명하는 <artcile>태그, 꼬리말을 나타내는 <footer>태그 등으로 알기 쉽게 프레임이 짜여진 것을 볼 수 있습니다. 

 

그렇다면 이러한 Sematic HTML은 어떤 장점이 있을까요?

 

 

<Semantic HTML 방식의 장점>

 

▶ 용이한 접근 가능성 (Accessibility)

 

    브라우저나 화면을 읽는 기기가 더 잘 해석을 하게 해주어 모바일 기기 등에 더 잘 접근하게 해줍니다. 

 

▶ 검색엔진 최적화 (SEO)

 

    제 블로그 최초에 설명 드렸던 검색엔진이 웹사이트 콘텐츠를 잘 식별하고 중요도에 따라 가중을 둘 수 있습니다. 

 

▶ 쉬운 이해도 (Easy to Understand)

 

    다른 웹개발자들을 위해 웹사이트의 소스코드를 이해하기 쉽게 만들어 줍니다.  

 

 

---

그럼 주요 Semantic HTML 요소에 대해 알아보도록 하죠.

 

▒ Header와 Nav

 

1. <header> 태그 

 

<header>태그는 일반적으로 웹페이지를 안내하는 Navigation을 포함하거나 <h1>부터 <h6>의 헤드내용을 링크하거나 소개하는 콘텐츠로 이루어집니다. 

 

 

<div>태그안에 id를 header로 지정해서 나타낼 수도 있습니다. 

 

2. <nav>태그

 

<nav>태그는 Navigator를 나타내는 태그입니다. 아래 예제에서 Home이나 About 항목 <li>태그안에 링크를 걸면 해당 페이지로 이동하도록 Navigating을 합니다. 

<nav>태그는 <header>태그안에 사용할 수도 있지만 단독으로 사용도 가능합니다. 

 

※ Codecademy의 코딩과 브라우저상 표시를 보면 알 수 있습니다. 

 

---

 

▒ Main 과 Footer

 

1. <main> 태그 

 

<main> 태그요소는 웹페이지의 주요내용을 캡슐화하는데 사용합니다. 스크린리더 기기 또는 웹브라우저가 <main> 태그 내부에 있는 내용이 주된 내용이라는 것을 인식하게 만들어 주는 요소로 보면됩니다. 이에 따라 <nav>태그와 <footer>태그와는 구별됩니다. 

 

 

2. <footer> 태그

 

주요내용 맨 밑에 있는 바닥글을 나타낼 때 <footer> 태그를 사용합니다. 보통 바닥글에는 다음과 같은 정보가 있습니다. 연락처정보, 저작권정보, 이용약관, 사이트맵 등

 

---

 

▒ Section 과 Article

 

1. <section> 태그

 

<section> 태그 요소는 동일한 주제를 가진 문서요소를 정의할 때 사용하는데 제목, 문서의 장을 구분할 때 사용합니다. 예를 스포츠내용중 야구, 농구, 축구라는 주제가 있으면 3개의 Section으로 나뉘어 작성할 수 있습니다. 

 

2. <article> 태그

 

<article>태그 요소는 기사, 블로그, 댓글, 잡지의 콘텐츠 등 본문형태로 생각하시면 됩니다. 그렇다 보니 이미지나 동영상 오디오클립 등도 이곳에 배치합니다. 

 

 

---

 

▒ Figure와 Figcaption

 

첫 HTML시간에 이미지를 삽입할 때 <img src="파일위치/파일명">으로 표시한 것 기억하시죠? Semantic 웹페이지에서는 이미지나 사진, 다이어그램 등 미디어를 지정할 때 <figure> 태그와 <figcaption> 태그를 사용합니다. 

 

<figure>태그는 이미지 관련 파일 삽입시 사용하며 <figcaption>은 해당 이미지 설명이 필요할 대 사용합니다.

 

 

---

 

▒ Audio 와 Video 삽입

 

<audio>태그요소와 <video> 태그요소를 사용합니다. 과거에는 <embed> 태그요소를 사용했는데 오늘날 Audio는 <audio>태그 Video는 <video>태그를 사용하는게 일반적입니다. 

오디오 삽입 명령

 

비디오 삽입 명령

 

---

 

Semantic 웹페이지를 만드는 HTML 태그요소를 알아봤습니다. 다시 말해 의미없는 <div> 태그만으로 구성되어 있는 웹페이지에 이름을 붙혀 넣어주는 작업이라고 보면 되겠습니다. 

 

편의점에 들어가서 상품이 나열되어 있지 않은 Non-semantic <div>태그를 상품진열대에 구분해 놓은 것이 Semantic 태그들을 사용하여 구분을 해 놓는 개념으로 이해하면 될 듯 합니다.