На этой странице подробно рассматривается структура HTML-документа, включая основные теги и их функции. Вы узнаете о назначении каждого элемента, начиная с объявления типа документа (!DOCTYPE) и заканчивая основными частями, такими как html, head и body. Особое внимание уделено метатегам meta, тегам для подключения стилей link и скриптов script. Также рассматриваются примеры применения этих элементов на практике.
2.1. Тег !DOCTYPE. Объявление формата документа
Тег <!DOCTYPE> сообщает браузеру, какой стандарт HTML используется в данном документе. Это необходимо для корректного отображения страницы. В современных версиях HTML (начиная с HTML5) этот тег выглядит так:
<!DOCTYPE html>
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Мой первый сайт</title>
</head>
<body>
Привет, мир!
</body>
</html>
Комментарий:
В этом примере мы объявили документ как соответствующий стандарту HTML5. Это позволяет браузерам правильно интерпретировать содержимое страницы.
2.2. Тег html
Тег <html> является корневым элементом любого HTML-документа. Он содержит всю структуру веб-страницы: от заголовков до основного содержимого. Обычно он включает два ключевых атрибута: lang (язык контента) и dir (направление текста).
Пример:
<!DOCTYPE html>
<html lang="ru"> <!-- Указываем язык документа -->
<head>
<title>Мой первый сайт</title>
</head>
<body>
Привет, мир!
</body>
</html>
Комментарий:
Атрибут lang="ru" указывает, что контент страницы на русском языке. Это помогает поисковым системам и программам чтения экрана лучше понимать содержание сайта.
2.3. Заголовочная часть head
Заголовочная часть <head> содержит техническую информацию о странице, которая не видима пользователям при просмотре страницы, но важна для работы браузера и поисковых систем. В ней размещаются такие элементы, как метаданные (<meta>), ссылки на стили (<link>), скрипты (<script>), а также другие важные компоненты.
2.3.1. Метатеги meta
Метатеги <meta> предоставляют дополнительную информацию о странице, такую как кодировка, ключевые слова, описание и многое другое. Вот несколько популярных вариантов использования:
- Кодировка документа:
<meta charset="UTF-8">Устанавливает кодировку символов для правильного отображения текста. - Описание страницы для поисковых систем:
<meta name="description" content="Описание моего сайта">Определяет краткое описание страницы, которое может использоваться в результатах поиска. - Информация об авторе:
<meta name="author" content="Иван Иванов">Указывается имя автора страницы. - Ключевые слова для SEO:
<meta name="keywords" content="ключевое слово 1, ключевое слово 2, ...">Список ключевых слов, которые могут помочь поисковым системам понять тематику страницы.
2.3.2. Тег link
Тег <link> используется для подключения различных внешних ресурсов, таких как файлы стилей (CSS), иконки (favicon) и шрифты.
- Подключение файлов стилей (CSS):
<link rel="stylesheet" href="styles.css">Подключает внешний файл стилей для оформления страницы. - Иконка страницы (favicon):
<link rel="icon" type="image/png" href="/favicon.png">Указывает путь к иконке страницы. - Подключение шрифтов:
<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">Эти строки подключают шрифт Roboto через Google Fonts.
2.3.3. Тег style
Тег <style> используется для встраивания CSS-стилей прямо в HTML-документ. Это удобно, когда стили применяются только к одной конкретной странице.
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мой первый сайт</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
</style>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это мой первый сайт.</p>
</body>
</html>
Комментарий:
Тег <style> содержит встроенный CSS-код, который применяется ко всему документу. В данном примере задаётся синий фон для всего тела страницы и тёмно-синий цвет для заголовков первого уровня.
2.3.4. Тег script
Тег <script> используется для встраивания JavaScript-кода прямо в HTML-документ. Это полезно, когда требуется выполнение скриптов без необходимости подключения внешних файлов.
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мой первый сайт</title>
<script>
console.log("Привет из скрипта!");
</script>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это мой первый сайт.</p>
</body>
</html>
Комментарий:
Тег <script> содержит встроенный JavaScript-код. В данном примере скрипт просто выводит сообщение в консоль разработчика.
2.4. Раздел body. Основная часть документа
Раздел <body> содержит всё основное содержимое страницы, которое будет видно пользователю: тексты, изображения, видео, формы и другие элементы интерфейса.
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мой первый сайт</title>
</head>
<body>
<h1>Привет, мир!</h1> <!-- Заголовок первого уровня -->
<p>Это мой первый сайт.</p> <!-- Параграф -->
<img src="images/logo.jpg" alt="Логотип компании"> <!-- Изображение -->
</body>
</html>
Комментарии к элементам внутри <body>:
<h1>Привет, мир!</h1>: Заголовок первого уровня. Используется для выделения важных частей текста.<p>Это мой первый сайт.</p>: Параграф. Содержит основной текстовый контент страницы.<img src="images/logo.jpg" alt="Логотип компании">: Элемент для вставки изображений. Атрибутsrcуказывает путь к изображению, аalt— альтернативный текст, который будет показан, если изображение не загрузится.
