표준 HTML 구조
HTML 문서는 W3C(World Wide Web Consortium)에서 정한 표준을 따라 작성됩니다. 표준 구조는 문서의 일관성과 가독성을 높이고, 브라우저가 문서를 올바르게 해석할 수 있도록 도와줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<header>
<!-- 웹사이트의 헤더, 네비게이션 등을 포함 -->
</header>
<main>
<!-- 웹 문서의 주요 콘텐츠 -->
</main>
<footer>
<!-- 웹사이트의 푸터 정보 -->
</footer>
</body>
</html>
1. <!DOCTYPE html>
문서 유형 선언 : HTML5 문서를 선언합니다. 브라우저가 HTML5 표준을 따르도록 지시하는 역할을 합니다.
2. <html> 태그
- HTML 문서의 루트 요소 : 모든 HTML 콘텐츠를 포함합니다.
- lang 속성 : 문서의 언어를 지정합니다. ex. lang="en" (영어), lang="ko" (한국어)
3. <head> 태그
- 메타데이터를 포함 : 문서에 대한 정보를 브라우저나 검색 엔진에 제공하며, 다음과 같은 요소를 포함할 수 있습니다:
- <meta charset="UTF-8"> : 문서의 문자 인코딩을 UTF-8로 설정합니다. UTF-8은 대부분의 언어를 지원하는 표준 인코딩입니다.
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> : 반응형 웹 디자인을 위해 화면 크기를 설정합니다.
- <title> : 브라우저 탭에 표시되는 문서 제목을 지정합니다.
- 외부 리소스 링크 : CSS 파일, JavaScript 파일 등을 연결합니다.
4. <body> 태그
- 문서의 본문 : 사용자가 브라우저에서 볼 수 있는 실제 콘텐츠를 포함합니다.
- 텍스트, 이미지, 링크, 동영상, 폼 등의 요소를 포함할 수 있습니다.
- 구조화된 섹션
- <header> : 로고, 네비게이션 메뉴와 같은 문서 상단 정보 포함
- <main>
- 문서의 주요 콘텐츠가 들어가는 영역.
- HTML5 표준에서 추가된 태그로, 검색 엔진 최적화에 도움
- <footer> : 문서의 하단 정보(저작권, 연락처 등) 포함
HTML 구조 주요 요소
HTML 문서는 다양한 태그로 구성됩니다.
1. 제목 (Heading)
- <h1>부터 <h6>까지의 태그로 제목을 표시합니다.
- <h1>은 가장 중요한 제목, <h6>은 덜 중요한 제목입니다.
<h1>페이지 제목</h1>
<h2>섹션 제목</h2>
<h3>하위 섹션 제목</h3>
2. 단락 (Paragraph)
- <p> 태그를 사용하여 단락을 작성합니다.
<p>이것은 단락입니다.</p>
3. 링크 (Anchor)
- <a> 태그를 사용하여 다른 페이지나 리소스로 연결합니다.
<a href="https://example.com">Example 사이트</a>
4. 이미지 (Image)
- <img> 태그를 사용하여 이미지를 삽입합니다.
- src 속성 : 이미지 경로를 지정합니다.
- alt 속성 : 이미지를 설명하는 대체 텍스트를 제공합니다.
<img src="image.jpg" alt="예제 이미지">
5. 리스트 (List)
- 순서가 있는 리스트 : <ol> 태그 사용
- 순서가 없는 리스트 : <ul> 태그 사용
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ul>
<ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ol>특징
- 호환성 : 모든 브라우저에서 동일하게 동작
- 접근성 : 스크린 리더와 같은 도구가 콘텐츠를 더 잘 이해
- 스크린 리더 (Screen Reader) : 화면에 표시된 텍스트, 이미지 설명, 버튼 등의 내용을 음성으로 읽어주거나, 점자 디스플레이로 출력
- SEO : 검색 엔진(ex. 구글, 네이버 등)이 문서의 구조를 쉽게 파악
- 유지보수성 : 구조가 명확해 관리와 확장이 쉬움
출처
OpenAI의 ChatGPT (https://openai.com)
'Front-end' 카테고리의 다른 글
| 정적 페이지와 동적 페이지 (0) | 2025.10.04 |
|---|---|
| 부트스트랩 (Bootstrap) feat. Card 컴포넌트 (0) | 2025.02.04 |
| HTML VS CSS (1) | 2025.02.03 |