HTML(HyperText Markup Language)은 웹 페이지의 기본적인 뼈대를 구성하는 언어로, 모든 웹 페이지는 HTML 문서로 작성됩니다. HTML은 웹 브라우저가 콘텐츠를 표시할 수 있도록 구조를 제공하며, 그 구조는 다양한 태그로 이루어집니다. HTML의 기본 문서 구조와 핵심 태그들을 알아 보겠습니다.
1. HTML 문서의 기본 구조
HTML 문서는 다음과 같은 기본구조에서 시작합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
</head>
<body>
<!-- 여기에 본문 내용이 들어갑니다 -->
</body>
</html>
1. <!DOCTYPE html>
HTML5 문서임을 선언하는 태그로, 웹 브라우저가 문서를 HTML5 규격에 맞춰 해석하도록 합니다.
2. <html> 태그
HTML 문서의 최상위 요소로, 문서의 시작과 끝을 알리는 역할입니다. lang 속성은 문서의 언어를 지정하며, 검색 엔진 최적화(SEO)와 접근성 향상에 도움을 줍니다.
3. <head> 태그
문서의 메타데이터를 포함하는 부분입니다. 메타데이터는 사용자에게 직접 보이지 않지만, 브라우저나 검색 엔진이 문서를 처리하는 데 필요한 정보를 제공합니다.
- <meta charset=”UTF-8″>: 문서의 인코딩 방식을 지정합니다.
UTF-8은 대부분의 언어를 표현할 수 있어 전 세계적으로 사용됩니다. - <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>: 반응형 웹 디자인을 위한 태그로, 화면 크기에 맞춰 페이지를 조정합니다.
- <title>: 브라우저 탭이나 검색 엔진 결과에서 표시되는 문서의 제목을 정의합니다.
4. <body> 태그
웹 페이지의 실제 보여지는 콘텐츠를 포함하는 부분입니다. 모든 텍스트, 이미지, 링크, 동영상 등의 요소는 이 <body> 태그 안에 포함됩니다.
2. HTML 핵심 태그 설명
1. 제목 태그(<h1> ~ <h6>)
제목 태그는 문서의 제목과 소제목을 정의하는 데 사용됩니다. <h1>은 가장 큰 제목을, <h6>은 가장 작은 제목을 의미합니다.
<h1>이것은 가장 큰 제목입니다</h1> <h2>이것은 두 번째로 큰 제목입니다</h2>
검색 엔진은 제목 태그를 분석하여 페이지의 구조를 이해하고, <h1>은 페이지의 가장 중요한 내용을 나타내므로 큰 제목을 담당 하며 SEO에 매우 중요합니다.
2. 단락 태그(<p>)
단락을 정의하는 태그입니다. 텍스트를 문단 단위로 구분할 때 사용합니다.
<p>이것은 하나의 단락입니다.</p>
3 링크 태그(<a>)
하이퍼링크를 생성하는 태그입니다. href 속성을 통해 연결할 웹 페이지의 URL을 지정할 수 있습니다. 이 태그를 사용하여 다른 웹 페이지나 외부 리소스로 연결할 수 있습니다.
<a href="<https://www.example.com>">여기를 클릭하세요</a>
4. 이미지 태그(<img>)
이미지를 삽입하는 태그입니다. src 속성에 이미지 파일의 경로를, alt 속성에 이미지의 대체 텍스트를 지정합니다.
이미지의 대체 텍스트는 이미지가 로드되지 않을 때 표시되며, 시각장애인을 위한 스크린 리더가 읽어주는 텍스트이기도 하므로 SEO와 접근성 측면에서 중요합니다.
<img src="image.jpg" alt="이미지 설명">
5. 목록 태그(<ul>, <ol>, <li>)
목록을 만들 때 사용되는 태그들입니다. <ul>은 순서 없는 목록, <ol>은 순서 있는 목록을 정의하며, 각 항목은 <li> 태그로 구분됩니다.
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ul>
<ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ol>
6. 강조 태그(<strong>, <em>)
텍스트를 강조하는 태그입니다. <strong>은 강한 강조(굵게 표시), <em>은 이탤릭체로 표현되며 강조를 의미합니다.
<strong>중요한 텍스트</strong> <em>강조된 텍스트</em>
7. 구분선 태그(<hr>)
내용을 구분하기 위한 수평선을 삽입할 때 사용합니다.
<hr>
8. 구획 태그(<div>, <span>)
- <div>: 블록 요소로, 여러 요소를 그룹화하여 레이아웃을 구성할 때 주로 사용합니다.
- <span>: 인라인 요소로, 텍스트의 특정 부분을 스타일링하거나 구분할 때 사용합니다.
<div>
<p>이것은 하나의 블록입니다.</p>
</div>
<span>이것은 텍스트의 일부분입니다.</span>
3. 검색 엔진 최적화(SEO)와 HTML 태그의 역할
에드센스 승인을 받기 위해서는 HTML 문서의 구조와 콘텐츠가 잘 구성되어 있어야 하며, 특히 검색 엔진 최적화(SEO)가 중요합니다. <title>, <meta>, <h1>, <alt>와 같은 태그들은 검색 엔진이 웹 페이지를 이해하는 데 중요한 역할을 하며, 이를 적절히 사용함으로써 페이지의 가시성을 높일 수 있습니다.
