HTML5 기본 태그 알아보기

박영광·2024년 5월 30일

HTML/CSS/JS/SASS

목록 보기
4/10

HTML5는 웹 문서를 구조화하고 표현하기 위한 마크업 언어입니다. 이 글에서는 웹 페이지를 구성하는 데 필수적인 기본 HTML5 태그들을 소개하고자 합니다.

1. 문서 타입 정의 태그 (Document Type Definition)

<!DOCTYPE> 태그는 웹 페이지의 HTML 버전과 타입을 브라우저에게 알려주는 역할을 합니다. 반드시 HTML 문서의 최상단에 위치해야 하며 대소문자를 구분하지 않습니다.

HTML5 에서는 아래와 같이 간단히 선언할 수 있습니다.

<!DOCTYPE html>

이전 버전인 HTML 4.01, XHTML 1.0 에서는 조금 더 복잡한 방식으로 선언했었습니다.

<!-- HTML 4.01 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!-- XHTML 1.0 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. html 태그

<html> 태그는 HTML 페이지의 루트(root) 요소이며, 모든 다른 요소들은 이 태그 내부에 위치하게 됩니다. 단 <!DOCTYPE> 선언문은 예외적으로 <html> 태그 바깥에 위치합니다.

<!DOCTYPE html>
<html>
  <!-- 다른 모든 요소들은 여기에 위치합니다. -->
</html>

<html> 태그에는 lang 속성을 사용하여 문서의 언어를 지정할 수 있습니다. 이는 검색 엔진이나 번역기와 같은 프로그램들에게 유용한 정보를 제공합니다.

<html lang="ko">
  ...
</html>

html 태그 속성

  • lang: 문서의 언어를 지정합니다. (예: <html lang="ko">)
  • manifest: 웹 앱의 캐시 매니페스트 파일의 위치를 지정합니다.
  • xmlns: XML 네임스페이스를 지정합니다.

3. head 태그

<head> 태그는 HTML 문서의 메타데이터(metadata)를 포함하는 컨테이너입니다. 메타데이터에는 제목(title), 스타일(style), 외부 파일 연결(link) 등의 정보가 포함되며, 이들은 웹 페이지에 직접적으로 보이지는 않지만 브라우저와 검색 엔진에 중요한 정보를 제공합니다.

<head> 태그 내부에는 다음과 같은 태그들이 올 수 있습니다:

  • <title>: 문서의 제목을 정의합니다.

  • <style>: HTML 페이지에 대한 스타일(CSS) 정보를 정의합니다.

  • <base>: 페이지 내의 모든 상대 URL에 대한 기본 URL과 타겟을 지정합니다.

  • <link>: 외부 리소스와의 연계 정보를 정의합니다. 주로 CSS 파일을 연결할 때 사용합니다.

  • <meta>: 문자셋, 키워드, 설명, 저자 등의 메타데이터를 정의합니다.

- charset: 문서의 문자 인코딩을 지정합니다. (예: <**meta charset="UTF-8"**>)
- name, content: 메타데이터의 이름과 값을 지정합니다. (예: <**meta name="keywords" content="HTML, CSS, JavaScript"**>)
  • <script>: JavaScript 코드를 포함하거나 외부 JavaScript 파일을 참조할 때 사용합니다.
  • <noscript>: 브라우저가 스크립트를 지원하지 않을 때 보여줄 내용을 정의합니다.

각 태그에 대한 예시를 알아보겠습니다.

3.1 title 태그

<title> 태그는 문서의 제목을 정의하며, 브라우저의 타이틀 바나 페이지 탭에 표시됩니다.

<title>My Page Title</title>

3.2 style 태그

<style> 태그는 HTML 페이지에 대한 스타일(CSS) 정보를 정의합니다.

<style>
  body {
    background-color: gray;
    color: white;
  }
</style>

<link> 태그는 외부 리소스와의 연계 정보를 정의합니다. 주로 외부 스타일시트(CSS) 파일을 연결하는데 사용됩니다.

<link rel="stylesheet" href="style.css">

3.4 script 태그

<script> 태그는 JavaScript 코드를 HTML 문서 안에 포함하거나, 외부 JavaScript 파일을 참조할 때 사용합니다.

<script>
  console.log("Hello World!");
</script>

<script src="script.js"></script>

3.5 meta 태그

<meta> 태그는 문자셋(charset) 정의, 키워드(keyword), 설명(description), 저자(author) 등의 메타데이터 정의에 사용됩니다. 이 정보들은 브라우저, 검색엔진, 기타 웹 서비스에 활용됩니다.

<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="Free Web tutorials">
<meta name="author" content="Glory Park">

4. body 태그

<body> 태그는 HTML 문서의 실제 내용(content)을 나타냅니다. 웹 페이지에 보여지는 텍스트, 이미지, 영상, 테이블, 리스트 등 대부분의 요소가 <body> 내부에 위치합니다.

즉, <body> 내부에는 텍스트, 이미지, 비디오, 테이블, 리스트 등 다양한 요소들이 포함될 수 있습니다.

HTML5에서는 문서의 구조를 나타내기 위해 다음과 같은 시맨틱 태그들을 도입했습니다:

  • <header>: 페이지나 섹션의 머리말을 나타냅니다.
  • <nav>: 네비게이션 링크의 집합을 나타냅니다.
  • <main>: 문서의 주요 콘텐츠를 나타냅니다.
  • <section>: 문서의 독립적인 섹션을 나타냅니다.
  • <article>: 독립적으로 배포하거나 재사용할 수 있는 콘텐츠를 나타냅니다.
  • <aside>: 페이지의 주요 콘텐츠와 간접적으로 연관된 콘텐츠를 나타냅니다.
  • <footer>: 페이지나 섹션의 꼬리말을 나타냅니다.

이러한 시맨틱 태그를 사용하면 HTML 문서의 구조와 의미를 더 명확히 나타낼 수 있습니다.

5. HTML 태그의 중첩과 관계

HTML 태그는 중첩되어 사용될 수 있으며, 이때 태그 사이에는 부모-자식 또는 형제 관계가 형성됩니다.

<부모태그>
  <자식태그1>
    <손자태그></손자태그>
  </자식태그1>
  <자식태그2></자식태그2>
</부모태그>

위 예시에서 <부모태그>는 <자식태그1>과 <자식태그2>의 부모이며, <자식태그1>과 <자식태그2>는 형제 관계입니다. 그리고 <손자태그>는 <자식태그1>의 자식이면서 <부모태그>의 손자입니다.

6. HTML, CSS, JavaScript의 관계

HTML, CSS, JavaScript는 웹 페이지를 구성하는 핵심 기술입니다:

  • HTML: 웹 페이지의 구조와 내용을 정의합니다.
  • CSS: HTML 요소의 스타일(모양, 레이아웃)을 정의합니다.
  • JavaScript: 웹 페이지의 동작과 상호작용을 제어합니다.

이 세 가지 기술은 서로 협력하여 동적이고 시각적으로 풍부한 웹 페이지를 만들어냅니다.

7. HTML5의 새로운 기능

HTML5에서는 멀티미디어, 그래픽, 웹 애플리케이션 등을 다루기 위한 새로운 태그와 API가 도입되었습니다. 그 중 일부를 소개하면:

  • <video>, <audio>: 비디오와 오디오 콘텐츠를 재생합니다.
  • <canvas>: JavaScript를 사용하여 그래픽을 그릴 수 있는 영역을 정의합니다.
  • <svg>: 스케일러블 벡터 그래픽(SVG)을 정의합니다.
  • 웹 스토리지(localStorage, sessionStorage): 웹 페이지에서 데이터를 클라이언트 측에 저장할 수 있습니다.
  • 지오로케이션: 사용자의 지리적 위치를 가져올 수 있습니다.

이러한 새로운 기능들을 활용하면 더 풍부하고 상호작용이 가능한 웹 페이지를 만들 수 있습니다.

마치며

이번 포스팅에서는 HTML5의 기본 태그와 그 속성, 그리고 HTML5에서 새로 도입된 시맨틱 태그와 기능 등에 대해 알아보았습니다. HTML은 웹 페이지의 뼈대를 구성하는 핵심 기술로서, 이를 잘 이해하는 것은 웹 개발의 첫걸음이라 할 수 있습니다.

이상 HTML5의 기본적인 태그들에 대해 알아보았습니다. <!DOCTYPE> 선언부터 <html>, <head>, <body> 태그에 이르기까지, 이들은 웹 페이지의 뼈대를 구성하는 핵심 요소입니다.

물론 이외에도 웹 페이지를 구성하는 데 사용되는 수많은 HTML 태그들이 있습니다. 이 기본 태그들을 토대로, 다양한 태그와 속성을 활용하여 풍부하고 의미있는 웹 콘텐츠를 제작할 수 있습니다.

다음 포스팅에서는 텍스트를 다루는 주요 HTML 태그들에 대해 좀 더 자세히 알아보도록 하겠습니다.

#HTML #HTML5 #웹개발 #프론트엔드 #웹프로그래밍 #마크업언어 #태그 #요소 #시맨틱웹 #DOCTYPE #html태그 #head태그 #body태그 #title태그 #meta태그 #style태그 #script태그 #link태그 #웹표준 #웹접근성

profile
박영광
매일 1mm씩 성장하겠습니다
이전 포스트

HTML 기본 문법과 시맨틱 태그의 중요성

다음 포스트

HTML5의 다양한 텍스트 태그들

0개의 댓글