HTML 텍스트 기초

기본적인 것: 제목과 단락

• HTML에서는 각 단락은 <p> 요소 안에 둘러싸여 있어야 한다.

<p>I am a paragraph, oh yes I am.</p>

• 각 제목도 heading 요소 안에 둘려싸여 있어야 한다.

<h1>I am the title of the story.</h1>

• heading 요소는 총 6개가 있다.

  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

구조화된 계층을 구현하기

• 한 이야기에서 <h1>은 이야기의 제목을 나타내고 <h2>는 각 장의 제목을 나타내고 <h3>는 각 장의 하위 절을 나타내는 형태로 구현한다.

<h1>The Crushing Bore</h1>

<p>By Chris Mills</p>

<h2>Chapter 1: The dark night</h2>

<p>It was a dark night. Somewhere, an owl hooted. The rain lashed down on the ...</p>

<h2>Chapter 2: The eternal silence</h2>

<p>Our protagonist could not so much as a whisper out of the shadowy figure ...</p>

<h3>The specter speaks</h3>

<p>Several more hours had passed, when all of a sudden the specter sat bolt upright and exclaimed, "Please have mercy on my soul!"</p>

• 구조들을 만들 때의 관례

  • 가급적이면 페이지 당 하나의 <h1> 만 사용해야 한다.
    • <h1>은 최상위에 있는 표제이며 나머지 다른 표제들은 계층적으로 이것 밑에 위치한다.
  • 각 표제들을 계층적으로 올바른 순서로 사용하라.
    • <h3>을 하위 표제로 사용하고 그 다음

      를 하위 표제의 하위로 사용하지 마라.

    • 이해하기 어려울 뿐더러 이상한 결과를 야기할 수 있다.
  • 6개의 Heading을 사용할 수 있지만 꼭 필요한 것이 아니라면 한 페이지에 3개 이상을 사용하지 않도록 하라.
    • 많은 목차 레벨을 가진 문서(예를 들어 너무 깊은 heading 계층)는 다루기 힘들고 탐색하기 어렵다.
    • 이러한 상황에서는 가능하다면 컨텐츠를 여러 페이지로 나누는 것이 바람직하다.

왜 구조가 필요할까?

• 웹 페이지를 보는 유저는 필요한 컨텐츠를 빠르게 훑어보는 경향이 있고 자주 heading만 읽기도 한다.
• 검색 엔진들은 당신의 페이지 내 heading을 페이지 검색 순위에 영향을 주는 중요한 키워드로 고려해 indexing 한다.
  • heading이 없다면, 검색엔진 최적화에 실패하게 된다.
  • SEO (Search Engine Optimization)
• 심각한 시각 장애인들은 웹페이지를 듣는다. 이때 heading을 읽어 문서의 개요를 제공하며 그들의 사용자들이 필요로 하는 정보를 빠르게 찾을 수 있도록 한다.
  • heading이 없다면 문서 전체를 읽어야 한다.
• 컨텐츠를 CSS로 꾸미거나 다른 동작을 위해 JavaScript를 사용하기 위해 컨텐츠를 감싸는 요소가 필요하다.

왜 Semantic이 필요 할까?

• Semantic(직역 : 의미를 담은, 의미론적인)은 우리 주변 어디에서나 사용된다.

• 어떤 것을 보면 그것의 기능은 무엇일지 알 수 있다.

  • 예 : 우리가 빨간 신호등을 '멈춤'으로, 초록 신호등을 '출발'로 인식

• 잘못된 semantic들이 적용될 경우 상황은 복잡해진다.

• 정확한 요소를 사용하고 있는지, 컨텐츠에 정확한 의미, 기능, 모습을 담았는지 확실히 해야 한다.

  • <h1> 요소 또한 텍스트에 "내 페이지 최상위 heading"의 역할로 감싸는 semantic 요소이다.

<h1>This is a top level heading</h1>

• 검색 엔진이나 screen reader들 등에 의미론적인 가치는 다양한 방식으로 사용

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

• <span> 요소는 의미가 없는 요소다.
• 컨텐츠에 추가적인 의미를 더하지 않고 CSS 를 적용하고 싶을 때 (혹은 JavaScript를 적용해 무언가를 하고 싶을 때) 이것을 사용한다.
  • semantic 가치가 없기에 CSS 적용으로 heading과 동일하게 보일지라도 heading에 맞는 가치를 얻을 수 없다.