Разбираем HTML документ — Как создать сайт
Разбираем код HTML-документа
Урок №3
Разбираем HTML код
Давайте разберём, что означает каждая часть нашего кода HTML-документа, введённого в Блокнот на прошлом уроке:
<html> <head> <title>Название страницы</title> </head> <body> <h2>Заголовок статьи</h2> <p> Абзац статьи.</p> </body> </html>
Но для начала узнаем, что такое HTML-тег или просто «тег»?
Тег — основа языка HTML
Основной частью языка HTML является — тег. HTML документ (как и весь html-код) и состоит и тегов. Тег содержит в себе имя и угловые скобки, которые расположены по бокам — <имяТега>
:
<p>
— это один из множества, различных HTML-тегов, означает абзац.
Теги бывают открывающими и закрывающими. У закрывающих тегов перед именем стоит косая черта (слэш) /
<p>
— открывающий тег. </p>
— закрывающий тег.
Между открывающим и закрывающим тегами, обычно располагается текст или другие теги.
У тегов разные имена и каждое имя означает какой либо элемент HTML-страницы: заголовок статьи, абзац (параграф) статьи, фотографию, ссылку, кнопку и т.п.
Рассмотрим другие теги используемые в нашем HTML коде.
Теги <html> </html> — начало и конец HTML-документа
Возвращаемся к нашему HTML документу:
<html> <head> <title>Название страницы</title> </head> <body> <h2>Заголовок статьи</h2> <p> Абзац статьи.</p> </body> </html>
Каждый HTML-документ начинается с открывающегося тега <html>
и заканчивается закрывающимся тегом </html>
Теги <head> </head> и <body> </body> — голова и тело HTML-документа
Между тегами </html>
располагаются два блока.
1. Первый блок начинается и заканчивается тегами <head>
</head>
— их называют головой HTML-документа.
2. Второй блок начинается и заканчивается тегами <body>
</body>
— их называют телом HTML-документа.
<html> <head> <title>Название страницы</title> </head> <body> <h2>Заголовок статьи</h2> <p> Абзац статьи.</p> </body> </html>
1. <head>
</head>
— голова HTML-документа.
2. <body>
</body>
— тело HTML-документа, между этими тегами располагается основная информация страницы: заголовки, абзацы, фотографии, ссылки, кнопки и т.д.
Теги <title> </title> — название HTML-страницы
<html> <head> <title>Название страницы</title> </head> <body> <h2>Заголовок статьи</h2> <p> Абзац статьи. </p> </body> </html>
В голове между тегами <head>
</head>
, располагаются теги
<title>
</title>
. Между тегами <title>
</title>
помещают текст, который выступает в качестве названия страницы.В нашем примере, между тегами <title>
</title>
, находится текст:
Название страницы
Текст помещённый между тегами <title>
</title>
появляется в двух местах, в виде названия окна браузера и в виде названия вкладки браузера:
Название страницы, которую вы сейчас читаете, содержит следующий текст:
Разбираем код HTML-документа. Выясняем что такое тег.
Теги <h2> </h2> и <p> </p> — заголовок и абзац статьи
<html> <head> <title>Название страницы</title> </head> <body> <h2>Заголовок статьи</h2> <p> Абзац статьи.</p> </body> </html>
В теле нашего HTML-документа, между тегами <body>
</body>
, располагаются два вида тегов:<h2>
</h2>
— теги заголовока статьи,<p>
</p>
— теги абзаца статьи.
<h2>
</h2>
— между этими тегами располагается текст, который является заголовком статьи
Например, текст заголовока статьи, которую вы сейчас читаете содержит следующее:
Разбираем HTML код
<p>
</p>
— между этими тегами располагается текст, который является абзацем статьи.
Например, второй абзац статьи, которую вы сейчас читаете, содержит следующее:
Но для начала узнаем, что такое HTML-тег или просто «тег»?
Обобщаем материал по структуре HTML-документа:
Каждый HTML-документ начинается и заканчивается тегами <html>
</html>
Каждый HTML-документ состоит из двух блоков, головы и тела:
1. </head>
— голова HTML-документа,
2. <body>
</body>
— тело HTML-документа.
В голове HTML-документа между тегами <head>
</head>
, располагаются теги <title>
</title>
и некоторая служебная информация о странице (мета-теги), которую мы изучим чуть позже.
В теле HTML-документа между тегами <body>
</body>
, располагается основной контент: тексты, изображения, формы, которые обрамлены тегами заголовков h2
, абзацев p
, изображений img
, ссылок a
, кнопок input
и т.д.
- Category: HTML
- Tag: html, разбор кода, учебник html
Дата публикации поста: 3 апреля 2019
Дата обновления поста: 15 октября 2014
Бесплатный хостинг от компании Бегет, для начинающих: beget. com/ru/hosting/free
Валидный HTML-документ | Уроки | WebReference
До сих пор мы рассматривали отдельные фрагменты кода HTML. Но HTML-документ (или веб-страница, что означает то же самое) требует определённой структуры для того, чтобы стать
Почему мы заботимся о валидации HTML-документа?
- Правильность: валидный документ корректно отображается в браузере.
- Отладка: некорректный код HTML может вызвать ошибки, сложные для выявления.
- Поддержка: валидный документ легче обновлять позже, даже кому-то другому.
Доктайп
Первой информацией которую мы пишем, является тип HTML-документа — доктайп.
Подумайте о доктайпе как о версии автомобиля на протяжении многих лет: Ford Fiesta, купленный в 1986 году, был Fiesta 2. Если вы покупаете его сегодня, то это Fiesta 7.
Чтобы сообщить браузеру, что HTML-документ представляет собой HTML5, просто начните свой документ со следующей строки:
<!DOCTYPE html>
Вот и всё. Просто установите и забудьте об этом.
Вы можете задаться вопросом, почему это доктайп HTML5 не упоминает цифру 5. В W3C подумали, что предыдущие определения доктайпа были слишком запутанными и воспользовались возможностью, чтобы упростить его, удалив упоминание о версии HTML.
Элемент <html>
Помимо строки с доктайпом, весь ваш HTML-документ должен располагаться внутри элемента <html>:
<!DOCTYPE html> <html> <!-- Здесь остальная часть вашего кода HTML --> </html>
<html> технически является предком всех элементов HTML.
<head>
Как атрибуты несут дополнительную информацию для элемента HTML, так и элемент <head> несёт дополнительную информацию для всей веб-страницы.
Например, заголовок страницы (отображается на вкладке) находится в <head>:
<head> <title>Мой сказочный блог</title> </head>
Следующие элементы HTML могут появляться в <head> и только в <head>:
- <link>
- <meta>
- <style>
<body>
В то время как <head> содержит только метаданные, не предназначенные для отображения вообще (за исключением <title>), то элемент <body> это место, где мы пишем всё наше содержимое. Всё внутри <body> будет отображаться в окне браузера.
Полностью валидный HTML-документ
Объединив все эти требования, мы можем написать простой и валидный HTML-документ:
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>MarkSheet</title> <meta name=»description» content=»Простое руководство по HTML»> </head> <body> <p>Привет, мир!</p> </body> </html>- «MarkSheet» написано на вкладке браузера;
- «Привет, мир!» — это единственный текст, отображаемый в окне, потому что это единственное содержимое <body>.
W3C предлагает Markup Validation Service для проверки любого HTML-документа на наличие ошибок и предупреждений.
Перейти к заданиям
Автор: Джереми Томас
Последнее изменение: 01.06.2020
: Элемент метаданных документа (заголовок) — HTML: язык гипертекстовой разметки
HTML-элемент
содержит машиночитаемую информацию (метаданные) о документе, такую как его заголовок, сценарии и таблицы стилей.
Примечание:
в первую очередь содержит информацию для машинной обработки, а не для чтения человеком. Для информации, видимой человеку, такой как заголовки верхнего уровня и список авторов, см.
Этот элемент включает глобальные атрибуты.
-
профиль
Устаревший "> Нестандартный URI одного или нескольких профилей метаданных, разделенные пробелом.
<голова> <метакодировка="UTF-8" />Название документа
Категории контента | Нет. |
---|---|
Разрешенный контент | Если документ В противном случае один или несколько элементов содержимого метаданных, где ровно один
это |
Отсутствие тега | Начальный тег может быть опущен, если первое, что находится внутри element — это элемент. Конечный тег может быть опускается, если первое, что следует за Элемент не является пробелом или комментарием. |
Разрешенные родители | Ан элемент, как его первый дочерний элемент. |
Неявная роль ARIA | Нет соответствующей роли |
Разрешенные роли ARIA | Нет роль разрешено |
Интерфейс DOM | HTMLHeadElement |
Спецификация |
---|
Стандарт HTML # the-head-element |
Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.
- Элементы, которые можно использовать внутри
-
<название>
-
<база>
-
<ссылка>
-
<стиль>
-
<мета>
-
<сценарий>
-
-
<шаблон>
-
Обнаружили проблему с содержанием этой страницы?
- Отредактируйте страницу на GitHub.
- Сообщить о проблеме с содержимым.
- Посмотреть исходный код на GitHub.
Хотите принять участие?
Узнайте, как внести свой вклад.
Последний раз эта страница была изменена участниками MDN.
Что такое документ HTML5 и с чего начать
Если вы только начинаете работать с HTML, весь этот код в верхней части документов может показаться немного сумасшедшим, но на самом деле каждая строка имеет определенное назначение. Проще говоря, весь этот материал в верхней части вашего HTML5-документа содержит всю информацию, которую браузер должен знать, как думать о HTML-документе. Это то, что всегда загружается и запускается браузером в первую очередь. Как правило, информация, находящаяся в верхней части HTML-документа перед его телом, не отображается на веб-страницах. Итак, какова цель всего этого кода и зачем он нужен браузеру? Если вы используете расширенный HTML-редактор, такой как Dreamweaver, эта часть HTML-документа обычно вставляется за вас. Вам не нужно добавлять его снова, но полезно понять, зачем нужен этот код. Начнем с того, что стоит перед элементом head:
Тег
необходим для HTML5 и всегда должен быть самым первым в вашем HTML-документе. Это помогает браузеру узнать, какую версию HTML вы используете. Браузер по-прежнему распознает его даже в нижнем или верблюжьем регистре, но рекомендуется писать именно так:
.
Может показаться излишним, что вы ставите
сразу после
, но этот тег служит другой цели. Вы могли заметить, что
не включает закрывающий тег. Это связано с тем, что браузеру не нужна дополнительная информация, кроме типа документа. Однако тег
включает закрывающий тег. Вы поместите весь свой код страницы в этот тег, чтобы браузер знал, где начинается и заканчивается ваш HTML. Последний тег на вашей странице должен быть
.
Тег html также может иметь атрибуты, сообщающие браузеру немного больше информации о вашем HTML. Атрибут «lang» сообщает браузеру, на каком языке находится ваш контент, что также помогает поисковым системам направлять пользователей на страницы на их языке. W3Schools имеет полный список языковых кодов.
<голова>
Заголовок вашего HTML-документа содержит много информации не только для браузера, но и для поисковых систем. В этом теге вы найдете ключевые слова, описания, заголовок и метатеги. Все в этом разделе, кроме тега заголовка, не будет видно вашему пользователю. Элемент head HTML-страницы может состоять из строк и строк кода. Мы просто рассмотрим некоторые из самых основных. По мере развития вашего мастерства кодирования вам, вероятно, потребуется добавить теги сценариев для JavaScript или jQuery или более конкретные метатеги.
<метакодировка ="utf-8">
В HTML5 метатеги считаются недействительными элементами, то есть они не могут иметь никакого содержимого, поэтому закрывающий тег не требуется. Мета-теги помогают поисковым системам найти ваш сайт и предоставляют информацию о вашей веб-странице. Вы можете добавить свое имя, программы, используемые для создания страницы или описания для поисковых систем. Самый важный метатег, который нужно включить, — это набор символов, и он должен быть первой строкой в элементе head. Атрибут "charset". Вы почти всегда будете использовать атрибут «utf-8», который является Unicode или «универсальным алфавитом». Это набор символов, который охватывает почти все системы письма в мире. Атрибут «utf-8» позволит вашим специальным символам, таким как акценты, цитаты или даже дефисы, отображаться правильно, а не выглядеть сумасшедшей тарабарщиной. Размещение этой небольшой строки кода в элементе head первым может помочь предотвратить изменение вашего сайта хакерами, поскольку им проще манипулировать сайтами без кодировки, такой как «utf-8».
Это предложит поисковым системам описания вашего сайта. То, что написано в мета-описании, часто можно найти на страницах результатов поисковой системы (SERP), чтобы показать фрагмент предварительного просмотра для вашей страницы. Оптимальная длина для поисковых систем — 155 символов. Постарайтесь придумать лучший способ передать контент на вашей странице, чтобы пользователь первым захотел нажать на ваш сайт.
<название>
Внутри тега title вы поместите, как вы уже догадались, заголовок вашей страницы. Технически заголовок — это единственный элемент , который должен быть в голове . Текст, который вы помещаете в тег заголовка, обычно отображается в строке заголовка браузера и будет именем по умолчанию для закладок. Это также первый способ каталогизации сайтов поисковыми системами. Хорошей практикой здесь является использование более чем
, если вы создаете страницу «О программе» для своего сайта. Вы бы хотели написать что-то вроде:
, чтобы дать поисковым системам некоторый контекст.
Вам также потребуется ссылка на ваш файл CSS. Возможно, вы научились стилю, добавляя стили непосредственно в HTML-документ. Если вы работаете над очень маленьким и статичным сайтом, это может быть нормально, но если вы работаете над сайтом с большим количеством элементов и страниц, у вас будет файл или папка CSS, которые вам нужны. скажите ваш HTML-файл для доступа. Элемент link для CSS имеет множество различных атрибутов. Атрибут «href» сообщает браузеру, где найти файл. Атрибут «type» сообщает браузеру, что это за файл, а атрибут «rel» сообщает браузеру, какое отношение имеет связанный файл к файлу, в котором он сейчас находится. В HTML5 атрибут "type" больше не нужен, так как значением по умолчанию является "text/css", но вы увидите, что он по-прежнему включен почти в каждый элемент ссылки.