| 1. aboutweb | 웹의 동작 원리(클라이언트·서버·HTTP), 도메인과 DNS, URL 구조, HTML·CSS·JS 의 역할 분담을 소개한다. |
| 2. 개발환경설정 | VSCode 설치(인스톨러·포터블), 필수 확장 프로그램, Emmet `lang` 변경 등 HTML 학습용 개발 환경 세팅을 다룬다. |
| 3. 문서구조 | HTML5기본구성 |
| 4. 문단과텍스트요소 | HTML5 기본 골격, 제목·문단·강조·하이퍼링크·이미지·목록 등 본문을 이루는 핵심 텍스트 태그와 모던 반응형 이미지를 정리한다. |
| 5. 링크요소 | `figure`/`figcaption`, 이미지맵(`map`/`area`), 네임앵커 등 이미지·앵커 기반 링크 요소를 예제와 함께 다룬다. |
| 6. 미디어요소 | `div`/`span`, 시맨틱 구조 태그, `audio`/`video`, `iframe`, `details`·popover 등 모던 미디어·디스클로저 요소를 정리한다. |
| 7. 테이블요소 | `table`/`tr`/`td` 기본 구조, `thead`/`tbody`/`tfoot` 구조화, `colgroup`, 셀병합(`rowspan`·`colspan`), 표 접근성을 다룬다. |
| 8. 폼요소 | `form`/`input`/`textarea`/`select`/`label` 폼 기본부터 모바일을 위한 `inputmode`·`enterkeyhint`·`datalist`·`autocomplete` 까지. |
| 9. dialog | `<dialog>` 태그로 모달을 구현하는 법 — 기본형, `::backdrop` 오버레이, `showModal()` API, 2025년 추가된 Light Dismiss 까지. |
| 10. 웹접근성 | WCAG 2.2 의 인식·운용·이해 원칙 — 대체 텍스트, 색상 대비, 키보드 접근성, `inert`, `<dialog>` aria-modal 등 모던 패턴 포함. |