Как структурировать новый 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-коде.