HTML 기초부터 활용까지: 웹 페이지 제작의 필수 언어
웹사이트를 만들고 싶다면 가장 먼저 배워야 할 HTML(HyperText Markup Language).
HTML은 웹 페이지의 구조를 정의하는 마크업 언어로, 모든 웹사이트의 기본이 되는 중요한 요소다.
또한 티스토리 블로그 꾸미기에서도 계속 사용되기때문에
이번 포스팅에서는 HTML의 개념, 기본 구조, 주요 태그, 그리고 최신 HTML5 기능까지 알아보려 한다.
1. HTML이란?
웹 브라우저가 읽고 해석하여 화면에 표시하는 마크업 언어인 HTML. 우리가 보는 모든 웹 페이지는 HTML 코드로 작성되어 있으며, 이를 기반으로 텍스트, 이미지, 동영상, 링크 등을 웹사이트에 배치할 수 있다.
✔ HTML의 특징
✅ 웹 페이지의 뼈대를 구성하는 언어
✅ 마크업 태그를 사용하여 콘텐츠를 구조화
✅ CSS와 JavaScript와 함께 사용하여 디자인과 기능 추가 가능
2. HTML 기본 구조
HTML 문서는 특정한 형식을 따르는데
아래를 기본적인 HTML 문서 구조로 보면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 기본 구조</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 HTML 기본 구조입니다.</p>
</body>
</html>
✔ 주요 태그 설명
• <!DOCTYPE html> : HTML5 문서임을 선언
• <html> : HTML 문서의 시작과 끝을 정의
• <head> : 웹 페이지의 메타데이터(문서 제목, 문자 인코딩 등) 포함
• <title> : 브라우저 탭에 표시될 제목
• <body> : 실제 웹 페이지에 표시될 내용
3. HTML의 주요 태그 정리
HTML에서 가장 많이 사용되는 주요 태그들에 대해 알아보자
✔ 텍스트 관련 태그
• <h1> ~ <h6> : 제목(Heading) 태그, 숫자가 작을수록 큰 제목
• <p> : 단락(Paragraph) 태그
• <strong> : 굵게(Bold)
• <em> : 기울임(Italic)
• <br> : 줄 바꿈(Break)
✔ 링크와 이미지 태그
• <a href="https://www.example.com">링크</a> : 다른 웹페이지로 이동
• <img src="image.jpg" alt="이미지 설명"> : 이미지 삽입
✔ 목록 태그
• <ul> : 순서 없는 목록(불릿 리스트)
• <ol> : 순서 있는 목록(번호 리스트)
• <li> : 목록 항목
✔ 테이블 태그
• <table> : 테이블 생성
• <tr> : 행(Row)
• <td> : 열(Column)
• <th> : 제목(헤더) 열
✔ 폼 관련 태그
• <form> : 사용자 입력을 받는 폼
• <input> : 입력 필드
• <textarea> : 여러 줄 입력
• <button> : 버튼
4. HTML5에서 추가된 시멘틱 태그
HTML5에서는 시멘틱(semantic) 태그가 추가되었다. 시멘틱 태그는 코드의 의미를 명확하게 하여 검색 엔진 최적화(SEO)와 웹 접근성을 향상시킵니다.
✔ 주요 시멘틱 태그
• <header> : 웹 페이지의 헤더 영역
• <nav> : 내비게이션 메뉴
• <section> : 콘텐츠 구역
• <article> : 독립적인 콘텐츠
• <aside> : 사이드바 영역
• <footer> : 웹 페이지의 푸터 영역
예를 들어, 아래와 같이 사용할 수 있습니다.
<header>
<h1>웹 개발 블로그</h1>
</header>
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">소개</a></li>
<li><a href="#">연락처</a></li>
</ul>
</nav>
<section>
<article>
<h2>HTML 기초 배우기</h2>
<p>HTML은 웹 페이지를 만드는 기초적인 언어입니다.</p>
</article>
</section>
<footer>
<p>© 들기름메밀국수 개발 블로그</p>
</footer>
이러한 시멘틱 태그를 활용하면 코드가 더욱 직관적이고 유지보수가 쉬워지는것을 볼 수 있다.
5. 결론: HTML은 웹 개발의 첫걸음
웹 페이지의 구조를 구성하는 가장 기본적인 언어인 HTML.
CSS(디자인)와 JavaScript(기능)와 함께 사용하면 완성도 높은 웹사이트를 만들 수 있으며, 티스토리 블로그 역시 빠르고 쉽게 원하는대로 꾸밀 수 있다.
✔ HTML을 배우면 할 수 있는 것들
✅ 블로그, 개인 홈페이지 제작
✅ 웹 개발자, 프론트엔드 개발자의 기본 지식 습득
✅ 검색 엔진 최적화(SEO)에 유리한 페이지 만들기
처음에는 간단한 HTML 코드부터 작성해 보면서 익숙해지는 것이 중요하며
이후 CSS와 JavaScript까지 학습하면 더욱 멋진 웹사이트를 만들 수 있을 것이다.
👉 HTML을 처음 배우셨다면, 직접 코드를 작성하며 연습해 보는것도 추천한다.
'정보' 카테고리의 다른 글
| 운전면허증 7년 무사고 1종면허 발급 갱신하는 법 (1) | 2025.03.04 |
|---|---|
| 아이폰 16e 출시, SE4 가격부터 기능 출시일 완벽 정리 (1) | 2025.02.20 |
| 다이어트 추천 칼로리 열량 낮은 햄버거 메뉴 추천 (3) | 2025.02.09 |
