HTML

마크업 언어 HTML 태그로 뜯어보기

작성자:

지난 글에서 코딩 언어를 마크업(HTML 등) 언어, 프로그래밍 언어, 스타일 언어, 데이터 언어 네 가지로 나누어 살펴봤습니다. 그중 마크업 언어는 문서나 화면의 구조와 의미를 표시하는 언어라고 설명했죠. 실행되는 프로그램이 아니라, “이건 제목이다”, “이건 문단이다”처럼 정보를 선언하는 역할입니다.

이번 글에서는 그 개념을 실제 HTML 코드로 확인해보겠습니다. HTML 태그가 어떤 의미를 담고 있는지 하나씩 살펴보면 웹페이지가 어떻게 만들어지는지 훨씬 쉽게 이해할 수 있습니다. 비개발자도 조금씩 공부하면 할 수 있습니다. 같이 공부해보시죠.

HTML 문서의 기본 뼈대

HTML 문서는 일정한 뼈대를 가지고 시작합니다. 이 구조는 브라우저에게 “이 문서는 HTML 문서입니다”라고 알려주는 기본 약속입니다.

<!DOCTYPE html>
<html>
<head>
    <title>첫 번째 웹페이지</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>HTML을 배우는 첫 페이지입니다.</p>
</body>
</html>

각 태그의 역할은 간단합니다.

  • <!DOCTYPE html> : HTML5 문서임을 선언
  • <html> : 문서 전체를 감싸는 최상위 태그
  • <head> : 제목, 문자 인코딩 등 문서 정보를 담는 공간
  • <body> : 실제 화면에 표시되는 내용을 담는 공간

건설 도면에도 표지와 본문이 구분되어 있듯이, HTML 역시 기본 구조를 갖춘 뒤 내용을 채워 넣습니다.

텍스트 구조 태그 — “이건 제목, 이건 문단”

HTML은 글을 단순히 보여주는 것이 아니라 의미를 함께 표현합니다. 가장 많이 사용하는 것이 제목과 문단 태그입니다.

<h1>코딩 언어 지도</h1>
<p>이번 글에서는 HTML의 기본 구조를 알아봅니다.</p>

<h2>HTML이란?</h2>
<p>HTML은 웹 문서의 구조를 정의하는 마크업 언어입니다.</p>

<h1>부터 <h6>까지는 제목의 위계를 나타냅니다. 숫자가 작을수록 더 중요한 제목이며, <p>는 하나의 문단을 의미합니다.

실무에서는 페이지당 <h1>을 보통 하나만 쓰고, 그 아래 소제목들은 <h2>, <h3>로 단계를 낮춰가며 구성합니다. 예를 들어 블로그 글이라면 제목은 <h1>, 각 장의 제목은 <h2>, 세부 내용은 <p>로 작성하는 것이 가장 자연스럽습니다. 사람뿐 아니라 검색엔진도 이런 구조를 이해하기 때문에 올바른 태그를 사용하는 것이 중요합니다.

목록 태그 — 정보를 나열할 때

실무 문서에서는 절차나 체크리스트를 자주 사용합니다. HTML에서는 목록 태그를 이용하면 깔끔하게 표현할 수 있습니다.

순서가 없는 목록입니다.

<ul>
    <li>설계 검토</li>
    <li>도면 확인</li>
    <li>시공 준비</li>
</ul>

순서가 중요한 절차라면 다음처럼 작성합니다.

<ol>
    <li>도면 작성</li>
    <li>검토 및 승인</li>
    <li>시공 시작</li>
</ol>

<ul>은 순서 없는 목록, <ol>은 순서 있는 목록이며, 실제 항목은 모두 <li> 태그 안에 들어갑니다.

연결과 삽입 — 문서를 문서답게

웹페이지의 가장 큰 특징은 다른 문서와 연결되고 다양한 콘텐츠를 포함할 수 있다는 점입니다.

<a href="https://example.com">
    홈페이지 방문
</a>

<img src="bridge.jpg" alt="교량 사진">

여기서 처음 등장하는 개념이 **속성(Attribute)**입니다.

  • href : 링크 주소
  • src : 이미지 파일 위치
  • alt : 이미지를 설명하는 대체 텍스트

태그가 “무엇을 하는지”를 정의한다면, 속성은 “어떻게 동작하는지”를 알려주는 추가 정보라고 생각하면 이해하기 쉽습니다.

표와 폼

엔지니어에게 가장 익숙한 HTML 요소 중 하나는 표입니다.

<table>
    <tr>
        <th>부재</th>
        <th>길이(m)</th>
    </tr>
    <tr>
        <td>기둥</td>
        <td>6.5</td>
    </tr>
</table>

표는 데이터를 정리할 때 유용하지만, 화면 배치를 위해 사용하는 것은 권장되지 않습니다.

사용자의 입력을 받는 <form> 태그도 존재합니다.

<form>
    <input type="text" placeholder="이름 입력">
    <button>전송</button>
</form>

다만 폼은 단순히 입력 창만 만드는 역할입니다. 실제로 버튼을 눌렀을 때 어떤 일이 일어나는지는 JavaScript가 담당하므로, 다음 시리즈에서 더 자세히 살펴보겠습니다.

구조를 넘어 의미까지 — 시맨틱 HTML

예전에는 화면을 만들 때 거의 모든 영역을 <div>로 구성했습니다.

<div>헤더</div>
<div>본문</div>
<div>푸터</div>

하지만 HTML5에서는 의미를 더 명확하게 전달하는 시맨틱(Semantic) 태그를 제공합니다.

<header>사이트 제목</header>

<nav>
    메뉴
</nav>

<section>
    본문 내용
</section>

<footer>
    저작권 정보
</footer>

브라우저에서는 비슷하게 보일 수도 있지만, 사람과 검색엔진은 이 태그들을 통해 문서의 구조를 훨씬 쉽게 이해할 수 있습니다. 결국 HTML의 핵심은 예쁜 화면을 만드는 것이 아니라 문서의 구조와 의미를 정확하게 표현하는 것입니다.

마무리

오늘은 HTML의 기본 구조와 자주 사용하는 태그들을 살펴봤습니다. HTML은 웹페이지를 꾸미는 언어가 아니라 웹페이지의 뼈대를 만드는 언어입니다. 제목, 문단, 목록, 링크, 표처럼 각각의 태그에는 모두 분명한 의미가 있으며, 그 의미를 올바르게 표현하는 것이 좋은 HTML의 시작입니다.

하지만 지금 만든 페이지는 아직 조금 밋밋해 보입니다. 구조는 완성됐지만 색도 없고, 글꼴도 평범하며, 배치도 단순합니다. 긴 글 읽어주셔서 감사합니다.

다음 3편에서는 CSS를 이용해 이 HTML에 ‘옷을 입히는 방법’을 알아보겠습니다. 같은 HTML이라도 CSS를 적용하면 완전히 다른 모습의 웹페이지가 되는 과정을 함께 살펴보겠습니다. 기대해주시기 바랍니다.

댓글 남기기