Содержание
Базовые теги HTML — Джино • Журнал
Продолжаем знакомиться с языком разметки HTML, основой основ большинства сайтов в интернете. Раньше мы уже рассказывали об этом языке, а теперь изучим самые простые и самые необходимые теги и их атрибуты в HTML.
Напомним, что теги и атрибуты — это инструменты, с помощью которых контент на странице сайта организовывается тем или иным образом. Атрибуты прописываются внутри тегов и имеют рядом с собой знак «=», а сами теги всегда заключаются в угловые скобки. Почти все теги в HTML являются парными и окружают с двух сторон ту часть контента, к которой они должны быть применены. Первый, открывающий, тег пишется без дополнительных символов, а во втором, закрывающем, теге после первой скобки появляется знак «/».
Основное
<html></html> Сигнализирует браузеру, что он имеет дело с HTML-документом.
<head></head> Очерчивает часть документа, которая не видна на странице.
Предназначен для тега названия, для размещения счётчиков веб-аналитики и не только.
<title></title> Тот самый тег названия документа, его содержимое отображается в ярлыке вкладки браузера.
<body></body> Ограничивает часть документа, которая видна на странице. О том, какие теги здесь могут использоваться, мы покажем далее.
Оформление текста
<i></i> Выделяет текст курсивом.
<b></b> Делает текст полужирным.
<u></u> Подчёркивает текст.
<s></s> Зачёркивает текст.
<cite></cite> Предназначается для оформления цитат.
<tt></tt> Имитирует шрифт печатной машинки.
<code></code> Выделяет текст шрифтом Monospace, который используется для оформления фрагментов кода.
<font size=?></font> Определяет размер текста с помощью значений от 1 до 7, которые нужно подставлять вместо вопросительного знака.
<font color=?></font> Определяет цвет текста с помощью формата RRGGBB. Шестизначный код цвета так же вставляется вместо вопросительного знака.
Организация текста
<h2></h2> Оформляет текст в виде самого большого заголовка.
<h6></h6> Оформляет текст в виде самого маленького заголовка. Также можно использовать промежуточные значения 2, 3, 4, 5: чем больше цифра, тем меньше значимость заголовка в структуре текста.
Заголовок h6
<p></p> Оформляет абзац.
<p align=?> Выравнивает абзац нужным образом. Вместо вопросительного знака здесь можно поставить одно из четырёх значений: left (по левому краю), right (по правому краю), justify (по ширине) или center (по центру).
<br> Добавляет перенос
строки.
<blockquote></blockquote> Вставляет отступы с обеих сторон текста.
<ol></ol>
- Предназначается
- для
- нумерованных
- списков.
<ul></ul>
- Оформляет
- ненумерованный
- список.
<li> Сопровождает каждый пункт в списке, обозначая его цифрой или маркером — в зависимости от типа списка.
Работа со ссылками
<a href="URL">ТЕКСТ</a> «Зашивает» ссылку в нужный фрагмент текста. Адрес ссылки вставляется вместо «URL», а текст по умолчанию окрашивается в синий цвет и подчёркивается.
<a href="URL">
<img src="imgURL"></a> Добавляет ссылку, которая открывается при нажатии на картинку. Адрес картинки ставится вместо «imgURL».
<a href="#якорь">ТЕКСТ</a> С помощью этого тега можно сослаться на «якорь» — определённый фрагмент внутри просматриваемой страницы. К примеру, якоря используется для быстрого перехода из оглавления к соответствующей части статьи.
Вместо «ТЕКСТ» в первом теге необходимо поместить слово или фразу, нажав на которую, можно будет перейти в нужный участок страницы. А там, куда нужно привести читателя, необходимо добавить атрибут id="якорь" в любой тег. Например, по этой ссылке можно перейти в раздел «Основное» в начале статьи.
Работа с графикой
<img src="URL"> Добавляет изображение. Вместо «URL» нужна ссылка на необходимый файл.
<img src="URL" align=?> Как и в <p align=?>, этот параметр выравнивает изображение нужным образом, однако здесь применяется уже шесть значений: left (слева), right (справа) и center (по центру), а также bottom (внизу), top (вверху) и middle (посередине)
<img src="URL" border=?> Создаёт рамку в виде сплошной линии вокруг изображения. Вместо вопросительного знака можно указать любое целое положительное число.
Чем больше число, тем толще рамка.
<body background="URL"> Атрибут background в теге <body> позволяет установить картинку в качестве фона страницы.
<hr> Создаёт сплошную горизонтальную линию.
Вы можете проверить работу всех перечисленных выше тегов, создавая свои собственные HTML-документы. Для этого подойдёт даже Microsoft Office Word или другой текстовый редактор. Необходимо лишь сохранить файл с кодом в формате .html. Но также существуют и HTML-редакторы, которые предназначены для работы с этим языком — о них мы расскажем в одной из наших следующих статей.
Главные теги — Учебник HTML — schoolsw3.com
❮ Назад
Далее ❯
HTML элемент <head> контейнер для всех головных элементов:
<title>, <style>,
<meta>, <link>, <script>, и <base>.
HTML <head>
Элемент <head> представляет собой контейнер для метаданных (данных о данных) и помещается между ними.
Тег <html> и тег <body>.
Метаданные HTML — это данные о документе HTML. Метаданные не отображаются.
Метаданные обычно определяют заголовок документа, набор символов, стили, сценарии и другую метаинформацию.
HTML <title>
Элемент <title> определяет заголовок документа и является обязательным во всех HTML документах.
Элемент <title>:
- Определяет заголовок на вкладке браузера
- Предоставляет заголовок для страницы, когда она добавляется в избранное
- Отображает заголовок страницы в результатах поиска
Простой HTML документ:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
Содержание документа.
…..
</body>
</html>
Попробуйте сами »
HTML <style>
Элемент <style> используется для определения информации о стиле для одной HTML страницы:
Пример
<style>
body {background-color: powderblue;}
h2 {color: red;}
p {color: blue;}
</style>
Попробуйте сами »
HTML <link>
Элемент <link> используется для связи с внешними таблицами стилей:
Пример
<link rel=»stylesheet» href=»mystyle.css»>
Попробуйте сами »
Совет: Чтобы узнать все о CSS, посетите CSS Учебник.
HTML <meta>
Элемент <meta> используется для указания используемого набора символов, описания страницы, ключевых слов, автора и других метаданных.
Метаданные используются браузерами (как отображать контент), поисковыми системами (ключевые слова) и другими веб службами.
Определение используемый набор символов:
<meta charset=»UTF-8″>
Определение описание вашей веб страницы:
<meta name=»description» content=»Бесплатные веб учебники»>
Определение ключевых слов для поисковых систем:
<meta name=»keywords» content=»HTML, CSS, XML, JavaScript»>
Определение автора страницы:
<meta name=»author» content=»Щипунов Андрей»>
Документ обновляется каждые 30 секунд:
<meta http-equiv=»refresh» content=»30″>
Пример тега <meta>:
Пример
<meta charset=»UTF-8″>
<meta name=»description» content=»Бесплатные веб учебники»>
<meta name=»keywords» content=»HTML,CSS,XML,JavaScript»>
<meta name=»author» content=»Щипунов Андрей»>
Попробуйте сами »
Настройка области просмотра
В HTML существует метод, позволяющий веб дизайнерам взять контроль над видовым окном через тег <meta>.
Видовой экран — это видимая область веб страницы пользователя. Он зависит от устройства и будет меньше на мобильном телефоне, чем на экране компьютера.
Вы должны включить следующий элемент <meta> видового экрана на всех ваших веб страницах:
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
В <meta> элемент viewport содержит инструкции для браузера о том, как управлять размерами страницы и масштабирование.
Часть width=device-width задает ширину страницы, соответствующую ширине экрана устройства (которая будет варьироваться в зависимости от устройства).
Часть initial-scale=1.0 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.
Вот пример веб страницы без мета-тега viewport и той же веб страницы с тегом viewport <meta>:
Совет: Если вы просматриваете эту страницу с телефона или планшета, вы можете нажать на две ссылки ниже, чтобы увидеть разницу.
Без мета тега viewport
С помощью мета тега viewport
HTML <script>
Элемент <script> используется для определения клиентского Javascript.
JavaScript пишет «Привет JavaScript!» в HTML элемент с помощью:
Пример
<script>
function myFunction() {
document.getElementById(«demo»).innerHTML = «Привет JavaScript!»;
}
</script>
Попробуйте сами »
Совет: Чтобы узнать все о JavaScript, посетите JavaScript Учебник.
HTML <base>
Элемент <base> задает базовый URL адрес и базовый целевой объект для всех относительных URL адресов на странице:
Пример
<base href=»https://schoolsw3.com/images/» target=»_blank»>
Попробуйте сами »
HTML Главные элементы
| Тег | Описание |
|---|---|
| <head> | Определяет информацию о документе |
| <title> | Определяет заголовок документа |
| <base> | Определяет адрес по умолчанию или цель по умолчанию для всех ссылок на странице |
| <link> | Определяет связь между документом и внешним ресурсом |
| <meta> | Определяет метаданные о документе HTML |
| <script> | Определяет сценарий на стороне клиента |
| <style> | Найдете информацию о стиле документа |
Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.
❮ Назад
Далее ❯
— HTML: язык гипертекстовой разметки
HTML-элемент документа. Область основного содержимого состоит из содержимого, которое непосредственно связано с центральной темой документа или центральной функциональностью приложения или расширяет ее.
В документе не должно быть более одного элемента hidden .
| Категории контента | Вытекающее содержимое, пальпируемое содержимое. |
|---|---|
| Разрешенный контент | Текущее содержимое. |
| Отсутствие тега | Нет; как начальный, так и конечный теги являются обязательными. |
| Разрешенные родители | Где содержание потока ожидается, но только если иерархически правильный основной элемент . |
| Неявная роль ARIA | основной |
| Разрешенные роли ARIA | Нет роль разрешено |
| Интерфейс DOM | HTMLЭлемент |
Этот элемент включает только глобальные атрибуты.
Содержимое элемента
, таких заголовков, как h3 и т. д.,
<основной>Яблоки
Яблоко — это семечковый плод яблони.
<статья>Красное вкусное
<р> Эти ярко-красные яблоки чаще всего можно найти во многих супермаркетах.…
…
<статья>Гренни Смит
Эти сочные зеленые яблоки станут отличной начинкой для яблочных пирогов.
…
…
Результат
Ориентир
Элемент главная роль ориентира . Ориентиры могут использоваться вспомогательными технологиями для быстрой идентификации больших разделов документа и перехода к ним. Предпочитайте использовать элемент role="main" , если нет проблем с поддержкой устаревших браузеров.
Пропустить навигацию
Пропустить навигацию, также известную как «skipnav», — это метод, который позволяет пользователю вспомогательных технологий быстро обходить большие разделы повторяющегося контента (основная навигация, информационные баннеры и т. д.). Это позволяет пользователю быстрее получить доступ к основному содержимому страницы.
Добавление атрибута id к элементу
<тело> Перейти к основному содержанию <основной>
- WebAIM: ссылки «Пропустить навигацию»
Режим чтения
Функция режима чтения через браузер ищет наличие
- Создание веб-сайтов для Safari Reader Mode и других приложений для чтения.
| Спецификация |
|---|
| Стандарт HTML # the-main-element |
таблицы загружаются только в браузере с поддержкой JavaScript. Включите JavaScript для просмотра данных.
- Основные элементы конструкции:
- Элементы, относящиеся к разделу:
,, - АРИЯ: Главная роль
Обнаружили проблему с содержанием этой страницы?
- Отредактируйте страницу на GitHub.
- Сообщить о проблеме с содержимым.
- Посмотреть исходный код на GitHub.
Хотите принять участие?
Узнайте, как внести свой вклад.
Последний раз эта страница была изменена участниками MDN.
Тег HTML
❮ Пред.
Следующий ❯
Тег Содержимое тега
Элемент