Базові знання про структуру HTML

Базові знання про структуру HTML

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

Основна структура HTML-документа

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

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок сторінки</title>
  </head>
  <body>
    <!-- Основний контент сторінки -->
  </body>
</html>

Опис елементів:

  1. <!DOCTYPE html>: Оголошує тип документа і вказує, що використовується HTML5.
  2. <html>: Кореневий елемент, який охоплює весь вміст HTML-документа.
  3. <head>: Містить метадані про документ, такі як заголовок, підключення стилів і скриптів.
  4. <title>: Встановлює назву сторінки, яка відображається на вкладці браузера.
  5. <body>: Містить видимий контент веб-сторінки, який відображається користувачам.

Теги та елементи

HTML використовує теги для позначення різних частин контенту. Теги зазвичай мають відкриваючий та закриваючий вигляд:

<тег>Контент</тег>

Приклади основних тегів:

  • <h1> до <h6>: Заголовки від найбільшого до найменшого.
<h1>Це головний заголовок</h1>
  • <p>: Абзац тексту.
<p>Це абзац тексту.</p>
  • <a>: Гіперпосилання.
<a href="https://www.example.com">Посилання на сайт</a>
  • <img>: Зображення.
<img src="image.jpg" alt="Опис зображення">
  • <ul>, <ol>, <li>: Нумеровані та марковані списки.
<ul>
  <li>Пункт списку</li>
</ul>

Атрибути

Атрибути надають додаткову інформацію тегам і записуються в відкриваючому тегі.

Приклад:

<a href="https://www.example.com" target="_blank">Відкрити в новій вкладці</a>
  • href: Вказує URL адреси посилання.
  • target: Вказує, де відкрити посилання.

Коментарі

Коментарі використовуються для пояснень у коді і не відображаються на сторінці.

<!-- Це коментар -->

Документація та метадані

У розділі <head> можна підключати стилі, скрипти та встановлювати метадані:

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Опис сторінки">
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>
  • <meta>: Встановлює метадані документа.
  • <link>: Підключає зовнішні ресурси, такі як CSS-файли.
  • <script>: Підключає JavaScript-файли.

Приклад повної HTML-сторінки

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Моя перша сторінка</title>
  </head>
  <body>
    <h1>Вітаю на моїй сторінці!</h1>
    <p>Це перший абзац на сторінці.</p>
    <img src="photo.jpg" alt="Моє фото">
    <a href="https://www.google.com" target="_blank">Перейти на Google</a>
  </body>
</html>

Висновок

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

Рекомендації для подальшого вивчення:

  • Вивчайте семантичні теги HTML5 для покращення структури сторінки.
  • Ознайомтеся з CSS для стилізації елементів HTML.
  • Практикуйтеся, створюючи власні проекти.