HTML에서는 6개의 서로 다른 제목 수준을 구분합니다. 이는 h1에서 h6 요소로 정의됩니다.
<h1>헤딩 레벨 1</h1> <h2>헤딩 레벨 2</h2> <h3>헤딩 레벨 3</h3> <h4>헤딩 레벨 4</h4> <h5>헤딩 레벨 5</h5> <h6>헤딩 레벨 6</h6>
여기서 h1은 가장 큰 제목, h6은 가장 작은 제목을 나타냅니다. HTML5에는 제목 정의에 대한 추가 옵션도 도입되었으며 나중에 설명하겠습니다.
다양한 제목 수준은 텍스트를 구성하는 데 도움이 됩니다. 책을 예로 들어 보겠습니다. h1 요소의 콘텐츠와 비슷한 책 제목이 있습니다. 따라서 HTML 페이지당 하나의 h1 요소만 삽입해야 합니다. 나머지 텍스트는 다른 레벨에 의해 구조화됩니다. 메인 제목 뒤에는 h2가 이어집니다. 그런 다음 h2의 하위 챕터는 h3 요소로 레이블이 지정됩니다.
참고: 제목 레벨의 크기는 처음에 브라우저에 의해 결정됩니다. 그러나 CSS를 사용하여 명시적으로 직접 결정할 수 있습니다. 이에 대해서는 나중에 자세히 설명합니다.
제목 수준은 사용하기 매우 쉽습니다. h 뒤에 원하는 레벨 번호를 입력하면 됩니다.
<h1>PSD-Tutorials.com</h1>
이렇게 정의한 제목 뒤에는 줄 바꿈과 다음 요소에 대한 공백이 자동으로 삽입됩니다.
도입 태그와 종료 태그의 번호가 동일한지 확인하세요.
단락 정의하기
제목 외에도 텍스트는 자연스럽게 단락으로 구성됩니다. 이러한 단락은 HTML에서도 매우 쉽게 구현할 수 있습니다. 이를 위해 p 요소가 사용됩니다. 이러한 방식으로 레이블이 지정된 단락은 본질적으로 후속 요소와 일정한 거리를 갖습니다. CSS를 사용하여 이 단락의 크기를 조절할 수 있습니다.
다음은 두 단락 정의의 예입니다:
<p>이것은 단락입니다</p> <p>이것도 단락입니다</p>
브라우저에서 살펴보면 다음 이미지가 표시됩니다:
참고로 HTML5에서는 열린 단락을 <p>을 통해 다시 닫아야 하는 것은 아닙니다. 그러나 명확성을 위해 실제로는 닫는 &p;/p> 를 사용하겠습니다.
수동 줄 바꿈
단락, 목록 등의 연속 텍스트는 예를 들어 브라우저 창보다 넓은 경우 브라우저에 의해 자동으로 줄 바꿈됩니다. 이는 불필요한 가로 스크롤을 피할 수 있어 실용적입니다. 그러나 언제든지 텍스트를 줄 바꿈할 수도 있습니다. 이를 위해 <br /> 요소가 사용됩니다. 이것은 소위 독립형 태그, 즉 닫는 태그가 없고 스스로 닫히는 태그입니다.
<p>예, 이것은 밤낮으로 수고하는 노동자들을 위한 것입니다<br /> 손과 머리로 당신의 임금을 벌기 위해<br /> 지난 수세기 동안 당신의 빵보다 더 많은 것을 위해<br /> 당신의 나라를 위해 피를 흘리고 당신의 죽음을 세어온 사람들</p>
를 사용할 때 줄 끝에 있는지 또는 자체 줄에 있는지는 중요하지 않습니다. 결과는 두 경우 모두 다음과 같이 표시됩니다:
브라우저에서 삽입하는 자동 줄 바꿈으로 돌아갑니다. 이러한 경우 줄 바꿈이 최종적으로 삽입되는 위치를 제어할 수 없기 때문에 문제가 되는 경우가 많습니다. 이로 인해 바람직하지 않은 결과가 발생할 수 있습니다. 버전 번호가 대표적인 예입니다.
iPhone 5
이것은 일반적으로 한 줄에 있어야 합니다. 따라서 줄 바꿈은 iPhone과 5 사이에 있으면 안 됩니다.
iPhone 5
소위 보호 공백을 사용하면 이를 방지할 수 있습니다. 예시입니다:
이 문자열은 이러한 보호된 공백을 정의합니다. 브라우저 자체에서는 일반 공백으로 표시됩니다: 
원하는 대로 작동하려면 소스 텍스트에 공백을 삽입하지 않아야 합니다. 이와 같은 것은 작동하지 않습니다:
미리 서식이 지정된 텍스트
소스 텍스트에 배열된 그대로 텍스트를 출력하고 싶은 경우가 있을 수 있습니다. 대표적인 예로 PSD-Tutorials.de에서 자주 볼 수 있는 프로그램 목록이 있습니다.
이러한 목적을 위해 HTML에서는 미리 서식이 지정된 텍스트 섹션을 정의할 수 있습니다. 그러면 들여쓰기는 소스 코드에 표시되는 대로 브라우저에서 고려됩니다. 다음 예는 이를 구현하는 방법을 보여줍니다:
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>"Hello, world!" in PHP</h1> <pre> <?php echo "Hello, world\\n"; ?> </pre> </body> </html>
미리 서식이 지정된 텍스트로 표시할 구절은 pre 요소 내에 정의됩니다. 여기에 들여쓰기 등을 최종적으로 브라우저에 표시되어야 하는 대로 정확하게 삽입합니다.
예제 코드를 보면 <?php 및 ?> 라는 이상한 문자가 보일 수 있습니다. 브라우저에서는 <?php 및 ?> 로 표시됩니다. 소스 코드에 사용된 변형을 문자 마스킹이라고 합니다. 이는 브라우저에서 HTML 문자를 해석하지 못하게 하려는 경우에 필요합니다. 소스 코드에 직접 <?php를 입력하면 브라우저는 해당 문자를 여는 PHP 영역으로 간주합니다. 그래서 문자를 마스킹하는 것입니다.
- 문자 & amp; 를 문자열 & amp;로 바꿉니다;
- 문자를 문자열 & amp;로 바꿉니다;
- 문자를 > 문자 문자열 >로 바꿉니다 ;
- 거꾸로 쉼표를 "로 바꿉니다;
참고로, pre는 프로그램 목록을 표시하는 데만 적합한 것은 아닙니다. 표 형식의 데이터도 이 방법으로 쉽게 표시할 수 있습니다. 다음 예시는 pre 요소 내에 공백만 사용하여 구현한 일반적인 표를 보여줍니다.
<pre> 목적지 출발 도착 플랫폼 ---------------------------------------------------------------- 베를린 10:23 14:30 2 함부르크 11:09 13:20 13 뮌헨 12:04 15:45 1a </pre>
브라우저의 결과는 다음과 같습니다:
브라우저는 실제로 소스 텍스트에서 정의한 공백을 고려합니다. 그런데 표시된 테이블 변형은 꽤 잘 작동합니다. 작은 테이블에도 실용적입니다. 그러나 데이터 세트가 더 광범위해지면 클래식 HTML 테이블로 돌아가야 합니다. 물론 이 시리즈에서 이러한 테이블을 어떻게 정의할 수 있는지 알아볼 수도 있습니다.
