HTML에서 문서와 웹사이트 구조에 대해 알아보도록 하겠다.
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>
<!DOCTYPE html>: 문서 유형 선언으로, 브라우저에게 문서가 HTML5 문서임을 알려준다. 이 코드는 브라우저에게 문서의 버전을 알려주는 역할을 한다.
<html lang="ko">: HTML 문서의 루트 요소로, 웹 페이지의 언어를 정의한다. 여기서 lang="ko"는 콘텐츠가 한국어 임을 나타낸다.
<head>: 문서의 메타데이터, 제목, CSS 링크 등을 포함한다. 이 부분은 사용자에게 보이지 않지만, 브라우저에게 중요한 정보를 제공한다.
<meta charset="UTF-8">: 문서의 문자 인코딩을 UTF-8로 설정한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 반응형 웹 디자인을 위해 뷰포트 설정을 정의한다.
<title>: 웹사이트의 제목을 정의한다. 브라우저의 탭에 표시된다.
<body>: 웹사이트에 표시되는 모든 콘텐츠를 포함한다.
HTML 문서 내에서 웹사이트의 구조를 정의하기 위해 다양한 블록 라벨 요소를 사용할 수 있다.
예를 들어, <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> 등의 요소를 사용하여 웹 사이트의 다양한 부분을 구분할 수 있다.
이러한 요소들은 웹사이트의 레이아웃과 구조를 명확하게 정의하고, 검색 엔진과 사용자에게 콘텐츠의 의미를 전달하는 데 도움이 된다.
<header>: 웹 사이트의 전역 헤더를 정의하며, 로고, 제목, 네비게이션 메뉴 등을 포함할 수 있다. 페이지의 상단에 위치하며, 웹사이트의 브랜딩과 주요 탐색 요소를 나타낸다. 헤더는 웹사이트의 모든 페이지에서 일관되게 사용되어야 한다.
<header>
<p><img src="logo.png" alt="웹사이트 로고"></p>
<nav>
<ul>
<li><a href="home.html">홈</a></li>
<li><a href="about.html">소개</a></li>
<li><a href="contact.html">연락처</a></li>
</ul>
</nav>
</header>
<nav>: 웹사이트의 주요 탐색 기능을 포함한다. 메뉴 버튼, 링크, 탭 등을 사용하여 사이트의 주요 섹션으로 이동할 수 있는 링크를 제공한다. 보조 링크는 포함하지 않는다.
<nav>
<ul>
<li><a href="home.html">홈</a></li>
<li><a href="about.html">소개</a></li>
<li><a href="contact.html">연락처</a></li>
</ul>
</nav>
<main>: 페이지에서 고유한 콘텐츠를 포함한다. 이 요소는 페이지 당 한 번만 사용되어야 하며, <body> 요소 내에 직접 위치해야 한다. 이상적으로는 다른 요소 내에 중첩되지 않아야 한다.
<main>
<article>
<h1>블로그 글 제목</h1>
<p>블로그 글 내용...</p>
</article>
</main>
<footer>: 페이지의 하단에 위치하며, 저작권 정보, 연락처, 사이트맵 링크 등을 포함한다. 페이지의 끝 부분에 위치하며, 웹사이트의 일반적인 정보를 제공한다.
<footer>
<small>저작권 © 2024</small>
<ul>
<li><a href="privacy.html">개인정보 처리방침</a></li>
<li><a href="terms.html">이용 약관</a></li>
</ul>
</footer>'기타 > HTML&CSS' 카테고리의 다른 글
| HTML 디버깅: Chrome 개발자 도구를 활용한 문제 해결 (0) | 2024.04.20 |
|---|---|
| HTML 하이퍼링크에 대해서 (0) | 2024.04.20 |
| HTML 메타데이터: 웹 페이지 SEO 최적화하기 (0) | 2024.04.20 |
