HTML 기본기 다지기

웹 개발을 시작할 때 가장 먼저 배우는 것이 HTML입니다.

HTML은 웹 페이지의 뼈대를 구성하는 언어로, 모든 웹 사이트는 결국 HTML 위에 쌓여 있어요.

이번 글에서는 HTML의 기본 구조부터 주요 태그, 시맨틱 태그, 그리고 폼 태그까지 깔끔하게 정리해 볼게요.

✅ HTML의 기본 구조 이해하기

HTML 문서는 기본적으로 다음과 같은 구조를 가지고 있어요.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>나의 첫 웹페이지</title>
  </head>
  <body>
    <h1>Hello, HTML!</h1>
  </body>
</html>

태그	설명
<!DOCTYPE html>	HTML5 문서임을 선언
<html>	HTML 문서의 시작과 끝을 감쌈
<head>	문서 정보를 담는 영역 (제목, 인코딩, 메타정보 등)
<body>	화면에 실제로 보여지는 콘텐츠 영역

🏷️ 주요 HTML 태그 소개

HTML에는 정말 다양한 태그가 있지만, 자주 쓰이는 기본 태그 몇 가지만 먼저 익혀볼게요.

🔹 텍스트 관련

<h1>제목</h1>
<p>문단입니다.</p>
<a href="https://www.example.com">링크</a>

h1 ~ h6 : 제목 태그, 숫자가 작을수록 중요도 높음
p : 단락(문단)
a : 하이퍼링크, href 속성으로 연결할 주소 지정

🔹 이미지와 리스트

<img src="image.jpg" alt="대체 텍스트" />
<ul>
  <li>항목 1</li>
  <li>항목 2</li>
</ul>
<ol>
  <li>순서 있는 항목 1</li>
</ol>

img : 이미지를 표시 (alt는 이미지 설명)
ul, ol : 리스트(ul은 순서 없음, ol은 순서 있음)
li : 리스트 항목

🔹 레이아웃용 태그

<div>레이아웃 영역</div>
<span>인라인 요소</span>

div : 블록 요소로 영역을 구분할 때 자주 사용
span : 인라인 요소로 텍스트 일부 스타일링에 유용

🧠 시맨틱 태그란? 왜 중요할까?

시맨틱(Semantic) 태그는 태그 이름만으로도 콘텐츠의 의미를 알 수 있도록 만든 태그입니다.

예시:

<header>사이트 상단</header>
<nav>메뉴 영역</nav>
<main>주요 콘텐츠</main>
<article>독립적인 글</article>
<aside>보조 정보</aside>
<footer>하단 정보</footer>

왜 중요할까?

코드의 가독성 향상
검색 엔진 최적화(SEO)
웹 접근성 개선 (스크린 리더 등)

시맨틱 태그를 적절히 사용하면 잘 짜인 구조와 의미 있는 웹페이지를 만들 수 있어요!

📝 폼(Form) 태그 완전 정복

사용자의 입력을 받기 위해선 form 태그를 사용합니다. 대표적인 입력 필드들은 아래와 같아요.

<form action="/submit" method="post">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name" />
  
  <label for="age">나이:</label>
  <input type="number" id="age" name="age" />

  <label for="gender">성별:</label>
  <select id="gender" name="gender">
    <option value="male">남자</option>
    <option value="female">여자</option>
  </select>

  <label for="comment">하고 싶은 말:</label>
  <textarea id="comment" name="comment"></textarea>

  <button type="submit">제출</button>
</form>

주요 입력 태그 정리

태그	설명
input	텍스트, 숫자, 이메일 등 다양한 입력 필드
select	드롭다운 목록
textarea	여러 줄 입력 필드
button	버튼 (제출, 초기화 등 다양한 역할 가능)

마무리 🎯

HTML은 웹의 시작이자 핵심입니다.

이번 글에서는 기본 구조부터 자주 쓰이는 태그들, 시맨틱 태그, 그리고 폼 요소까지 정리해 봤어요.

실제로 손으로 코드를 작성해 보고, 브라우저로 열어보는 경험이 가장 중요해요.

다음 글에서는 HTML로 간단한 웹페이지를 구성하면서 CSS로 스타일을 입혀보는 실습을 진행해 볼게요!

👉 [다음 글: CSS로 스타일링 시작하기]

저작자표시 비영리 변경금지 (새창열림)

'🎨 Frontend' 카테고리의 다른 글

📘 자바스크립트(JavaScript) 기본 다지기 - Part 2 (0)	2025.04.27
📘 자바스크립트(JavaScript) 기본 다지기 - Part 1 (0)	2025.04.24
웹 페이지 레이아웃 제대로 잡기 (0)	2025.04.23
CSS로 스타일링 시작하기 (0)	2025.04.10
웹은 어떻게 작동할까? (0)	2025.04.08

🐘 코끼리와 딩가딩가

HTML 기본기 다지기

✅ HTML의 기본 구조 이해하기

🏷️ 주요 HTML 태그 소개

🔹 텍스트 관련

🔹 이미지와 리스트

🔹 레이아웃용 태그

🧠 시맨틱 태그란? 왜 중요할까?

예시:

왜 중요할까?

📝 폼(Form) 태그 완전 정복

주요 입력 태그 정리

마무리 🎯

'🎨 Frontend' 카테고리의 다른 글

티스토리툴바

HTML 기본기 다지기

✅ HTML의 기본 구조 이해하기

🏷️ 주요 HTML 태그 소개

🔹 텍스트 관련

🔹 이미지와 리스트

🔹 레이아웃용 태그

🧠 시맨틱 태그란? 왜 중요할까?

예시:

왜 중요할까?

📝 폼(Form) 태그 완전 정복

주요 입력 태그 정리

마무리 🎯

'🎨 Frontend' 카테고리의 다른 글

관련글

티스토리툴바