Начало работы с HTML
Что такое HTML?
HTML (Hypertext Markup Language) – это язык разметки, который указывает веб-браузерам, как структурировать посещенные вами веб-страницы. Окружающие элементы tag
могут превращать содержимое в гиперссылку для перехода на другую страницу (a
), выделять слова курсивом (i
em
) и так далее.
Анатомия элемента HTML
HTML элемент
= Открывающий тег
+ Содержание
+ Закрывающий тег
.
<p>My cat is very cute</p>
Примечание
Теги в HTML не чувствительны к регистру. Это означает, что они могут быть написаны в верхнем или нижнем регистре. Например, тег <title>
может быть написан как <Title>
или <TiTlE>
и т.д. Однако для единообразия и удобочитаемости лучше всего писать все теги в нижнем регистре.
Блочные и встроенные элементы
- Блочные элементы: Элементы блочного уровня для видимого блока на странице. Элемент блочного уровня появляется на новой строке после предшествующего ему содержимого. Любое содержимое, следующее за элементом блочного уровня, также появляется на новой строке.
<address> <article> <aside> <blockquote> <canvas>
<dd> <div> <dl> <dt> <fieldset>
<figcaption> <figure> <footer> <form> <h1>-<h6>
<header> <hr> <li> <main> <nav>
<noscript> <ol> <p> <pre> <section>
<table> <tfoot> <ul> <video>
- Встраиваемые элементы: Встроенные элементы содержатся внутри элементов блочного уровня и окружают только небольшие части содержимого документа (не целые параграфы или группы содержимого, например,
em
a
и т.д.). Элемент inline не приводит к появлению новой строки в документе.
<a> <abbr> <acronym> <b> <bdo>
<big> <br> <button> <cite> <code>
<dfn> <em> <i> <img> <input>
<kbd> <label> <map> <object> <output>
<q> <samp> <script> <select> <small>
<span> <strong> <sub> <sup> <textarea>
<time> <tt> <var>
Элементы блочного уровня & Инлайн-элементы – W3Schools
Пустые элементы
Элементы без содержимого называются пустыми элементами. Общая структура пустых элементов может быть такой: Пустые элементы
= Открывающий тег
+ Атрибуты в открывающем теге
. Некоторые элементы состоят из одного тега, который обычно используется для вставки/встраивания чего-либо в документ. Например, элемент <img>
вставляет файл изображения на страницу.
<img
src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"
/>
Пустые элементы иногда называют элементами пустоты.
Примечание: В HTML не требуется добавлять /
в конце тега пустого элемента, например: <img src="images/cat.jpg" />
. Однако это также допустимый синтаксис, и вы можете сделать это, когда хотите, чтобы ваш HTML был допустимым XML.
Атрибуты
Атрибуты содержат дополнительную информацию об элементе, которая не отображается в содержимом. Атрибут должен иметь:
-
пробел между ним и именем элемента. (Для элемента с более чем одним атрибутом атрибуты также должны быть разделены пробелами).
-
Имя атрибута, за которым следует знак равенства.
-
Значение атрибута, заключенное в открывающую и закрывающую кавычки.
<!-- class is the attribute name and editor-note is the attribute value -->
<p class="editor-note">My cat is very cute</p>
Булевы атрибуты
Иногда встречаются атрибуты без значений. Это вполне допустимо. Такие атрибуты называются булевыми. Булевы атрибуты могут иметь только одно значение, которое обычно совпадает с именем атрибута. Например,
<input type="text" disabled="disabled" /> <input type="text" disabled />
Анатомия HTML-документа
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
- Все документы HTML должны начинаться с объявления <!DOCTYPE>. Декларация не является тегом HTML. Это “информация” для браузера о том, какой тип документа следует ожидать. В HTML5 декларация выглядит просто.: DOCTYPE – W3Schools
<!DOCTYPE html>
-
<html></html>
: Элемент<html>
. Этот элемент оборачивает все содержимое страницы. Иногда его называют корневым элементом. -
<head></head>
: Элемент<head>
. Этот элемент действует как контейнер для всего, что вы хотите включить в HTML-страницу, но не является содержимым страницы, которое будет показано зрителям. Сюда входят ключевые слова и описание страницы, которые будут отображаться в результатах поиска, CSS для стилизации содержимого, объявления набора символов и многое другое. -
<meta charset="utf-8">
: Элемент<meta>
. Этот тег определяет метаданные о документе HTML. Метаданные – это данные (информация) о данных. Теги<meta>
всегда находятся внутрии обычно используются для указания набора символов, описания страницы, ключевых слов, автора документа и настроек области просмотра. Метаданные не отображаются на странице, но могут быть обработаны машиной. Метаданные используются браузерами (как отобразить содержимое или перезагрузить страницу), поисковыми системами (ключевые слова) и другими веб-службами. Атрибут
charset
устанавливает набор символов для вашего документа в UTF-8, который включает большинство символов из подавляющего большинства человеческих письменных языков. С помощью этой настройки страница может обрабатывать любое текстовое содержимое, которое она может содержать. meta – W3Schools -
<title></title>
: Элемент<title>
. Он задает заголовок страницы, который отображается на вкладке браузера, в котором загружена страница. Заголовок страницы также используется для описания страницы при добавлении ее в закладки. -
<body></body>
: Элемент<body>
. Он содержит все содержимое, которое отображается на странице, включая текст, изображения, видео, игры, воспроизводимые аудиотреки или что-либо еще.
Пробельные символы в HTML
Независимо от того, сколько пробельных символов вы используете внутри содержимого HTML-элементов (которые могут включать один или несколько пробелов, а также переносы строк), HTML-парсер сокращает каждую последовательность пробелов до одного пробела при рендеринге кода. Вы будете использовать пробельные символы, чтобы сделать код более читабельным. Например, если вам нужно вложить элемент:
<p>
My cat is
<b>very cute</b>
</p>
Ссылки на сущности: Включение специальных символов в HTML
В HTML символы <
, >
, "
, '
и &
являются специальными символами. Они являются частью синтаксиса HTML. Они используются в ссылках на символы. Каждая ссылка на символ начинается с амперсанда (&) и заканчивается точкой с запятой.
< <
> >
" "
' '
& &
См. подробнее в Список ссылок на символьные сущности XML и HTML – Википедия
HTML-комментарии
Чтобы написать комментарий HTML, оберните его в специальные маркеры <!--
и -->
. Например:
<!-- I am a comment -->