웹의 가장 기본이 되는 언어인 HTML의 정의부터 작성 규칙까지, 표준 가이드에 따라 하나씩 짚어보겠습니다.
1. HTML의 정의
**HTML(HyperText Markup Language)**은 웹페이지의 뼈대를 만드는 마크업 언어입니다.
- HyperText: 선형적인 읽기 방식이 아니라, 하이퍼링크를 통해 문서와 문서 사이를 자유롭게 이동할 수 있는 텍스트를 의미합니다.
- Markup: 태그(<>)를 사용하여 텍스트나 이미지 등의 콘텐츠가 웹 브라우저에서 어떤 역할을 하는지 '표시'하는 것을 의미합니다.
2. HTML의 기본 구조와 주요 태그
표준적인 HTML5 문서는 다음과 같은 계층 구조를 가집니다.
- <html>: 문서의 루트(Root) 요소로, 모든 HTML 태그를 감싸는 가장 바깥쪽의 컨테이너입니다.
- <head>: 브라우저 화면에는 보이지 않지만, 문서에 대한 정보(메타데이터)를 담고 있는 머리 부분입니다.
- <meta>: 인코딩 설정(예: UTF-8), 검색 엔진을 위한 키워드, 화면 해상도 설정 등을 정의합니다.
- <title>: 브라우저의 탭 제목에 나타나는 텍스트를 설정합니다.
- <body>: 실제로 사용자에게 보이는 웹사이트의 모든 콘텐츠(텍스트, 이미지, 버튼 등)가 들어가는 몸체 부분입니다.
3. HTML 주석 (Comment)
주석은 코드를 설명하거나 특정 부분을 실행되지 않게 만들 때 사용합니다. 브라우저는 주석을 해석하지 않으므로 사용자 화면에는 나타나지 않습니다.
- 작성법: ``
- 용도:
- 복잡한 코드의 구조 설명
- 협업 시 동료 개발자를 위한 메시지 전달
- 임시로 특정 기능을 화면에서 가리고 싶을 때
4. HTML 코딩 규칙 (Coding Conventions)
깔끔하고 전문적인 코드를 작성하기 위해 반드시 지켜야 할 약속들입니다.
- 소문자 사용: 태그 이름과 속성은 모두 소문자로 작성하는 것이 표준입니다.
- 적절한 들여쓰기: 태그의 부모-자식 관계를 명확히 하기 위해 보통 2칸 또는 4칸의 들여쓰기를 적용합니다.
- 닫는 태그 필수: <div>로 시작했다면 반드시 </div>로 닫아야 오류를 방지할 수 있습니다. (빈 태그 제외)
- 속성 값 따옴표: 속성 값은 반드시 큰따옴표(" ")로 감싸는 것이 관례입니다. (예: class="container")
- 시맨틱 태그 사용: 단순히 <div>만 쓰기보다 <header>, <main>, <footer> 등 의미가 있는 태그를 사용하여 구조를 짜는 것이 중요합니다.
실무자의 시선
실무에서 HTML을 작성할 때 가장 많이 하는 실수는 '구조'와 '표현'을 섞는 것입니다.
- 역할 분담: 글자를 굵게 만들거나 색을 입히는 것은 HTML 태그(예: <font>, <b>)가 아닌 CSS에서 처리해야 합니다.
- 검색 엔진 최적화(SEO): <title>과 <meta> 태그를 얼마나 정확하게 작성하느냐에 따라 구글 검색 결과에서 우리 사이트가 상단에 노출될지가 결정됩니다.
- 유효성 검사: 작성한 HTML이 표준에 맞는지 W3C Validator 같은 도구를 통해 수시로 검사하는 습관을 들이는 것이 좋습니다.
HTML의 기초적인 체계를 모두 이해하셨나요?
Comment
HTML 코드에 주석을 다는 방법은 매우 간단하고 유용합니다. 주석은 코드 내부에 메모를 남기거나 설명을 추가할 때 사용되며, 브라우저에는 전혀 표시되지 않아 코드 이해를 돕는 역할을 합니다.
HTML 주석은 다음과 같은 형태로 작성합니다.
<!-- 주석 내용 -->예를 들어, 아래와 같이 사용할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>예제 페이지</title>
</head>
<body>
<!-- 이 부분은 페이지 본문의 시작을 알리는 주석입니다 -->
<h1>안녕하세요!</h1>
<p>이것은 HTML 주석 예제입니다.</p>
<!-- 이 부분은 페이지 본문의 끝을 알리는 주석입니다 -->
</body>
</html>
위 예시에서 사이에 적힌 내용들은 브라우저가 해석하지 않고 무시하므로, 개발자 간의 소통이나 코드 관리에 매우 편리합니다.
이렇게 HTML 주석을 활용하여 코드를 깔끔하고 이해하기 쉽게 관리해 보시길 권장합니다.
'HTML' 카테고리의 다른 글
| Semantic tag (0) | 2026.02.19 |
|---|---|
| Hyper link tag and property (0) | 2026.02.18 |
| Multimedia tag and property (0) | 2026.02.18 |
| PNG JPG SVG WebP GIF characteristic, pros and cons (0) | 2026.02.18 |
| Img tag and property (0) | 2026.02.18 |