HTML이 웹 문서의 구조와 의미를 만드는 언어임을 이해합니다.
HTML은 제목, 문단, 링크처럼 콘텐츠의 역할을 태그로 표시합니다. 브라우저는 이 구조를 읽어 화면을 만들고 검색엔진과 화면 읽기 도구도 같은 의미를 사용합니다.
예제는 main 하나에 h1, p, button을 담았습니다. main은 문서의 주된 콘텐츠, h1은 그 안의 가장 높은 제목, button은 누를 수 있는 컨트롤이라는 뜻을 갖습니다. 초록 배경과 둥근 모서리는 CSS 탭의 button 규칙이 입힌 모양이고, 이 button은 form 밖에 있어 눌러도 아무 일도 일어나지 않습니다.
브라우저는 잘못된 마크업을 만나도 멈추지 않고 HTML 표준에 정해진 복구 규칙대로 읽어 냅니다. 예를 들어 닫지 않은 p는 다음 p나 h2, div가 시작되는 지점에서 자동으로 닫힙니다. 그래서 화면이 멀쩡해 보여도 의도와 다른 트리가 만들어질 수 있고, W3C 검사기 같은 도구가 이런 오류를 따로 찾아 줍니다.
태그를 글자 크기나 모양만 보고 고르면 문서의 의미가 흐려집니다. 구조는 HTML, 표현은 CSS로 나눠 생각하세요.
직접 바꿔보세요h1을 사이트의 주제로 바꾸고 두 번째 문단을 추가해보세요.