HTML의 구조와 Semantic HTML

Front-end/HTML
2022. 7. 7. 07:00

HTML은 HeyperText Markup Language로 Web page의 골격 역할을 합니다. 오늘 공부해볼 내용은 HTML의 구조는 어떻게 설정되며 이 구조 사이에서도 의미를 가지고 있는 Tag를 알아보고자 합니다.

Semantic Tag(의미있는)를 사용하는 이유는 검색엔진에 최적화하기 위해서이기도 하고 개발자 간 확인이 쉽게 하기 위하여 사용하는 Tag를 말합니다.

HTML 구조

HTML은 아래와 같은 구조로 만들어져 있습니다.

See the Pen HTML구조 by Why Price (@why-price) on CodePen.

1. 선언문

선언문은 HTML 페이지의 첫번째 줄에 표시되어야 하며 문서에 사용되는 HTML의 버전과 예상되는 문서를 브라우저에 알려주는 역할을 합니다. 또한 호환성을 높이기 위해 사용되기도 합니다.

위의 예시를 보면 <!DOCTYPE html>이라는 태그를 확인할 수 있습니다. 현재 사용되는 HTML5에 해당되는 선언문입니다.

구버전의 선언문은 W3C Schools에서 확인할 수 있습니다.

// HTML5
<!DOCTYPE html>
// HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
//HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
//HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/Frameset.dtd">
//XTHML 1.0 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1.0 Strict//EN""http://www.w3.org/TR/html4/xhtml1-strict.dtd">
//XTHML 1.0 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN""http://www.w3.org/TR/html4/xhtml1-Transitional.dtd">
//XTHML 1.0 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1.0 Frameset//EN""http://www.w3.org/TR/html4/xhtml1-Frameset.dtd">
//XTHML 1.1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1.1 Frameset//EN""http://www.w3.org/TR/html4/xhtml11.dtd">

2. html lang

HTML 문서에 콘텐츠를 추가하기 위해서는<html>태그가 필요합니다. <html>과 </html>사이에 <head>와 <body>태그를 추가합니다.

위에 표기된 lang은 문서의 언어를 표기합니다. 한국어로 작성된 문서는 "ko"를 작성합니다. 만약 "en"으로 표기하였을 경우 웹사이트에 접속하였을 때 웹 상단에 영어/한국어 탭이 표기되는 것을 확인할 수 있습니다.

3. head

<head>는 문서의 메타 데이터를 표시하기 위해서 필요한 Tag입니다.<head> 에 작성된 내용은 우리가 보이는 화면에 표시되지 않으며 웹에 대한 정보와 웹 페이지를 표시하기 위한 JavaScript, CSS, Meta 등의 정보를 표시합니다. <head> 또한 여는 Tag 와 닫는 태그가 존재하며 작성 순번은 <body>Tag 위에 작성합니다.

4. body

웹 페이지에 보이는 영역을 작성합니다. 현재 페이지에 보이는 부분은 <body>태그 안에 작성됩니다. <body>태그 안에는 무수히 많은 태그가 존재하며 웹페이지의 구조를 만드는 역할을 합니다.

지금까지 기본적인 html의 구조를 알아보았습니다. 깊은 공부가 필요하신 분은 구글과 MDN사이트를 통하여 공부하여 주시기 바랍니다.

html 문서 작성 시 선언문을 작성한다.
head 태그 안에 메타 정보 등의 정보를 작성한다.(웹 사이트에 표기되지 않음)
body 태그는 웹사이트의 보이는 부분을 작성한다.

대부분의 에디터는 emmet를 통해 자동완성이 가능합니다. !와 <tab> 키를 사용하여 html 기본구조를 쉽게 잡을 수 있습니다.

!를 작성한 뒤 <tab>키를 누르면 자동으로 위의 내용이 완성된다.

Semantic HTML

Semantic Tag는 접근성, SEO에 도움이 되며 개발자 간 소스코드를 더 쉽게 읽기 위해 사용됩니다.

사진의 맨위 상단에 <header>와 <nav>가 되어있고 main 컨테이너 안에는 <article> 과 <section> Tag가 포함되어 있습니다. 우측으로는 <aside>와 하단에는 <footer>로 구성됩니다.

어려우신가요? 꼭 사진과 같은 레이아웃을 가지고 있을 필요는 없습니다. 각 Semantic Tag의 특성을 알아보고 특성에 맞게 구성해주시면 됩니다.

<header> : 일반적으로 제목과 탐색 링크 또는 소개 콘텐츠에 대한 컨테이너
<nav> : 탐색링크(메뉴,목차)
<main> : 주요 콘텐츠를 나타내며 hidden 속성 없이 body내에 유일해야 한다.(하나 이상 사용금지), 또한 로고, 사이드바, 탐색 링크 등 여러 문서에 걸쳐 반복되는 콘텐츠를 포함해서는 안된다.
<aritcle> : 독립적으로 구분해 콘텐츠를 배포하거나 재사용할 수 있는 구역을 나타낼 때 사용된다.(블로그, 댓글 등)
<section> : 문서의 독립적인 구역을 설정할 때 사용된다. 컨테이너를 나누는 데 사용하면 안 된다.(컨테이너를 나눌 경우 div를 쓰는 것이 적합하다.), 연관된 내용을 하나로 묶어 줄 때 사용된다.

위의 사진을 보시면 <artcle> 안에 <section> 태그가 포함된 것을 확인할 수 있습니다. 이처럼 연관된 내용을 묶어 줄 때 사용됩니다.

<figure>,<figcaption> : 이미지를 콘텐츠화하고 figcaption 은 이미지를 설명할 때 사용된다.
<aside> : 문서의 주요 내용과 간접적으로만 연관된 부분을 나타낸다. 주로 사이드바로 표현한다.

위 사진에는 <figure>,<figcaption>가 빠져있지만 참고하시면 좋을 것 같아 내용에 추가하였습니다.

지금까지 html의 구조와 Semantic Tag에 대해 알아보았는데요. 아래 코드는 제가 작성한 코드입니다. CSS는 복사하여 사용하시고 codepen 또는 에디터를 사용해서 위 사진과 같은 모습의 html 코드를 작성 연습을 해보시는 것을 추천드립니다.

See the Pen Semantic by Why Price (@why-price) on CodePen.

저작자표시

'Front-end > HTML' 카테고리의 다른 글

body에 글 작성하기 heading h1~h6, p, em, strong (1)	2022.07.09

Mom's Beauty Routine