У HTML розрізняються шість різних рівнів заголовків. Їх визначають за допомогою елементів h1 до h6.
<h1>Рівень заголовка 1</h1> <h2>Рівень заголовка 2</h2> <h3>Рівень заголовка 3</h3> <h4>Рівень заголовка 4</h4> <h5>Рівень заголовка 5</h5> <h6>Рівень заголовка 6</h6>
Тут h1 представляє найбільший, а h6 - найменший заголовок. З HTML5, до речі, були представлені додаткові можливості визначення заголовків, які будуть показані пізніше.
Різні рівні заголовків допоможуть вам при структуруванні текстів. Орієнтуйтеся, наприклад, на книги. Там є заголовок книги, який можна порівняти з вмістом елементу h1. Тому на веб-сторінці повинен бути лише один елемент h1. Інші тексти потім структуруються за допомогою інших рівнів. Після головного заголовка йде h2. Підрозділи h2 вже позначаються елементом h3.
До речі: Розмір рівнів заголовків спочатку встановлюється браузерами. Проте ви також можете явно визначити їх за допомогою CSS. Про це далі.
<h1>PSD-Tutorials.de</h1>
За таким визначенням заголовка автоматично вставляється рядок для переносу та відстань до наступних елементів.
Обов'язково враховуйте, що цифри в початковому тегу та закривальному тезі повинні бути однаковими.
Визначення абзаців
Окрім заголовків, тексти також складаються з абзаців. Такі абзаци можна дуже легко визначити у HTML. Для цього використовується елемент p. Отже, абзац, позначений таким чином, має вихідний відступ від наступних елементів. Цей відступ можна контролювати за допомогою CSS.
Ось приклад для двох визначень абзаців:
<p>Це абзац</p> <p>Це також абзац</p>
При використанні p ви уможливлюєте автоматичний перенос тексти в звичайних абзацах, списки тощо, якщо він, наприклад, ширший за ширину вікна браузера. Це зручно, оскільки таким чином уникнеться зайвого горизонтального прокручування. Зокрема, ви можете додатково переносити текст у будь-якому місці. Для цього використовується елемент <br />. Зверніть увагу, що це так званий автономний тег, тобто він не має власного закривального тегу, але фактично закривається сам себе.
<p>Yeh, this one's for the workers who toil night and day<br /> By hand and by brain to earn your pay<br /> Who for centuries long past for no more than your bread<br /> Have bled for your countries and counted your dead</p>
При використанні <br /> не має значення, чи він знаходиться у кінці рядка чи у власному рядку. Результат у обох випадках буде таким самим:
Ще раз повернемося до автоматичних переносів тексту, які вставляються браузерами. Це часто проблематично, оскільки неможливо контролювати, де саме відбудеться перенос. Це може призвести до небажаних результатів. Типовий приклад - це номери версій.
iPhone 5
Зазвичай це має бути в одному рядку. Тому перенос рядка між iPhone та 5 тут недопустимий.
iPhone 5
Цьому можна запобігти за допомогою так званих нерозривних пробілів. Наприклад:
Цим рядком визначається нерозривний пробіл. У браузері він відображається як звичайний пробіл: 
Щоб це працювало, не вставляйте жодних пробілів у вихідний текст. Це не спрацює, якщо вийде таке:
Форматований текст
Можуть виникати ситуації, коли текст слід виводити так само точно, як він впорядкований у вихідному коді. Типовим прикладом для цього є лістинги програм, які часто зустрічаються тут на PSD-Tutorials.de.
Для таких випадків HTML дозволяє визначення областей форматованого тексту. При цьому відступи враховуються браузером так, як вони вказані у вихідному коді. Наступний приклад показує, як це реалізується:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>"Hallo, Welt!" in PHP</h1> <pre> <?php echo "Hallo, Welt\\n"; ?> </pre> </body> </html>
Уривок, який слід відображати як форматований текст, визначається всередині елементу pre. Вставляйте відступи тощо точно так, як це має бути відображено вкінцевому рахунку браузером.
При перегляді прикладного коду вам навмолодь будуть помічені дивні символи <?php та ?>. У браузері вони будуть відображені як <?php та ?>. Використовувана в вихідному коді варіант називається маскуванням символів. Це необхідно, коли не потрібно, щоб браузер інтерпретував HTML-власні символи. Якщо ви введете прямо у вихідний код <?php, то браузер припустить, що це відкривається область PHP. Тому символи маскуються.
• Замініть символ & на рядок &
• Замініть символ < на рядок <
• Замініть символ > на рядок >
• Замініть лапки на "
До речі, елемент pre підходить не лише для відображення лістингів програм. Також табличні дані можна легко подати саме так. Наступний приклад показує типову таблицю, що була реалізована виключно пробілами всередині елементу pre.
<pre> Zielort Abfahrt Ankunft Bahnsteig ---------------------------------------------------------------- Berlin 10:23 14:30 2 Hamburg 11:09 13:20 13 München 12:04 15:45 1a </pre>
Вигляд в браузері виглядає наступним чином:
Фактично, браузери враховують пробіли, які ви визначили у вихідному тексті. Показана варіант таблиці працює досить добре. Для невеликих таблиць це, на мій погляд, є досить практичним. Однак якщо обсяг даних стає більшим, вам слід звертатися до класичних HTML-таблиць. Як їх визначити, ви дізнаєтеся також у цьому циклі.
