Як структурувати новий HTML-документ
HTML (мова розмітки гіпертексту) є основою веб-вмісту, яка забезпечує структуру інформації, що відображається на веб-сайтах. Кожен HTML-документ має базову структуру, яка включає важливі елементи. Давайте заглибимося в основні компоненти.
1. '<!DOCTYPE html>'
Ця декларація визначає тип документа та версію HTML, що використовується. Для сучасних веб-сторінок прийнято використовувати «<!DOCTYPE html>».
2. '<html>'
Кореневий елемент інкапсулює весь документ HTML.
3. '<head>'
Головний розділ містить метаінформацію про документ, таку як заголовок, набір символів і пов’язані таблиці стилів.
4. '<title>'
Цей елемент встановлює заголовок HTML-документа, який відображається у вкладці або вікні браузера.
5. '<body>'
Елемент body містить вміст документа HTML, включаючи текст, зображення, посилання тощо.
Приклад документа HTML
Тепер давайте зведемо все разом на прикладі:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My HTML Document</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple example of an HTML document.</p>
<img src="example.jpg" alt="An example image">
<a href="https://www.example.com">Visit Example.com</a>
</body>
</html>У цьому прикладі замініть "My HTML Document" на потрібний заголовок і відповідно відкоригуйте вміст у '<body>'. Розуміння цієї базової структури закладає основу для створення добре організованих, семантично значущих веб-сторінок.
Бонус: закриваючі теги
Під час створення сторінки HTML важливо переконатися, що всі теги закриті належним чином, щоб уникнути проблем із перебігом сторінки та відтворенням. Щоб допомогти з цим завданням, перевірте наш Інструмент перевірки незакритих тегів HTML, щоб виявити структурні проблеми у вашому HTML-коді.