Информация | Учебник HTML | schoolsw3.com
HTML — это стандартный язык разметки для создания Веб страниц.
Что такое HTML?
- HTML расшифровывается как Гипертекстовый Язык Разметки
- HTML — код описывает структуру веб страниц с помощью разметки
- HTML — элементы являются строительными блоками страниц HTML
- HTML — элементы представляют теги
- HTML — теги содержат, «Заголовок», «Параграф», «Таблицы» и т.д.
- Браузеры не отображают теги HTML, они используют их для вывода содержимого страницы
HTML Простой документ
Пример
HTML пример
<h2>Мой первый заголовок</h2>
<p>Мой первый параграф.</p>
</body>
</html>
Объяснение примера
<!DOCTYPE html>
— декларация, определяет документ HTML5<html>
— элемент, является корневым элементом HTML страницы<head>
— элемент, содержит метаинформацию о документе<title>
— элемент, задает заголовок документа<body>
— элемент, содержит видимый контент страницы<h2>
— элемент, определяет большой заголовок<p>
— элемент, определяет параграф
Что такое HTML элемент?
HTML элемент определяется начальным тегом, некоторым содержимым и конечным тегом:
<tagname>Контент находится здесь…</tagname>
HTML элемент это все от начального тега до конечного тега:
<h2>Мой первый заголовок</h2>
<p>Мой первый параграф.</p>
Начальный тег | Содержимое элемента | Конечный тег |
---|---|---|
<h2> | Мой первый заголовок | </h2> |
<p> | Мой первый параграф. | </p> |
<br> | нет | нет |
Примечание: Некоторые HTML элементы не имеют содержимого (например, элемент <br> ). Эти элементы называются пустыми элементами. Пустые элементы не имеют конечного тега!
Веб Браузеры
Цель веб-браузеров (Chrome, IE, Firefox, Safari) — чтения HTML документов и их отображения.
Браузер не отображает HTML теги, он использует их, чтобы определить, как отобразить документ:
HTML Структура страницы
Ниже представлена визуализация структуры страницы HTML:
<html>
<head>
<title>
Заголовок страницы</title>
</head>
<body>
<h2>
Это заголовок</h2>
<p>
Это параграф.</p>
<p>
Это еще один параграф.</p>
</body>
</html>
Примечание: Содержание находящаяся внутри <body>
(в белой секции выше), будет отображаться в браузере.
HTML история
С первых дней существования Всемирной паутины существовало множество версий HTML:
Этот учебник соответствует последнему стандарту HTML 5.
Тег | Описание |
---|---|
<!DOCTYPE> | Определяет тип документа |
<html> | Определяет документ в HTML |
<head> | Определяет информацию о документе |
<title> | Определяет название для документа |
<body> | Определяет тело документа |
<h2> до <h6> | Определяет заголовки |
<p> | Определяет параграф |
<br> | Вставляет разрыв строки |
<hr> | Определяет тематическое изменение в содержании |
<!—…—> | Определяет комментарий |
Тег | Описание |
<acronym> | Не поддерживается в HTML5. Лучше используйте <abbr>. Определяет акроним |
<abbr> | Определяет аббревиатуру или акроним |
<address> | Определяет контактную информацию для автора/владельца из документа/статьи |
<b> | Определяет полужирный текст |
<bdi> | Изолирует часть текста, которая может быть отформатирована в другом направлении, от другого текста за его пределами |
<bdo> | Переопределяет текущее направление текста |
<big> | Не поддерживается в HTML5. Лучше используйте CSS. Определяет большой текст |
<blockquote> | Определяет раздел, заключенный в кавычки из другого источника |
<center> | Не поддерживается в HTML5. Лучше используйте CSS. Определяет центрированный текст |
<cite> | Определяет название из работы |
<code> | Определяет часть из компьютерного кода |
<del> | Определяет текст, который был удален из документа |
<dfn> | Представляет определяющий экземпляр термина |
<em> | Определяет подчеркнутый текст |
<font> | Не поддерживается в HTML5. Лучше используйте CSS. Определяет шрифт, цвет и размер текста |
<i> | Определяет часть текста альтернативным голосом или настроением |
<ins> | Определяет текст, вставленный в документ |
<kbd> | Определяет ввод с клавиатуры |
<mark> | Определяет выделенный / выделенный текст |
<meter> | Определяет скалярное измерение в известном диапазоне (датчик) |
<pre> | Определяет форматированный текст |
<progress> | Представляет ход выполнения задачи |
<q> | Определяет короткую цитату |
<rp> | Определяет, что показывать в браузерах, которые не поддерживают аннотации ruby |
<rt> | Определяет объяснение/произношение символов (для Восточно-Азиатской типографии) |
<ruby> | Определяет аннотацию ruby (для Восточно-Азиатской типографии) |
<s> | Определяет текст, который больше не является правильным |
<samp> | Определяет пример вывода из компьютерной программы |
<small> | Определяет меньший текст |
<strike> | Не поддерживается в HTML5. Лучше используйте <del> или <s>. Определяет зачеркнутый текст |
<strong> | Определяет строгий текст |
<sub> | Определяет подстрочный текст |
<sup> | Определяет надстрочный текст |
<template> | Определяет шаблон |
<time> | Определяет дату/время |
<tt> | Не поддерживается в HTML5. Лучше используйте CSS. Определяет текст телетайпа |
<u> | Определяет текст, который должен стилистически отличаться от обычного текста |
<var> | Определяет переменную |
<wbr> | Определяет возможный разрыв строки |
Тег | Описание |
<form> | Определяет форму HTML для пользовательского ввода |
<input> | Определяет ввод управления |
<textarea> | Определяет многострочный ввод (текстовое поле) |
<button> | Определяет кликабельную кнопку |
<select> | Определяет раскрывающийся список |
<optgroup> | Определяет группу связанных параметров в раскрывающемся списке |
<option> | Определяет параметр в раскрывающемся списке |
<label> | Определяет метку для элемента <input> |
<fieldset> | Группирует связанные элементы в форме |
<legend> | Определяет заголовок для элемента <fieldset> |
<datalist> | Задает список предопределенных параметров для элементов управления вводом |
<output> | Определяет результат вычисления |
Тег | Описание |
<frame> | Не поддерживается в HTML5. Определяет окно (фрейм) в наборе кадров |
<frameset> | Определяет набор фреймов |
<noframes> | Не поддерживается в HTML5. Определяет альтернативное содержимое для пользователей, не поддерживающих фреймы |
<iframe> | Определяет встроенный фрейм |
Тег | Описание |
<img> | Определяет изображение |
<map> | Определяет клиентскую карту изображений |
<area> | Определяет область внутри изображения карты |
<canvas> | Используется для рисования графики по ходу, с помощью скриптов (обычно код JavaScript ) |
<figcaption> | Определяет заголовок для элемента <figure> |
<figure> | Задает автономное содержимое |
<picture> | Определяет контейнер для нескольких ресурсов изображений |
<svg> | Определяет контейнер для графики SVG |
Тег | Описание |
<audio> | Определяет звук контента |
<source> | Определяет несколько ресурсов мультимедиа для элементов медиа (<video>, <audio> и <picture>) |
<track> | Определяет текстовые дорожки для элементов медиа (<video> и <audio>) |
<video> | Определяет видео или фильм |
Тег | Описание |
<a> | Определяет гиперссылку |
<link> | Определяет связь между документом и внешним ресурсом (наиболее часто используемым для связи с таблицами стилей) |
<nav> | Определяет навигацию ссылок |
Тег | Описание |
<ul> | Определяет неупорядоченный список |
<ol> | Определяет упорядоченный список |
<li> | Определяет элемент списка |
<dir> | Не поддерживается в HTML5. Лучше используйте <ul>. Определяет каталог списка |
<dl> | Определяет описание списка |
<dt> | Определяет термин/имя в списке описания |
<dd> | Определяет описание термина/имени в списке описания |
<menu> | Определяет список/меню команд |
<menuitem> | Определяет команду/меню, которые пользователь может вызвать из всплывающего меню |
Тег | Описание |
<table> | Определяет таблицу |
<caption> | Определяет заголовок в таблицы |
<th> | Определяет заголовк ячейки в таблице |
<tr> | Определяет строку в таблице |
<td> | Определяет ячейку в таблице |
<thead> | Группирует содержимое заголовка в таблице |
<tbody> | Группирует содержимое тела в таблице |
<tfoot> | Группирует содержание нижнего колонтитула в таблице |
<col> | Задает свойства столбца для каждого столбца в элементе <colgroup> |
<colgroup> | Задает группу из одного или нескольких столбцов в таблице для форматирования |
Тег | Описание |
<style> | Определяет информацию о стиле документа |
<div> | Определяет контейнер в документе |
<span> | Определяет промежуток в документе |
<header> | Определяет заголовок документа или раздела |
<footer> | Определяет нижний колонтитул для документа или раздела |
<main> | Определяет основное содержание документа |
<section> | Определяет раздел в документе |
<article> | Определение статьи |
<aside> | Определяет содержимое из содержимого страницы |
<details> | Определяет дополнительные сведения, которые пользователь может просмотреть или скрыть |
<dialog> | Определяет диалоговое окно или окно |
<summary> | Определяет видимый заголовок элемента <details> |
<data> | Связывает данный контент с машиночитаемым переводом |
Тег | Описание |
<head> | Определяет информацию о документе |
<meta> | Определяет метаданные о документе HTML |
<base> | Задает базовый URL/цель для всех относительных URL адресов в документе |
<basefont> | Не поддерживается в HTML5. Лучше используйте CSS. Задает цвет, размер и шрифт по умолчанию для всего текста в документе |
Тег | Описание |
<script> | Определяет клиентский сценарий |
<noscript> | Определяет альтернативное содержимое для пользователей, не поддерживающих клиентские сценарии |
<applet> | Не поддерживается в HTML5. Лучше используйте <embed> или <object>. Определяет встроенный апплет |
<embed> | Определяет контейнер для внешнего (не-HTML) приложения |
<object> | Определяет внедренный объект |
<param> | Определяет параметр для объекта |
Семантические теги HTML — Как создать сайт
Семантические теги в языке HTML
HTML-тегиСемантические HTML-теги
Семантические теги — это теги, которые предназначены для того чтобы компьютерные программы (поисковые системы, сборщики информации, речевые браузеры и т.д.), понимали какой тип информации заложен в данных тегах.
Политика спецификации HTML5 заключается в том, чтобы каждый HTML-тег имел свою семантику. Давайте приведем простой пример, например есть теги <s>
</s>
они делают текст зачёркнутым. Раньше поисковая система зайдя на сайт и увидев этот тег, никак не реагировала на него, теперь она должна понимать, что это не просто зачеркнутый текст, а например что это обозначение старого ценника у товара или устаревшей (не актуальной) информации.
Ниже рассмотрены наиболее популярные теги, имеющие на данный момент семантический акцент.
abbr — текст размещённый между этими тегами, в HTML5, воспринимается как аббревиатура или акроним. В HTML4 для акронимов существовал свой тег acronym.
address — содержит адрес (контактные данные создателя сайта). Может содержать почтовый адрес, емаил, телефон. Вместо него лучше использовать микроразметку hCard.
blockquote — длинная цитата занимающая целый абзац p (теги цитаты обрамляют абзац). Семантический акцент — цитата взятая из внешних источников.
cite — названия произведений, романов, картин, стихов, песен и т.д.
del — старый, удалённый текст.
dfn — данным тегом обрамляется впервые встречающийся термин в тексте.
ins — новый, добавленный текст.
em — наклонный шрифт, ключевое слово, усиление голоса, логическое ударение на слово в предложении. Например тег i, хоть и делает шрифт наклонным, но не имеет семантического акцента.
q — короткая цитата являющаяся частью абзаца p
s — ошибочная или устаревшая информация, но при этом оставленная на странице (например старый ценник).
strong — жирный шрифт, ключевое слово, усиление голоса, изменение интонации, текст высокой степени важности. Например тег b, хоть и делает шрифт жирным, но не имеет семантического акцента.
Некоторые семантические теги появившиеся в HTML5
<article>
</article>
— основной контент страницы, тег HTML5,
Семантический акцент: поисковая система считает, что информация расположенная между этими тегами, является основной на HTML-странице.
<aside>
</aside>
— боковая панель (сайдбар) сайта, тег HTML5,
Семантический акцент: поисковая система считает, что информация расположенная между этими тегами, является частью сайдбара (боковой панели).
<footer>
</footer>
— подвал сайта, тег HTML5,
Семантический акцент: поисковая система считает, что информация расположенная между этими тегами, является подвалом сайта.
На данный момент в этой статье рассмотрены лишь некоторые семантические теги, в будущем мы рассмотрим семантический акцент каждого HTML-тега по отдельности.
PS: развитие языка HTML, движется в направлении семантики, когда для каждой значимой информации, будет создаваться свой собственный тег. Чтобы более яснее представить себе что такое семантика, почитайте статьи посвящённые микроразметке.
Читать далее: Список всех HTML-тегов по алфавиту.
Дата публикации поста: 5 февраля 2016
Дата обновления поста: 15 октября 2014
Навигация по записям
Что такое семантические теги HTML и как их использовать
Семантические теги HTML позволяют добавлять смысл в разметку, чтобы поисковые системы, программы чтения с экрана и веб-браузеры могли понять ее. По умолчанию, когда пользовательский агент читает ваш контент, он не понимает контекста и смысла. Семантические теги HTML позволяют предоставлять пользователям структурированный контент, что особенно важно для SEO и доступности на странице.
Хотя семантические теги существовали в более ранних версиях HTML, спецификации HTML5 добавили в синтаксис несколько новых семантических элементов — как на блочном, так и на встроенном уровнях. В этой статье мы рассмотрим, как работает семантика HTML, а также дадим вам несколько советов о том, как максимально эффективно использовать эту функцию.
Семантические и несемантические элементы HTML
Разметка HTML состоит из двух видов элементов: семантических и несемантических. У обоих есть своя цель. Вам следует использовать семантические теги, когда вы хотите разметить блок содержимого, который играет важную роль в структуре документа.Например,
и
С другой стороны, несемантические теги предназначены для общего содержимого. Разработчики обычно используют их, когда им нужно разметить блок содержимого для стилизации. Наиболее часто используемые несемантические теги — это Возможно, неудивительно, что наиболее часто используемые семантические элементы — это те, которые уже существовали до появления HTML5. Собственно, есть три семантических тега, без которых даже HTML-документ не создать: Эти три семантических элемента составляют основу каждого HTML-документа. Помимо них, вот самые популярные семантические элементы, все из которых определены более ранними спецификациями HTML: Некоторые из вышеперечисленных элементов также имеют дополнительные теги, которые также являются семантическими. Например, Наиболее часто используемые семантические теги
,
и ,
для разных уровней заголовков.,
,
,
,