2장 콘텐츠 요소

텍스트 링크 이미지 구성 지도

소개 페이지 하나도 제목, 단락, 목록, 링크, 이미지가 각자 다른 의미를 맡을 때 읽기 쉬운 문서가 됩니다.

01

Heading

h1부터 h6까지 문서의 큰 흐름과 하위 주제를 표시합니다.

02

Paragraph

p와 br은 문장 묶음과 줄바꿈을 필요한 만큼만 표현합니다.

03

Anchor

a 태그는 다른 문서나 위치로 이동하는 연결점을 만듭니다.

04

Image

img 태그는 src로 이미지 위치를 가리키고 alt로 대체 설명을 남깁니다.

텍스트 서식

strong, em 같은 태그는 꾸밈보다 의미 강조에 가깝게 사용합니다.

목록

ul, ol, li는 관련 항목을 묶고 순서 유무를 분명히 합니다.

링크 안전

새 창 링크는 목적과 관계를 분명히 하고 텍스트만으로 이동 대상을 알립니다.

이미지 대체

alt는 파일명 반복이 아니라 이미지가 전달하는 정보를 담습니다.

구성 순서

제목으로 구조를 잡고 문단, 목록, 링크, 이미지를 필요한 위치에 배치합니다.

읽기 점검

이미지를 보지 못해도 핵심 정보가 텍스트로 전달되는지 확인합니다.

텍스트 링크 이미지 구성 지도

짧은 소개 페이지에서 각 콘텐츠 요소를 이유 있게 선택합니다.