3. 문서구조
HTML5기본구성
1. HTML5기본구성
🔗MDN
head요소에 포함할수 있는 요소들
| 요소명 | 설명 |
|---|---|
<meta> | HTML 문서의 설명, 키워드 문서의 작성자 지정 |
<title> | HTML 문서의 제목 지정 |
<link> | 외부 CSS 파일을 연결할때 사용 |
<style> | 내부 CSS 를 정의할때 사용 |
<script> | 자바스크립트를 외부, 내부에 정의할때 사용 |
2. 유효성검사
- HTML 유효성검사 : https://validator.w3.org/
- CSS 유효성 검사 : https://jigsaw.w3.org/css-validator/
3. 기본규칙
- 요소는 시작태그와 종료태그가 있다
- 요소는 제대로 중첩되어야 한다.
- 주석은
<!-- 주석 내용 -->으로 작성한다 (브라우저는 이 부분을 화면에 표시하지 않는다)
4. 시멘틱 마크업 VS 논리적 순서 마크업
1. 시멘틱 마크업
- 마크업시 유의미한 태그의 사용 ex0-2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
~~타이틀~~
<h1>타이틀</h1>
</body>
</html>
2. 논리적 마크업
Info: 👁️🗨️ 논리적 순서 마크업은 접근성과 관련이 있습니다. 웹접근성 엿보기 문서
3. 블록요소 VS 인라인 요소
태그는 블록과 인라인 요소 두가지의 유형이 있습니다.
| 유형 | 특징 |
|---|---|
| 블록요소 | 줄바꿈이 일어난다 |
| 블록요소는 인라인요소를 포함할수 있다. | |
| 블록요소는 블록요소를 포함할수 없다. (div는 제외) | |
| EX ) p, div, h1~h6, 목록태그, 테이블태그, form | |
| 인라인요소 | 줄바꿈이 안된다. |
| 인라인요소는 인라인요소를 포함할수 있다. | |
| 인라인요소는 블록요소를 포함할수 없다. | |
| EX ) span, a, input, b, i, strong, img |
ex1-1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>블록 레벨 요소</title>
</head>
<body>
<h1>블록 레벨 요소</h1>
<h2>블록 레벨 요소 성질</h2>
<p>줄 바꿈이 생깁니다.</p>
</body>
</html>
ex1-2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>인라인 요소</title>
</head>
<body>
<strong>인라인 요소</strong>
<span>인라인 요소는 한 줄로 출력됩니다.</span>
</body>
</html>
ex1-3_before.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>블록 레벨 요소와 인라인 요소</title>
</head>
<body>
<span>인라인레벨<h1>블록 레벨 요소</h1></span>
</body>
</html>
ex1-3_after.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>블록 레벨 요소와 인라인 요소</title>
</head>
<body>
<div>인라인레벨<h1>블록 레벨 요소</h1></div>
</body>
</html>
Info: 👁️🗨️ HTML 콘텐츠 모델 (현행 표준은 WHATWG HTML Living Standard) 🔗https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content
5. ▪ 2026 보완: <search> 요소
Info: 👁️🗨️ HTML Living Standard 에 2023 년 추가, 2024 년 Baseline 진입. 검색 폼·검색 결과를 감싸는 시맨틱 컨테이너.
<nav> 가 주 메뉴 의 시맨틱이라면 <search> 는 검색 영역 의 시맨틱이다. 기존엔 <form role="search"> 로 ARIA 역할을 직접 붙였지만, 이제 태그 한 줄로 끝난다.
<search>
<form action="/search" method="get">
<label for="q">사이트 검색</label>
<input id="q" name="q" type="search" placeholder="검색어 입력">
<button type="submit">검색</button>
</form>
</search>
| 비교 | 기존 패턴 | 모던 (<search>) |
|---|---|---|
| 마크업 | <form role="search">…</form> | <search><form>…</form></search> |
| 시맨틱 의미 | ARIA 로 보강 | 태그 자체가 시맨틱 |
| 스크린리더 인식 | role 명시 필요 | 자동 인식 |
Info: 💡
<search>는 주 검색 뿐 아니라 문서 내 필터링·검색 결과 묶음 에도 사용 가능. 한 페이지에 여러 개 둘 수 있다.
주석
HTML Living Standard — HTML 을 만드는 사람들이 정한 공식 규칙서 예요. 예전엔 "HTML5", "HTML 5.1" 처럼 책 새 판 찍듯 버전을 매겼는데, 지금은 살아있는 문서(Living) 라고 해서 매일매일 조금씩 업데이트돼요. 그래서 "최신 HTML 규칙은 뭐야?" 가 궁금하면 이 문서 한 곳만 보면 돼요. 관리하는 단체 이름은 WHATWG (왓웨지) — 이름까진 안 외워도 괜찮아요.
Baseline — "이 기능, 이제 안심하고 써도 돼요 ✅" 표시예요. 새 HTML 기능이 나와도 어떤 브라우저는 지원하고 어떤 브라우저는 못 알아들으면 실무에서 쓰기 무서워요. 그런데 4 대 브라우저(Chrome · Edge · Firefox · Safari) 가 모두 지원하기 시작하면 그때 Baseline 마크를 받아요. 즉 2024 Baseline = "2024 년부터 4 대 브라우저 모두에서 작동하는 기능". 이 표시가 붙은 건 마음 놓고 코드에 써도 됩니다.