[웹 기초] HTML이란

목차 (OPEN)

📝 HTML이란
🔎 HTML의 역할
🏗️ HTML의 기본 구조
🤝 결론

📝 HTML이란

HTML은 HyperText Markup Language의 약자로써,

직역하면 하이퍼텍스트를 위한 마크업 언어이다.

여기에서 HyperText란 다른 페이지나 문서로 이동할 수 있는 링크 기능을 의미하고,

Markup Language란 문서의 구조를 태그(< >) 로 표시하는 언어를 의미한다.

예를 들면,

"여기가 제목이야"

"이거는 문단이야"

"이거는 이미지야"

라는 정보들을 브라우저에게 알려주는 역할을 해주는 것이다.

🔎 HTML의 역할

HTML은 웹 페이지의 뼈대를 만드는 언어라고 생각하면 되는데,

자주 사용하는 역할들은 아래의 표와 같다.

역할	예시 태그
📰 제목 설정	<h1>, <h2>
✍🏻 문단 작성	<p>
🖼️ 이미지 삽입	<img>
🔗 링크 연결	<a>
📋 리스트 작성	<ul>, <ol>
📊 표 구성	<table>
📦 구역 나누기	<div>, <section>

🏗️ HTML의 기본 구조

HTML 문서는 항상 일정한 구조를 따라야 하는데,

가장 기본적인 틀은 아래와 같다.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="UTF-8">
        <title>나의 첫 웹 페이지</title>
    </head>
    <body>
    	<h1>안녕하세요</h1>
        <p>이 문장은 HTML 문단 태그로 만들어졌습니다.</p>
        <a href="https://google.com">구글 바로가기</a>
        <img src="cat.jpg" alt="식빵 굽는 고양이" />
    </body>
</html>

이 예시에서 사용된 태그들에 대해서 간단히 알아보자.

1️⃣ <!DOCTYPE html>

이 문서가 HTML5 형식임을 브라우저에게 알려주는 선언문으로,

웹 표준에 따라 브라우저가 제대로 해석하고 표시할 수 있도록 도와준다.

2️⃣ <html>

전체 HTML 문서의 시작과 끝을 감싸는 최상위 태그로써,

이 태그 안에는 웹 페이지의 설정 정보를 담는 <head> 영역과

실제로 표시될 내용을 담는 <body> 영역이 포함된다.

3️⃣ <meta chasrset="UTF-8">

문자 인코딩 방식을 UTF-8로 설정한다는 의미로,

UTF-8은 한글을 포함한 다양한 언어를 안정적으로 표현할 수 있어서

전 세계적으로 널리 사용된다.

4️⃣ <title></title>

브라우저 탭에 표시되는 제목을 정의하는 것으로,

사용자가 브라우저를 열었을 때,

탭 상단에 봉는 문구가 바로 이 태그 사이에 적혀있는 문구이다.

5️⃣ <h1></h1>

가장 큰 제목 태그로써,

숫자가 작을수록 글자가 크고 강조되는 제목으로 인식된다.

6️⃣ <p></p>

문단을 나타내는 태그로써,

일반적인 글 내용을 단락으로 표현할 때 사용되며,

자동으로 줄바꿈이 적용된다.

7️⃣ <a></a>

하이퍼링크를 생성하는 태그로써,

href 속성에 연결하고자 하는 웹 주소를 넣으면,

사용자가 "구글 바로가기"라는 글자를 클릭했을 때 해당 사이트로 이동하게 된다.

8️⃣ <img src="cat.jpg" alt="식빵 굽는 고양이" />

이미지를 삽입하는 태그로써,

src 속성은 이미지 파일의 경로를 나타내며,

alt 속성은 이미지가 로드되지 않거나 시각 장애인을 위한 스크린 리더가 읽어줄 때 사용할 대체 텍스트를 의미한다.

위의 html 문서를 브라우저에서 확인해보면 위와 같다.

오늘은 단순히 어떤 태그가 있는지 정도만 알아봐서

화면이 매우 난잡하지만 ..

'나의 첫 웹 페이지'라는 이름으로 탭 이름도 잘 변경되어 있고,

글자들과 이미지들도 잘 보이며,

구글 바로가기를 클릭했을 때 구글 검색창으로 잘 넘어가는 것도 확인할 수 있다.

🤝 결론

HTML은 구조만 담당하기 때문에

디자인 (CSS)과 기능 (JavaScript)이 함께 모여야

우리가 접하는 완성된 웹 사이트가 완성이 된다.

우선, 어떤 웹 사이트든지 HTML 없이는 존재할 수 없기 때문에

HTML에 대해서 먼저 알아봤는데,

차근차근 다른 것들도 알아가보고자 한다. 🔎

'💻 웹 > 📌 웹 기초' 카테고리의 다른 글

[웹 기초] 인터넷은 어떻게 작동하는가 (0)	2025.05.20
[웹 기초] 간단한 채팅창 만들기 실습 (0)	2025.05.13
[웹 기초] CSS의 속성 (0)	2025.05.11
[웹 기초] CSS란 (0)	2025.05.10
[웹 기초] 웹(Web) 이란 (1)	2025.05.07

SSOSSO._.

[웹 기초] HTML이란

📝 HTML이란

🔎 HTML의 역할

🏗️ HTML의 기본 구조

🤝 결론

'💻 웹 > 📌 웹 기초' 카테고리의 다른 글

티스토리툴바

[웹 기초] HTML이란

📝 HTML이란

🔎 HTML의 역할

🏗️ HTML의 기본 구조

🤝 결론

'💻 웹 > 📌 웹 기초' 카테고리의 다른 글

'💻 웹/📌 웹 기초' Related Articles

티스토리툴바