HTML(에이치티엠엘, HyperText Markup Language)은 웹페이지를 만들기 위한 가장 기본적인 언어입니다. 웹을 구성하는 모든 요소들 — 제목, 문단, 이미지, 링크, 표, 버튼 등 — 은 HTML을 통해 만들어집니다. HTML은 코딩을 처음 배우는 사람에게 가장 좋은 시작점이며, 웹사이트가 어떻게 작동하는지를 이해하는 데 필수적인 지식입니다. 이 글에서는 HTML을 처음 배우는 학생들을 위해, 개념부터 기본 문법, 구조, 자주 쓰이는 태그까지 2500자 이상으로 자세히 설명합니다.
1. HTML이란 무엇인가요?
HTML은 HyperText Markup Language의 약자입니다. 이 용어를 하나씩 나눠 보면:
- HyperText(하이퍼텍스트): 다른 문서나 웹페이지로 연결할 수 있는 텍스트를 말합니다. 우리가 클릭하면 다른 페이지로 이동하는 '링크'가 대표적인 예입니다.
- Markup Language(마크업 언어): 문서의 구조를 정의하는 언어입니다. 문장의 의미나 역할(예: 제목, 본문, 표 등)을 태그로 구분하여 표현합니다.
즉, HTML은 웹페이지에 구조를 부여하는 언어로, 웹 브라우저가 페이지를 표시할 수 있도록 돕습니다.
2. HTML의 기본 구조
HTML 문서는 다음과 같은 기본 뼈대를 가지고 있습니다:
<!DOCTYPE html>
<html>
<head>
<title>나의 첫 번째 웹페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>HTML을 배우는 중입니다.</p>
</body>
</html>
- <!DOCTYPE html>: 이 문서가 HTML5 형식임을 알려줍니다.
- <html>: HTML 문서의 시작과 끝을 나타냅니다.
- <head>: 문서의 정보를 담는 부분 (제목, 문자셋, CSS, JS 등)
- <title>: 브라우저 탭에 표시되는 제목
- <body>: 사용자에게 실제로 보여지는 화면
3. HTML 태그(Tag)란?
HTML에서 태그는 < > 기호로 감싸서 작성하며, 각각의 태그는 특정한 역할을 가집니다. 대부분 열리는 태그와 닫히는 태그로 구성되어 있습니다.
<p>이것은 문단입니다.</p>여기서 <p>는 문단(paragraph)을 나타내는 태그이며, 이 안에 있는 텍스트가 문단으로 표시됩니다.
자주 사용하는 HTML 태그들
- <h1> ~ <h6>: 제목을 표시 (숫자가 작을수록 큰 제목)
- <p>: 문단
- <a>: 링크
- <img>: 이미지
- <ul>, <ol>, <li>: 목록(순서 없는 목록, 순서 있는 목록, 항목)
- <table>, <tr>, <td>: 표, 행, 열
- <div>: 구역을 나누는 컨테이너 (디자인이나 기능 구분용)
- <br>: 줄 바꿈 (닫는 태그 없음)
4. HTML 링크와 이미지
링크 만들기 - <a> 태그
<a href="https://www.google.com">구글로 이동</a>위 코드는 "구글로 이동"이라는 텍스트를 클릭하면 구글 홈페이지로 이동하는 링크입니다. href 속성은 이동할 주소를 나타냅니다.
이미지 넣기 - <img> 태그
<img src="image.jpg" alt="설명글">src: 이미지 파일의 경로alt: 이미지가 없을 때 표시할 대체 텍스트
5. HTML에서 목록 만들기
HTML에서는 순서 있는 목록과 순서 없는 목록을 만들 수 있습니다.
순서 없는 목록 (ul)
<ul>
<li>사과</li>
<li>바나나</li>
<li>포도</li>
</ul>
순서 있는 목록 (ol)
<ol>
<li>HTML 공부하기</li>
<li>CSS 공부하기</li>
<li>JavaScript 공부하기</li>
</ol>
6. HTML 입력 폼
사용자에게 정보를 입력받기 위해 폼(form)을 사용합니다. 로그인, 회원가입, 검색창 등이 이에 해당합니다.
<form action="/submit" method="post">
이름: <input type="text" name="username"><br>
비밀번호: <input type="password" name="password"><br>
<input type="submit" value="제출">
</form>
위 코드는 이름과 비밀번호를 입력받고, 제출 버튼을 누르면 데이터를 서버로 전송하는 간단한 예제입니다.
7. HTML 주석(Comment)
HTML 코드 안에 주석을 추가하면, 해당 내용은 브라우저에 표시되지 않지만 코드의 이해를 돕는 설명으로 활용됩니다.
<!-- 이것은 주석입니다 -->
8. HTML 학습 팁
- 실습 위주로 학습하기: 코드를 직접 타이핑하면서 결과를 확인해보세요.
- 기본 구조 암기하기: <html>, <head>, <body>는 꼭 외우세요.
- 브라우저 개발자 도구 활용: F12 키를 눌러 HTML 구조를 직접 확인할 수 있습니다.
- 무료 학습 사이트 이용: W3Schools, MDN Web Docs, CodePen 등을 참고하세요.
결론
HTML은 웹의 기초이자 출발점입니다. 모든 웹페이지는 HTML로 만들어지며, 이 구조 위에 CSS로 디자인을, JavaScript로 기능을 추가하여 하나의 완성된 웹사이트가 만들어집니다. 처음에는 생소할 수 있지만, 태그의 역할을 하나씩 이해하고 직접 웹페이지를 만들어보는 경험이 중요합니다. HTML을 충분히 익히면 웹 개발의 세계가 훨씬 더 쉽고 재미있어질 것입니다.
'IT' 카테고리의 다른 글
| 자바스크립트(JavaScript)란? (0) | 2025.04.25 |
|---|---|
| CSS(Cascading Style Sheets)란? (0) | 2025.04.24 |
| 프론트엔드와 백엔드 (0) | 2025.04.23 |
| Data Structure(자료구조)란 (0) | 2025.04.23 |
| HSRP의 기능, 역할 및 사용 예시 (고가용성, 라우터, 네트워크 장애 대비) (0) | 2025.04.15 |
