logo

Структура HTML-документу

Структура HTML-документу складається з основних елементів: <!DOCTYPE html>, <html>, <head>, <title> і <body>. Вона визначає, як організований контент на веб-сторінці, включаючи заголовки, абзаци, посилання та зображення, забезпечуючи чітку та логічну побудову сторінки.

HTML (HyperText Markup Language) - це основна мова для створення веб-сторінок. Вона використовується для опису структури веб-сторінки за допомогою тегів. Якщо ви новачок у HTML, ось вам просте та зрозуміле пояснення основних елементів структури HTML-документу.

Основні елементи HTML-документу

Кожен HTML-документ має основні елементи, які формують його структуру:

  1. <!DOCTYPE html> - Це оголошення документу, яке вказує браузеру, що документ написаний на HTML5.

  2. <html> - Кореневий елемент, який охоплює всі інші елементи на сторінці.

  3. <head> - Цей розділ містить метадані про документ, такі як заголовок сторінки, посилання на CSS (каскадні таблиці стилів), мета-теги та інші ресурси. Він не відображається безпосередньо на веб-сторінці.

  4. <title> - Заголовок документа, який відображається на вкладці браузера.

  5. <body> - Це основна частина HTML-документу, в якій розміщено весь контент, який ви бачите на веб-сторінці, такий як текст, зображення, відео, посилання тощо.

Приклад простейшого HTML-документу

<!DOCTYPE html>
<html>
<head>
    <title>Моя перша веб-сторінка</title>
</head>
<body>
    <h1>Вітаю на моїй першій веб-сторінці!</h1>
    <p>Це мій перший абзац.</p>
</body>
</html>

Пояснення кожного елемента

  • <!DOCTYPE html> - Вказує, що ми використовуємо HTML5.

  • <html> - Відкриває HTML-документ. Всі інші елементи повинні бути вкладені всередині нього.

  • <head> - Містить метаінформацію. Наприклад, вказує заголовок сторінки через тег <title>.

  • <title> - Встановлює назву веб-сторінки, яка відображається у вкладці браузера.

  • <body> - Містить весь видимий контент сторінки, такий як заголовки, абзаци, зображення та інше.

Додаткові теги у <body>

Щоб створити більш складну структуру, ви можете використовувати різні теги всередині тега <body>:

  • <h1> - <h6> - Заголовки різних рівнів, де <h1> - найважливіший заголовок, а <h6> - найменш важливий.

  • <p> - Абзац тексту.

  • <a> - Посилання. Атрибут href визначає URL, на який буде здійснено перехід при натисканні.

  • <img> - Зображення. Атрибут src вказує на шлях до зображення.

  • <ul> і <li> - Ненумерований список. Кожен елемент списку обгорнутий у <li>.

Приклад з додатковими тегами

<!DOCTYPE html>
<html>
<head>
    <title>Моя веб-сторінка з додатковими тегами</title>
</head>
<body>
    <h1>Вітаю на моїй веб-сторінці!</h1>
    <p>Це мій перший абзац.</p>
    <p>Ось <a href="https://example.com">посилання</a> на зовнішній ресурс.</p>
    <img src="image.jpg" alt="Моє зображення">
    <h2>Мій список:</h2>
    <ul>
        <li>Перший елемент</li>
        <li>Другий елемент</li>
        <li>Третій елемент</li>
    </ul>
</body>
</html>

HTML - це мова, яка дозволяє структурувати ваш контент на веб-сторінці. Вона складається з різних тегів, кожен з яких має свою функцію. Знання основної структури HTML-документу - це перший крок до створення сайтів.

Схожі записи: