HTML 기본 구조 완전정복: 태그와 속성 이해하기

웹페이지를 만들기 위해 반드시 알아야 할 첫 번째 지식이 바로 HTML의 기본 구조입니다. 특히 **HTML 태그(Tag)**와 **속성(Attribute)**는 웹페이지의 뼈대와 세부 설정을 구성하는 핵심 요소로, 코딩을 처음 접하는 비전공자라 하더라도 정확히 이해해두면 다양한 웹 작업에 유용하게 활용할 수 있습니다.

이 글에서는 HTML 문서의 전체 구조를 분석하고, 태그와 속성이 무엇인지, 각각 어떤 역할을 하는지에 대해 알기 쉽게 정리해보겠습니다.

HTML이란 무엇인가?

HTML(HyperText Markup Language)은 웹페이지의 구조를 정의하는 마크업 언어입니다. HTML을 통해 제목, 문단, 이미지, 링크 등의 요소를 지정할 수 있으며, 웹 브라우저는 이 HTML 코드를 해석하여 사용자에게 시각적으로 표현해줍니다.

HTML은 프로그래밍 언어가 아니며, 복잡한 논리나 계산이 아닌 ‘구조화된 표시’에 집중된 언어입니다. 그래서 입문자가 배우기 좋은 언어이기도 합니다.

HTML 문서의 기본 구조

HTML 문서는 대체로 다음과 같은 구조로 구성됩니다:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>페이지 제목</title> </head> <body> <h1>안녕하세요</h1> <p>이것은 HTML 기본 구조 예시입니다.</p> </body> </html>

각 구성요소 설명

<!DOCTYPE html>: 이 문서가 HTML5 버전임을 선언하는 코드
<html>: 전체 HTML 문서를 감싸는 태그
<head>: 웹페이지의 메타 정보(제목, 문자 인코딩, 외부 리소스 등)를 포함
<body>: 실제 화면에 표시될 콘텐츠(텍스트, 이미지 등)가 들어가는 영역

이 기본 구조만 이해해도 단순한 웹페이지를 직접 제작할 수 있을 정도로 HTML은 간결합니다.

태그(Tag)란 무엇인가?

**태그(tag)**는 HTML의 가장 기본적인 단위입니다. 태그는 콘텐츠의 성격을 정의하며, 보통 여는 태그와 닫는 태그로 구성됩니다.

예시:

<p>이것은 문단입니다.</p>

<p>: 여는 태그 (paragraph, 문단)
</p>: 닫는 태그

태그 안에 들어가는 텍스트는 웹페이지에 표시되는 실제 콘텐츠이며, 브라우저는 태그를 통해 이 콘텐츠가 어떤 의미인지 파악합니다.

자주 사용되는 HTML 태그

태그의미설명

<h1> ~ <h6>	제목	숫자가 작을수록 중요한 제목
<p>	문단	텍스트 블록을 구성
<a>	하이퍼링크	다른 페이지나 사이트로 연결
<img>	이미지	외부 이미지 삽입
<ul>, <li>	리스트	항목 나열

속성(Attribute)이란 무엇인가?

HTML 태그는 **속성(attribute)**을 통해 더 많은 정보를 부여할 수 있습니다. 속성은 태그의 기능을 확장하거나 세부 조정을 가능하게 해줍니다.

속성의 기본 구조:

href는 속성 이름
"https://www.example.com"은 속성 값

이 예시에서 <a> 태그는 단순한 텍스트를 클릭 가능한 링크로 만들어줍니다. 만약 속성을 생략하면 해당 기능이 작동하지 않습니다.

자주 사용되는 HTML 속성

속성적용 태그설명

href	<a>	링크 연결 주소
src	<img>	이미지 파일 경로
alt	<img>	이미지 대체 텍스트
id	모든 태그	고유 식별자
class	대부분	공통 스타일 지정 시 사용

속성은 항상 여는 태그 안에서 사용되며, 이름="값" 형식으로 작성됩니다.

태그 + 속성 실전 예제

<img>: 이미지 삽입 태그
src: 이미지 파일 경로
alt: 이미지가 로드되지 않을 때 대체 텍스트
width: 이미지 너비 지정

이처럼 태그에 속성을 추가하면 콘텐츠의 기능성과 사용성을 크게 향상시킬 수 있습니다.

마무리: HTML 구조의 이해는 웹의 시작

웹페이지는 단순한 글과 그림이 아닌, 구조화된 정보의 집합입니다. 이 구조를 설계하고 정의하는 역할을 하는 것이 바로 HTML이며, 태그와 속성은 그 핵심 도구입니다.

비전공자라 하더라도 HTML의 기본 구조를 이해하고, 태그와 속성의 쓰임을 익힌다면 자신만의 웹페이지를 만들거나, 웹 관련 직무에서의 이해도를 높이는 데 큰 도움이 될 수 있습니다.

HTML은 복잡하지 않습니다. 단순한 구조 속에서 실용적인 지식이 숨어 있고, 그 시작은 태그와 속성을 정확히 이해하는 것에서 출발합니다. 이 글을 통해 HTML의 기본 구조를 명확히 이해하고, 다음 단계인 CSS나 자바스크립트 학습으로도 자연스럽게 나아갈 수 있을 것입니다.

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

info521 님의 블로그