Якщо відкрити будь-яку веб-сторінку, то вона буде містити в собі типові елементи, які не змінюються від виду і напрямку сайту. У прикладі 1 показаний код простого документа, що містить основні елементи.
Приклад 1. Вихідний код веб-сторінки
See the Pen
dyPNBBw by Sofiia (@sofiia19)
on CodePen.
Скопіювати вміст даного прикладу і збережіть його в папці c:\www\ під ім'ям example2.html. Після цього запустіть браузер і відкрийте файл через пункт меню Файл> Відкрити файл (Ctrl + O). У діалоговому вікні вибору документа вкажіть файл example2.html.
Далі розберемо окремі рядки нашого коду.
<!DOCTYPE>
Елемент <!DOCTYPE> призначений для вказівки типу поточного документа - DTD (document type definition, опис типу документа). Це необхідно, щоб браузер розумів, як слід інтерпретувати поточну веб-сторінку, адже HTML існує в декількох версіях - сучасний HTML5 або застарілі HTML4 і XHTML. Щоб браузер «не плутався» і розумів, згідно яким стандартом відображати веб-сторінку і необхідно в першому рядку коду задавати <!DOCTYPE>.
Оскільки ми в подальшому будемо працювати тільки з HTML5, то нам буде потрібно тільки один короткий і сучасний доктайп.
Ми згадували, що імена елементів можна писати маленькими і великими літерами. До <! DOCTYPE> це правило теж відноситься і його можна записувати по різному. Проте, традиційно ім'я цього елемента пишеться у верхньому регістрі.
<html>
Тег <html> визначає початок HTML-документа, всередині нього знаходиться «голова» (<head>) і «тіло» документа (<body>).
<meta charset=“utf-8”>
Елемент <meta> є універсальним і додає цілий клас можливостей, зокрема, за допомогою метатега, як узагальнено називають цей елемент, можна змінити кодування сторінки, додати ключові слова, опис документа і багато іншого, іншормацію для браузера або пошукових систем. Зокрема, щоб браузер розумів, що має справу з кодуванням UTF-8 (Unicode transformation format, формат перетворення Юнікод) і додається даний рядок.
<title> Пример веб-страницы</title>
Елемент <title> визначає назву веб-сторінки. У браузері вона відображається на поточній вкладці.
Елемент <title> є обов'язковим і повинен неодмінно бути присутнім в коді документа. Усередині дозволяється писати тільки текст і ніяких інших елементів в <title> бути не повинно. Але припустимо додавати різні текстові символи, наприклад, так: <title> Adobe ™ Photoshop® </title>.
</head>
Тег </head> показує, що «голова» документа завершена.
<body>
«Тіло» документа <body> призначене для розміщення елементів і вмісту веб-сторінки.
<h1> Заголовок</h1>
HTML пропонує шість текстових заголовків різного рівня, які показують відносну важливість розділу, розташованого після заголовка. Так, елемент <h1> є найбільш важливим заголовоком першого рівня, а елемент <h6> існує для позначення заголовка шостого рівня і є найменш значним. За замовчуванням, заголовок першого рівня відображається найбільшим, жирним шрифтом, заголовки подальшого рівня за розміром менше. Елементи <h1> ... <h6> відносяться до блокових елементів, вони завжди починаються з нового рядка, а після них інші елементи відображаються на наступному рядку. Крім того, перед заголовком і після нього браузер додає порожній простір.
<!-- Комментар -->
Деякий текст можна заховати від показу в браузері, зробивши його коментарем. Хоча такий текст користувач не побачить, він все одно буде передаватися в документі, так що, переглянувши вихідний код, можна виявити приховані замітки.
Коментарі потрібні для внесення в код своїх записів, які не впливають на вигляд сторінки. Починаються вони тегом <! - і закінчуються тегом ->. Все, що знаходиться між цими тегами, відображатися на веб-сторінці не буде.
<p> Перший абзац.</p>
Елемент <p> визначає абзац тексту.
Елемент <p> є блоковим, тому текст завжди починається з нового рядка, абзаци йдуть один за одним розділяються між собою відступами.
</body>
Слід додати тег </body>, щоб показати, що «тіло» документа завершено.
</html>
Останнім елементом в коді завжди йде тег </html>.