Category: HTML

키보드 초점이 표시된 웹페이지와 휠체어 사용자 일러스트

HTML Tutorial / Accessibility Basics: Headings, Links, Images, and Keyboard

Review the meaning and keyboard use of headings, links, images, and forms. Practice manual testing on a small page with a skip link, persistent field instructions, and visible focus.

세 개의 웹페이지가 링크로 연결된 작은 사이트 일러스트

HTML Tutorial / Build a Small Multipage Website

Build Home, About, and Contact pages with shared navigation and distinct metadata. Separate contact-input practice from a receiving service and check navigation, validation, and keyboard completion criteria.

웹 문서를 돋보기와 점검표로 살펴보는 일러스트

HTML Tutorial / Find Errors and Validate an HTML Document

Find markup issues with the Nu HTML Checker and distinguish validation from browser behavior. Compare a complete duplicate-ID example with its correction and test each label association.

닫힌 항목과 펼쳐진 항목이 쌓여 있는 일러스트

HTML Tutorial / Create Expandable Content with details and summary

Create keyboard-operable expandable content with details and summary, and decide when to start it open or show content directly.

오디오 파형과 빈 비디오 화면을 나란히 놓은 일러스트

HTML Tutorial / Embed Audio, Video, and External Content

Use audio, video, iframe, captions, and alternative links appropriately. Responsive CSS and a local iframe exercise help you check paths, aspect ratios, and narrow-screen layout.

탭 제목과 본문 설명 영역을 갖춘 웹 문서 일러스트

HTML Tutorial / Set the Page Title, Description, Language, and Encoding

Place html lang and the head's title and meta settings correctly. Compare their purposes and checks, then troubleshoot UTF-8 file encoding and server response headers.

html tutorial how to add guidance text to a form 01

HTML Tutorial / Add Placeholder Text to Form Fields

Learn how to add placeholder hints to HTML input and textarea fields without confusing them with labels or initial values. Includes a complete form example, required-field checks, and an explanation of empty values in submitted data.

제목 탭이 있는 두 입력 필드 그룹 일러스트

HTML Tutorial / Explain Forms with fieldset, legend, and autocomplete

Group questions with fieldset, legend, and distinct radio names, and describe input purposes with autocomplete. Test two independent groups and compare common autofill tokens.

오류와 정상 상태를 다른 테두리 색으로 나타낸 입력 필드 일러스트

HTML Tutorial / Form Validation with required, Length, and Range Limits

Apply built-in required, length, and numeric constraints, test error states, and understand why server-side validation remains necessary.

체크박스, 라디오 버튼, 날짜와 숫자 입력 필드 일러스트

HTML Tutorial / Choose Input Types for Email, Numbers, Dates, and Choices

Choose email, number, date, checkbox, and radio inputs by their purpose. A complete form lets you compare date values, required groups, and the entries omitted by unselected controls.