텍스트, 이미지, 링크 및 목록

HTML은 여섯 단계의 제목을 제공합니다. 텍스트 크기를 바꾸는 것이 아니라 문서 개요를 만들기 위해 사용하세요. <h1>은 페이지 제목으로 페이지마다 한 번 사용하고, <h2>는 주요 영역에, <h3>은 하위 영역에 사용하는 식으로 이어 갑니다.

<p> 요소는 텍스트 단락을 감쌉니다. 브라우저는 위아래에 자동으로 여백을 추가합니다. <br>은 꼭 필요한 경우에만 사용하세요. 주소나 시처럼 의미 있는 줄바꿈에 사용하고, 단락 사이의 여백을 만드는 용도로는 사용하지 마세요.

인라인 요소를 사용하여 텍스트에 의미를 부여하세요. <strong>은 중요한 텍스트(굵게), <em>은 강조(기울임), <code>는 코드 조각, <mark>는 강조 표시된 텍스트, <small>은 작은 글씨에 사용합니다.

<img> 요소는 이미지를 삽입합니다. src 속성은 URL을 지정하고, alt는 화면 낭독기와 이미지 로드에 실패했을 때 사용할 대체 텍스트를 제공합니다. 항상 의미 있는 alt 값을 포함하세요.

대체 텍스트는 이미지의 내용과 목적을 전달해야 합니다. 장식용 이미지(여백용 이미지나 장식 목적으로만 사용되는 아이콘)에는 alt=""(빈 문자열)을 사용하여 화면 낭독기가 건너뛰도록 하세요. 절대 alt="image of"라고 쓰지 말고, 이미지에 무엇이 표시되는지만 설명하세요.

<a>(앵커) 요소는 하이퍼링크를 만듭니다. href 속성은 목적지 URL을 설정합니다. 링크 텍스트는 목적지를 설명해야 하며, 절대 ‘여기를 클릭’이라고 쓰지 마세요.

target="_blank"를 사용하여 새 탭에서 링크를 열 때는 항상 rel="noopener noreferrer"를 추가하세요. 그렇지 않으면 열린 페이지가 링크를 연 창 객체에 접근할 수 있으며, 이는 역방향 탭 하이재킹이라는 보안 취약점으로 이어집니다.

항목의 순서가 중요하지 않을 때는 <ul>(순서 없는 목록)을 사용하세요. 기능, 재료, 탐색 링크 등에 적합합니다. 각 항목은 <li>입니다. 브라우저는 기본적으로 글머리 기호를 표시하지만, 거의 항상 CSS로 스타일을 지정합니다.

순서가 중요할 때는 <ol>(순서 있는 목록)을 사용하세요. 자습서의 단계, 순위, 지침 등에 적합합니다. 항목에는 자동으로 번호가 매겨집니다. 번호 매기기를 제어하려면 start와 reversed 속성을 사용하세요.

<dl>(설명 목록)은 용어와 그 정의 또는 설명을 묶습니다. 용어집, 메타데이터(작성자/날짜), 키-값 쌍에 사용하세요. <dt>는 용어이고 <dd>는 설명입니다.

목록을 중첩하여 계층 구조를 나타낼 수 있습니다. 자식 <ul> 또는 <ol>을 부모 <li> 요소 안에 배치하세요. 단순히 들여쓰기하려고 중첩하지 말고 CSS를 사용하세요.

문서 구조에는 제목 요소를, 단락에는 p를, 이미지에는 의미 있는 alt 텍스트와 함께 img를, 탐색에는 설명이 분명한 링크 텍스트와 함께 a를, 목록 콘텐츠에는 ul/ol/dl을 사용하세요. 의미 구조를 갖춘 HTML은 접근성이 높고 기계가 읽을 수 있습니다.