HTML - Вступление
Содержание:
Что такое HTML или HyperText Markup Language?
HTML (Hypertext Markup Language) - это язык разметки, который используется для создания веб-страниц. С помощью HTML определяется структура документа и размещение различных элементов на веб-странице, таких как текст, изображения, ссылки и другие.
С самого названия HTML стает понятно, что это такое. С английского “HyperText Markup Language” переводится как «язык гипертекстовой разметки». Под “гипертекстом” подразумевается просто набор текстовых документов связанных между собой. Все страницы на сайтах по своей сути являются набором таких текстовых документов.
Но нужно отметить, что он не является языком программирования.
HTML прежде всего, язык который понимает браузер и является стандартным языком разметки для создания и структурирования содержимого веб-страниц. По сути это инструмент, который говорит браузеру как определять и отображать структуру и элементы контента на веб-странице, такие как текст, изображения, ссылки и другие мультимедийные ресурсы и передать их для обычного пользователя в удобном и понятном виде.
Структура HTML-документа
Основная структура HTML документа включает в себя несколько ключевых элементов, которые определяют базовую структуру веб-страницы.
Вот пример такой структуры:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Заголовок вашей страницы</title> <!-- Дополнительные мета-теги, стили CSS, и другие внешние ресурсы --> </head> <body> <!-- Содержимое вашей веб-страницы --> </body> </html>Давайте рассмотрим каждый из элементов этой структуры:
<!DOCTYPE html>представляет собой объявление типа документа и указывает на использование HTML 5-й версии.<html>корневой элемент HTML-документа и представляет собой контейнер, в котором содержится весь HTML-код веб-страницы.<head>представляет собой контейнер, в котором содержится техническая информация о документе: заголовок страницы, ссылки на стили, шрифты, скрипты и др., мета-теги и другие элементы, необходимые для управления поведением и внешним видом страницы.<meta charset="UTF-8">указывает браузеру, что документ использует кодировку UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">определяет масштабирование и ширину устройства для адаптивного дизайна.<title>устанавливает заголовок документа, который отображается в верхней части окна браузера или на вкладке.<body>содержит основное содержание веб-страницы, такое как текст, изображения, ссылки и другие элементы.
Эта базовая структура обеспечивает минимальные требования для корректного отображения веб-страницы в браузере.
Теги и атрибуты
Теги
Web-страница создается из различных HTML-элементов, называемых тегами, каждый из которых является инструкцией для браузера о том, как отображать конкретную часть содержимого на веб-странице. Они (теги) применяются к частям текста и придает им различные значения (Это абзац? Это маркированный список? Это часть таблицы?), разделяет документ на логические секции (есть ли у документа шапка? столбцы с контентом? меню навигации?) и добавлять контент на Вашу страницу, такой как фото и видео. Теги обрамляются угловыми скобкам
В HTML элементы веб-страниц формируются с использованием парных и непарных тегов:
Парные теги
Парные теги состоят из открывающего тега, содержимого элемента и закрывающего тега. Они выглядят примерно так:
<имя тега атрибут="значение">Содержимое элемента</имя тега>Непарные теги
Непарные теги являются самостоятельными элементами и не имеют закрывающего тега. Они выглядят примерно так:
<имя тега атрибут="значение">
Основные теги:
Теги раздела
<head>:<meta>используется для вставки мета-информации в документ, которая не отображается непосредственно на веб-странице, но может быть использована браузером, поисковыми системами и другими инструментами для обработки и интерпретации контента страницы.<link>используется для создания ссылок на внешние ресурсы и устанавливает отношения между текущим документом и другими ресурсами (подключение шрифтов, стилей css и др.).<base>используется для установки базового (исходного) URL для всех относительных URL-адресов внутри документа. Это позволяет устанавливать одну базовую точку для всех относительных ссылок и ресурсов, таких как изображения, стилевые файлы, скрипты и т. д.<script>используется для вставки или подключения скриптов на веб-страницу. Этот тег может быть использован для внедрения JavaScript кода прямо в HTML документ или для указания внешних файлов с JavaScript кодом, которые следует загрузить и выполнить. Может также в определенных случаях использоваться в разделе <body>.<noscript>предназначен для предоставления альтернативного содержимого, которое будет отображаться в случае, если браузер пользователя не поддерживает выполнение JavaScript или если выполнение JavaScript отключено. Обычно размещается внутри <head> элемента в HTML-документе.<style>используется для определения стилей (CSS) внутри самого HTML-документа. Этот тег может быть встроенным (внутри <head>) или внешним (подключенным через атрибут link).
Семантические теги:
<header>представляет собой контейнер, используемый для определения заголовка или верхней части раздела на веб-странице. Этот тег обычно содержит заголовки, логотипы, навигационные элементы и другие элементы, связанные с верхней частью страницы или раздела<nav>используется для определения блока навигации на веб-странице. Этот тег обычно содержит элементы навигации, такие как ссылки на разделы сайта, меню или другие элементы, которые помогают пользователям перемещаться по веб-странице или между страницами.<main>представляет собой контейнер, используемый для обозначения основного содержимого веб-страницы. Этот тег помогает выделить центральное содержание страницы, такое как основной текст, изображения, видео и другие элементы, отделенные от заголовков, навигации и других частей страницы.<section>представляет собой контейнер для группировки содержимого, которое обычно имеет общую тему или предназначение на веб-странице. Этот тег используется для создания логических разделов или блоков, что делает код более читаемым, структурированным и семантически правильным.<article>используется для выделения контента, который представляет собой независимую, законченную часть информации. Этот тег часто применяется для статей, новостей, блогов, карточка товара (если это интернет магазин) или других подобных контентных блоков на веб-странице.<aside>предназначен для определения контента, который является вспомогательным или дополнительным по отношению к основному контенту страницы. Обычно содержимое внутри тега<aside>может быть представлено в виде боковой колонки, блока с информацией, связанной с основным контентом страницы.<footer>предназначен для определения нижней части раздела, страницы или статьи. Обычно содержимое внутри тега<footer>включает в себя информацию об авторе, дате публикации, ссылки на связанный контент, а также другие элементы, относящиеся к концу контента.<address>предназначен для форматирования контактной информации автора или владельца документа. Этот тег может включать в себя информацию об авторе, адресе электронной почты, номере телефона и других способах связи.<time>предназначен для представления времени или даты в различных форматах. Этот тег обеспечивает семантическое представление временных данных, что полезно для браузеров, поисковых систем и вспомогательных технологий.<figure>используется для группировки любого контента, который представляет собой одну единицу, например, изображение, графику, диаграмму, видео, код и т.д.<figcaption>используется в паре с тегом<figure>для добавления подписи или описания к содержимому внутри<figure>. Обычно этот тег размещается непосредственно после открывающего тега <figure>, и его содержимое представляет собой текст, который описывает содержимое <figure>.
Теги для работы с текстом:
<h1>-<h6>определяют заголовки различных уровней:<h1>- самый крупный (наивысший; применяется один раз на странице), <h6> - самый мелкий (наименьший).<p>определяет абзац текста.<strong>и<b>определяют текст выделенный жирным шрифтом.<strong>используется для выделения важного текста, обычно с использованием жирного шрифта.<b>также выделяет текст жирным, но обозначает просто стилистическое выделение, без дополнительного семантического значения.<em>и<i>определяют текст выделенный курсивом:<em>используется для выделения текста как эмфазиса(более выразительно), часто с использованием курсива.<i>также выделяет текст курсивом, но без семантического значения.<mark>используется для выделения (подсветки) фрагмента текста на веб-странице. Этот тег позволяет пользователю обратить внимание на важные или ключевые части текста.<del>и<s>используются для обозначения зачеркнутого текста, но существуют некоторые различия в их семантике и рекомендациях к использованию:<del>используется для обозначения текста, который был удален или вырезан из оригинального документа. Это может быть полезно, например, для отображения изменений в тексте, таких как удаленные фрагменты или информацию, которая больше не является актуальной.<s>используется для обозначения текста, который подвергся зачеркиванию, но не обязательно из-за удаления контента. Может использоваться для представления устаревшей информации или изменений в тексте.<ins>и<u>- подчеркнутый текст:<ins>и<u>(подчеркнутый текст) используется для обозначения вставленного (добавленного) текста в документ. Этот тег является частью стандарта HTML и предоставляет семантическую информацию о том, что некоторый текст был вставлен в документ после его первоначального создания или изменен.<u>(подчеркнутый текст) используется для обозначения текста, который должен быть стилизован как подчеркнутый. Однако, в стандарте HTML5, его использование не рекомендуется для стилизации текста. Вместо этого, рекомендуется использовать CSS свойство text-decoration для подчеркивания текста.<sup>и<sub>определяют верхний и нижний индексы:<sup>используется для верхних индексов (например, в математических формулах).<sub>используется для нижних индексов (например, в химических формулах).<dfn>(Definition) используется для выделения определения термина или ключевого понятия в тексте. Он обозначает термин, который объясняется или определяется в предложении или абзаце. Это помогает улучшить структуру и семантику документа, делая понятными термины и их значения. Тег <dfn> предоставляет контекст и является частью семантической разметки HTML, что улучшает восприятие и понимание содержания веб-страницы, особенно для поисковых систем и пользователей с особыми потребностями.<blockquote>и<q>определяют цитаты:<blockquote>используется для выделения больших цитат (которая может содержать в себе несколько абзацев).<q>определяет краткую цитату в тексте.<cite>используется для указания названия источника цитаты или ссылки на произведение, на которое вы ссылаетесь в тексте. Этот тег помогает выделить и семантически обозначить название произведения или источника информации.<abbr>используется для определения аббревиатуры или сокращений. Этот тег предоставляет дополнительную информацию о том, что означает сокращение, и может использоваться для подсказки или обеспечения лучшего понимания контекста.<code>используется для вставки фрагмента кода.
Теги разделители:
<span>используется для группировки элементов и применения в последствии к ним css-стилей.<div>используется для создания универсального контейнера, используемого для группировки и стилизации блоков контента.<br>используется для вставки переноса строки в текст.<wbr>используется для указания места, в котором браузер может разрывать строку (автоматически переносить текст на новую строку), если это необходимо, при отображении на узком экране или в случае, когда текст слишком длинный для помещения в одну строку.<hr>используется для создания горизонтальной линии, разделяющей контент.<pre>сохраняет форматирование текста, включая пробелы и переносы строк, которые мы вставили в наш код.
Списки:
<ul>,<li>используются для создания маркированных (ненумерованных) списков:<ul>контейнер для создания маркированных (ненумерованных).<li>используются для создания элементов списка.
<ol>,<li>используются для создания нумерованных списков:<ol>контейнер для создания нумерованных списков.<li>используются для создания элементов списка.
<dl>,<dt>, и<dd>используются для создания списка определений:<dl>(Definition List) представляет собой контейнер для списка определений и используется для группировки пар состоящих с термина и определения.<dt>(Definition Term) используется для определения термина (слова или фразы) в списке определений<dl>.<dd>(Definition Description) предоставляет определение или описание термина, указанного в теге<dt>, в списке определений<dl>.
Таблицы:
<table>,<caption>,<th>,<tr>,<td>,<thead>,<tbody>, и<tfoot>- элементы для создания таблицы:<table>используется для создания таблицы (является контейнером для элементов таблицы).Таблицы в HTML состоят из строк (<tr>), которые, в свою очередь, содержат ячейки данных (<td>) или заголовочные ячейки (<th>).<caption>используется для добавления заголовка к таблице. Размещается внутри элемента<table>. Этот заголовок обычно располагается над самой таблицей и предоставляет описание или контекст для таблицы.<th>определяет заголовочную ячейку, которая обычно используется для заголовков столбцов или строк. Заголовочные ячейки по умолчанию выделяются жирным текстом и центрируют содержимое.<tr>используется для создания строки внутри таблицы.<td>используется для создания ячеек данных (data cells) внутри строки таблицы (<tr>).<thead>используется для группировки заголовков столбцов внутри таблицы. Он обычно используется вместе с тегами<th>(заголовочные ячейки) внутри тега<tr>(строки таблицы).<tbody>используется для группировки основного содержимого таблицы внутри элемента<table>. Он обычно содержит один или несколько рядов (<tr>) с ячейками данных (<td>) или заголовочными ячейками (<th>).<tfoot>используется для группировки элементов(<tr>) подвала таблицы внутри элемента<table>. Этот элемент обычно содержит итоговые или дополнительные сведения, располагаемые внизу таблицы.
HTML-теги для мультимедиа контента
<img>используется для вставки изображений в веб-страницы. Он является пустым элементом, что означает, что он не имеет закрывающего тега. Вместо этого, атрибуты тега используются для указания различных параметров изображения.<picture>используется для создания гибких и адаптивных изображений, позволяя вам предоставлять разные изображения для различных устройств и разрешений экранов. Он часто используется совместно с элементом <source> и атрибутом srcset. Использование <picture> позволяет оптимизировать загрузку изображений для различных устройств и экранов, что особенно важно для создания адаптивных и быстрых веб-страниц. Этот тег приносит особенно большую пользу в мобильных сценариях, где оптимизация загрузки изображений играет ключевую роль.<audio>используется для встраивания аудиофайлов в веб-страницы. Он предоставляет возможность воспроизведения аудио контента прямо в браузере, без необходимости использования внешних программ.<video>предназначен для встраивания видео в веб-страницы. Он позволяет воспроизводить видео напрямую в браузере без необходимости использования сторонних плееров.<source>используется внутри элементов<audio>и<video>для определения различных источников мультимедийного контента. Этот тег предоставляет альтернативные источники файлов, чтобы обеспечить совместимость с разными браузерами и форматами файлов. А для <picture> элементы <source> определяют различные варианты изображений в зависимости от условий, заданных атрибутом media и разрешения экрана. Браузер выбирает первое подходящее изображение для отображения.<iframe>используется для встраивания веб-страниц или содержимого из других веб-сайтов в текущую страницу, например Google-карт или видео с популярных платформ, таких как YouTube и др. <iframe> создает "встроенное окно" в вашей странице, где внутри этого окна отображается другая веб-страница.<object>используется для встраивания различных объектов, таких как анимации Flash, видео, аудио, Java апплеты и другие мультимедийные элементы в веб-страницы.<param>используется внутри элемента <object> для передачи параметров в плагины (например, встроенные приложения Java, Flash или Silverlight).<track>используется для добавления текстовых дорожек (например, субтитров) к видео или аудио элементу на веб-странице. Этот тег позволяет предоставлять субтитры для пользователей, а также поддерживать многоязычность и улучшать доступность мультимедийного контента.
Интерактивные элементы:
<a>используется для создания на веб-странице гиперссылок для перехода на другие веб-страницы, документы, изображения, аудио- и видеофайлы, электронные почтовые адреса и др. или же на конкретные разделы этой же веб-страницы.<button>(кнопка) используется для создания кнопки.<input>(поле ввода) используется для создания полей ввода данных, чекбоксов, радиокнопок и других элементов.<select>и<option>(выпадающий список) используются для создания выпадающих списков.<select>создает выпадающий список.<option>определяет отдельные элементы в списке.<textarea>используется для создания многострочного текстового поля ввода.<form>используется для создания форм на веб-страницах. Элементы, такие как<input>,<textarea>,<select>,<button>,<label>и другие, могут располагаться внутри тега<form>.<label>(метка) используется для создания меток, связывающих текстовое описание с элементом формы.<fieldset>и<legend>используются для группировки связанных элементов формы и добавления им заголовков.<fieldset>используется для группировки связанных элементов формы.<legend>добавляет заголовок группе.<details>и<summary>используются для создания интерактивных виджетов с дополнительной информацией которые можно развернуть или свернуть.
Комментарий:
<!-- ... -->используется для добавления комментариев в исходный код веб-страницы. Комментарии не отображаются в браузере при просмотре страницы и служат исключительно для аннотаций, объяснений кода или временного исключения определенных частей кода.
Полный список HTML-тегов можно найти по ссылке: https://developer.mozilla.org/ru/docs/Web/HTML/Element
Атрибуты:
Атрибуты HTML-тегов представляют собой дополнительные сведения или параметры, которые могут быть добавлены к HTML-элементам. Они обеспечивают дополнительную информацию о том, как должен отображаться или вести себя данный элемент. Атрибуты обычно включают пару "имя-значение" и добавляются в открывающий тег элемента.
Некоторые элементы имеют свои уникальные атрибуты, которые определяют их поведение или внешний вид. Например, у тега <img> есть атрибут src, который указывает на путь к изображению, и атрибут alt, предоставляющий альтернативный текст для изображения.
Атрибуты могут быть обязательными или необязательными в зависимости от элемента и их роли в структуре документа. Документация HTML обычно содержит информацию о доступных атрибутах для каждого элемента.
Список атрибутов можно найти по ссылке: Список атрибутов HTML
Семантика:
HTML - это язык разметки веб-страниц, и его семантика связана с тем, как мы описываем и структурируем содержимое веб-страницы, чтобы браузер и другие инструменты могли понимать его смысл.
С использованием семантических тегов мы делаем страницу более понятной для браузеров, поисковых систем и разработчиков.
Применение семантики в HTML позволяет создавать логически структурированные веб-страницы.