HTML 텍스트

제목과 단락

제목

heading 요소에는 6개가 있다: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. 각 제목은 heading 요소로 둘러싸여 있어야 한다.

단락

각 단락은 <p>으로 둘러싸여 있어야 한다.

예시:

<h1>
    Main title of this.
</h1>
<p>
    by gartenh
</p>
<h2>
    Subtitle 1
</h2>
<h3>
    Subtitle 2
</h3>
<h4>
    Subtitle 3
</h4>
<h5>
    Subtitle 4
</h5>
<h6>
    The smallest subtitle
</h6>

구조화가 필요한 이유

• 유저 편의: 제목 훑어볼 수 있음
• 검색 순위에 영향
• 시각 장애인들을 위한 screen reader 서비스에서 개요 읽어준다
• 컨텐츠를 꾸미거나(CSS) 동적으로 만들기 위해서는(JavaScript) 컨텐츠를 감싸는 요소 필요

Semantic이 필요한 이유

<h1>
    a top level heading
</h1>

위는 브라우저에서 기본적으로 사용하는 heading이다. 이것은 글씨체가 커져서 제목처럼 보이게 될 것이고, 의미론적(Semantic)으로도 의미가 있다. 검색 엔진이나 screen reader 등에서도 이를 제목으로 인식할 것이다.

<span style="font-size: 32px; margin: 21px 0;">Seems like a top level heading</span>

위는 글씨 폰트를 키운 것이다. 이는 글씨체가 커서 제목처럼 보일 수는 있으나, 의미론적인 의미는 없다. 검색 엔진이나 screen reader는 이를 제목으로 인식하지 못할 것이다.

이처럼 semantic을 이용하면, 가시적인 것뿐만 아니라 다양한 장점이 있으므로 Semantic하게 만드는 것을 권장한다.

Lists

순서 없는 리스트(Unordered List)

리스트 전체를 <ul>요소로 감싸고, 리스트 항복 각각을 <li>태그로 감싸준다.

<ul>
    <li>MITO</li>
    <li>Technicolor Daydream</li>
    <li>LILAC</li>
</ul>

결과물:

순서 있는 리스트(Ordered List)

순서 있는 리스트의 <ul> 대신에 <ol>을 사용한다.

<ol>
    <li>Study hard</li>
    <li>Review</li>
    <li>Do something amazing!</li>
</ol>

결과물:

Nesting lists(리스트 내부의 리스트)

<ol>
    <li>Pat shrimp dry and season with salt</li>
    <li>Warm up the following:
        <ul>
            <li>Extra Virgin Olive Oil</li>
            <li>Garlic</li>
            <li>Red Pepper Flakes</li>
        </ul>
    </li>
    <li>Cook the shrimp</li>
</ol>

위와 같은 방식으로 <li></li> 사이에 리스트를 넣어주면 된다.

중요와 강조

중요(emphasis)

<em></em>요소: 특정 단어에 강세를 두고 발음해 의미를 다르게 표현하는 것과 유사하다. screen scanner에서 다른 톤의 목소리로 읽어주며, 가시적으로는 이탤릭체로 보여진다. 하지만 단순히 이텔릭체를 사용하기 위해서라면 <span>요소에 CSS를 추가하거나 <i>요소를 사용하는 것이 좋다.

강조(Strong importance)

<strong></strong>: 특정 단어를 강조하기 위해 사용한다. screen scanner에서 다른 톤의 목소리로 읽어주며, 가시적으로는 굵은 글씨로 보여진다. 하지만 단순히 이텔릭체를 사용하기 위해서라면 <span>요소에 CSS를 추가하거나 <b>요소를 사용하는 것이 좋다.

기타 텍스트들

굵은 글씨, 기울어진 글씨, 밑줄 등

<b>, <i>, <u> 는 CSS가 지원되지 않는 경우에 굵은 글씨, 기울어진 글씨, 밑줄을 표현하기 위해 쓰이나, 의미론적으로 효용이 없었다.

HTML5에서는 이들은 의미론적으로 재정립했다.

<b>: 주요 단더, 제품 이름, 주요 문장 등을 전달

<i>: 외래에, 분류학 명칭, 전문용어, 생각 등의 의미를 전달

<u>: 적절한 이름, 잘못된 철자 등을 전달(사람들은 밑줄을 하이퍼링크와 연관시키는 경향이 있다)