HTML 기초

HTML은 웹 페이지의 구조를 설계하는 마크업 언어입니다. HyperText Markup Language의 약자로, 웹의 뼈대를 만듭니다.

목차

개요

HTML은 웹페이지를 구성하는 가장 기본적인 언어로, 텍스트, 이미지, 링크, 입력창 등 다양한 콘텐츠를 표현할 수 있습니다. HTML은 태그(tag)들을 사용하여 콘텐츠의 의미와 구조를 명시합니다.

기본 문서 구조

HTML 문서는 다음과 같은 기본 구조를 가집니다:

Html 
                <!DOCTYPE html>
                <html lang="ko">
                    <head>
                        <meta charset="UTF-8">
                        <title>문서 제목</title>
                    </head>
                    <body>
                        <h1>제목</h1>
                        <p>본문 내용</p>
                    </body>
                </html>

<head> 태그

화면에 보이지 않는 영역에 속하며 seo등 문서의 다양한 정보와 기능들을 담는 곳

태그 기능
<title> 문서제목 태그
<meta> 문서의 주요한 정보를 담는 태그
<link> 외부 css파일을 불러올 때 사용
<style> 문서 내부에 css를 사용할 때 사용

<body> 태그

화면에 보이는 영역에 속하며 문서의 골격에 해당되는 영역

태그 기능
<h1> ~ <h6> 제목 태그
<p> 문단
<a> 하이퍼링크
<img>,<audio>,<video> 이미지, 오디오, 동영상
<iframe> 외부 문서 삽입
<ul>, <ol>, <li>, <dl>, <dt>, <dd> 목록
<div>, <span> 구역 분리
<input>, <form>, <textarea> 사용자 입력
<button> 버튼
<table> , <tr> , <td> , <th> , <colgroup> , <col> 표

시맨틱 태그

시맨틱 태그(Semantic Tag)는 HTML5에서 도입된 태그들로, 문서의 구조와 의미를 명확하게 나타내는 역할

태그 기능
<header> 문서의 머리말 영역
<nav> 네비게이션 링크 영역
<section> 구역을 나타낼때 사용
<article> 기사나, 글, 포스트, 리뷰 등을 담은 영역
<aside> 사이드바 영역을 표현할 때 사용
<main> 문서의 중요 컨텐츠 영역
<figure> / <figcaption> 사진, 그림, 미디어 영역 / 설명
<mark> 중요한 텍스트 강조시 사용
<footer> 바닥글, 사업자정보 및 영업시간등 다양한 정보를 담는 영역

주의사항 및 팁

  • 모든 HTML 문서는 <!DOCTYPE html> 선언으로 시작해야 합니다.
  • 태그는 열고 닫는 구조로 작성되며, 일부는 닫지 않아도 됩니다(<br>, <img> 등).
  • HTML은 CSS, JavaScript와 함께 사용될 때 시각적 스타일과 동작을 추가할 수 있습니다.
참고

HTML 자체는 동작이 아니라 구조를 정의하는 역할을 합니다. 동작은 JavaScript, 디자인은 CSS가 담당합니다.