Что такое теги html и какие виды тегов существуют
Содержание:
- HTML Справочник
- HTML Теги
- Формы и входящие данные
- HTML Теги
- Создание простого html-документ в блокноте
- Уроки CSS
- Полезные фишки для функционала и юзабилити сайта
- Форматирование текста
- Обновленная декларация doctype
- HTML Теги
- Как посмотреть html код страницы
- Тег nav
- Примеры
- Добавление видео на HTML страницу
- Тег article
- Советы и примечания
- Виды тегов html
- Итоговый вариант примера
- Заключение
HTML Справочник
HTML Теги по алфавитуHTML Теги по категорииHTML АтрибутыHTML Глобальные атрибутыHTML Атрибуты событийHTML ЦветаHTML CanvasHTML Аудио/ВидеоHTML Наборы символовHTML DoctypeHTML URL кодированиеHTML Коды языковHTML Коды странHTTP СообщенияHTTP МетодыPX в EM КонвертерГорячие клавиши
HTML Теги
<!—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>
Формы и входящие данные
| Тег | Описание |
|---|---|
| <form> | Определяет форму HTML для ввода пользователем |
| <input> | Определяет элемент управления вводом |
| <textarea> | Определяет многострочный элемент управления вводом (текстовая область) |
| <button> | Определяет кнопку, которую можно нажимать |
| <select> | Определяет выпадающий список |
| <optgroup> | Определяет группу соответствующих параметров в выпадающем списке |
| <option> | Определяет параметр в выпадающем списке |
| <label> | Определяет метку для <input> элемента |
| <fieldset> | Группы связанных элементов в форме |
| <legend> | Определяет заголовок для <fieldset> элемента |
| <datalist> | Определяет список предварительно определённых параметров управления вводом |
| <output> | Определяет результат расчёта |
HTML Теги
<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>
Создание простого html-документ в блокноте
1. Для того чтобы сделать свою первую html страницу откройте обычный блокнот и сохраните его под каким-то именем (например, index.html). Тип файла необходимо выбрать «все файлы», а после имени обязательно дописать «.html» или «.htm«, но лучше придерживаться первого варианта (хотя разницы нету).
Должен получиться файл «index.html«. В принципе это уже можно назвать html документом, однако в нем ничего нету, поэтому переходим к шагу два — наполнение страницы.
2. Отрываем созданный файл через блокнот и вписываем в него следующее (можете просто скопировать):
После этого сохраните этот файл. Теперь откройте index.html через любой браузер, в отрывшейся вкладке должна появиться надпись «У меня получилось сделать первую страницу!», а в заголовке будет написано «Пример создания страницы html в блокноте». Такой документ можно уже выкладывать в интернет. Как видите, ничего сложного нет, все просто.
Теперь вкратце поговорим о структуре любого html-документа.
Уроки CSS
Свойства CSS:
- border
- box-shadow
- border-collapse
- clear
- cursor
- direction
- display
- float
- font
- font-weight
- letter-spacing
- line-height
- margin
- overflow
- opacity
- padding
- text-align
- text-indent
- transform
- transform-origin
- text-transform
- transition
- text-decoration
- text-shadow
- vertical-align
- visibility
- white-space
- word-wrap
- z-index
- zoom
Еще про CSS:
- Введение в CSS
- Как сделать треугольник через CSS
- Вендорные префиксы CSS
- Линейный градиент
- Радиальный градиент
- Правило @font-face
- Декларация !important
- Медиа запросы (@)
- Спрайты CSS
- Псевдокласс nth-child (nth-of-type)
Спецсимолы HTML:
Буквы в кружочкеЦифры в кружочкеЗнаки цветовЕдиницы измеренияГалочкиГреческие буквыКарточные мастиКавычкиКопирайтМатематические символыПогодаРимские цифрыСердцаСтрелочкиВалютыЗакрыть/удалитьЗнаки зодиака
Полезные фишки для функционала и юзабилити сайта
Добавление счетчика посещений на сайтВывод html с помощью AJAXВывод html с помощью JavaScriptКак сделать выпадающие менюКак сделать faviconКак скрыть ссылку от поисковиковКак сделать красивую подсказку для ссылокКак увеличивать изображения (все способы)Эффект падающих снежинок на сайтКоды символов для HTMLДобавление социальных кнопок на сайтКоды и названия html цветов для сайтаПрименение особенностей HTML5 в поисковой оптимизацииЛишние элементы любого сайтаКак сделать фон для сайтаКак сделать бегущую строку на сайтеКак сделать строку как NOLIX и DAOSКак убрать подчеркивание ссылкиКак сделать кнопку на сайте ссылкойКакой выбрать шрифт для сайтаКак добавить RSS ленту на сайтКак добавить Feedburner на сайтКак добавить кнопку «Наверх» на сайтеКак сделать якорь ссылкиКак сделать форму обратной связи на php с каптчейКак скруглить углы в HTML через CSSКак вставить музыку на сайтеКак сделать карту изображений (карта ссылок)Как сделать слайдерКак сделать обтекание картинки текстомКак открыть ссылку в новом окнеXML форматКак создать сайт с нуля — пошаговая инструкцияКак сделать html ссылку на номер телефонаКак изменить цвет текста в HTML и CSSЧто такое микроразметка сайтаМикроразметка хлебных корочек6 лучших редакторов для работы с HTML-разметкойКак изменить вид ссылки при наведенииКак разместить элементы списка горизонтальноКак поменять скролл бар на сайтеКак вывести теги html на странице сайтаКак убрать маркеры в маркированном спискеМета тег viewportМета тег charsetGoogle fontsКак убрать рамку вокруг картинки в htmlКак изменить размер картинки в htmlКурсивный текст в htmlПодчеркнутый текст htmlЖирный шрифт htmlЗачеркнутый текст htmlПробел htmlКнопка htmlТермин Гипертекст
Форматирование текста
<h1></h1>……<h6></h6>. — теги заголовков, от самого большого к самому маленькому.
— жирный текст без придания важности выделенному фрагменту. — расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием
<strong></strong> — расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием.
— выделение текста курсивом без придания важности.
— зачёркивает текст, помечая его удалённым.
— отображает перечёркнутый текст.
— подчёркивает текст, визуально выделяя внесённые изменения.
— подчёркивание без дополнительного акцентирования внимания. — расставление акцентов путём выделения фрагментов текста курсивом
<em></em> — расставление акцентов путём выделения фрагментов текста курсивом.
<mark></mark> — выделение частей текста жёлтым маркером.
<tt></tt> — имитация текста, набранного на печатной машинке.
<small></small> — отображение фрагмента с меньшим кеглем шрифта, чем у остального текста.
<sub></sub> — подстрочное начертание символов.
<sup></sup> — надстрочное начертание символов.
<cite></cite> — оформление цитат.
<address> — добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.
<pre></pre> — вывод неформатированного текста с сохранением пробелов и особенностей переносов.
<p></p> — контейнер для абзаца.
<br> — переносит текст на другую строку без создания абзаца.
<blockquote> </blockquote> — отступы с обеих сторон для оформления цитаты или врезки.
<q></q> — краткое цитирование.
<dl></dl> — контейнер для размещения термина и его определения.
<dt> — добавление термина.
<dd> — добавление определения понятия
<dfn> — выделение термина курсивом. Последующий текст должен раскрывать понятие.
<abbr> — указывает, что текст является аббревиатурой или акронимом. Для добавления пояснения используется атрибут title.
<ol></ol> — список с цифрами.
<ul></ul> — список со значками.
<li> — отметка каждого элемента перечня (цифра или значок в зависимости от типа списка).
<a></a> — добавление гиперссылки в текст. Имеет обязательный атрибут href, в котором указывается ссылка или якорь. Внутри контейнера помещается текст, при нажатии на который происходит переход на другую страницу или другое место на этой же странице.
<code></code> — выделение фрагмента кода с помощью шрифта monospace.
Обновленная декларация doctype
Вне зависимости от возможностей ваших целевых браузеров вы должны сообщать каждому браузеру, что хотите отображать своей контент с использованием спецификации HTML5. Это можно сделать с помощью декларации .
Декларация сообщает браузеру, на какой версии языка разметки написана текущая страница. Она делает это с помощью шаблона DTD (Document Type Definition — определение типа документа). DTD специфицирует правила, используемые языком разметки, благодаря чему браузеры корректно отображают контент.
Концепция doctype-деклараций вполне может сбить с толку. В нынешней спецификации HTML имеется множество деклараций doctype, различия между которыми не вполне очевидны. В таблице 1 показаны доступные на данный момент декларации doctype и их возможности.
Таблица 1. Doctype-декларации и их возможности
| Doctype-декларация | Возможности | Пример |
|---|---|---|
| HTML 4.01 strict | Разрешает использовать все элементы и атрибуты HTML, однако не допускает презентационных тегов, таких как font. Элементы frameset не разрешены. | <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> |
| HTML 4.01 transitional | Аналогична декларации HTML strict, но допускает использование таких тегов, как font. Элементы frameset не разрешены. | <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> |
| HTML 4.01 frameset | Аналогична декларации HTML transitional, но разрешает использование элементов frameset. | <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»> |
| XHTML 1.0 strict | Аналогична декларации HTML strict, однако весь контент должен быть представлен в формате XML. Например, каждый открывающий элемент должен иметь соответствующий ему закрывающий элемент. Элементы frameset не разрешены. | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»> |
| XHTML 1.0 transitional | Аналогична декларации HTML transitional, однако весь контент должен быть представлен в формате XML. Элементы frameset не разрешены. | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> |
| XHTML 1.0 frameset | Аналогична декларации XHTML transitional, однако разрешает элементы frameset. | <DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»> |
| XHTML 1.1 | Аналогична декларации XHTML strict, плюс предоставляет такие возможности для модулей, как поддержка Ruby для восточно-азиатских языков. | <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»> |
К счастью, в спецификации HTML5 декларация doctype существенно упрощена. И действительно, в HTML5 имеется лишь одна такая декларация. Чтобы ваш браузер осуществлял отображение с помощью спецификации HTML5, добавьте декларацию doctype, показанную в .
HTML Теги
<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><menu><menuitem><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>
Как посмотреть html код страницы
В любом браузере (например, Firefox, Google Chrome, Opera) нажмите правой кнопкой мыши на любом месте на странице сайта и выберите из выпадающего меню «исходный код страницы» или воспользоваться комбинацией CTRL+U. Перед Вами откроется html-код страницы. Каждая страница сайта, которая есть в интернете, имеет свой код.
Наверное, открыв html-код сайта, Вы могли испугаться тому, что многое из написанного кажется непонятным и сложным. Но это всего лишь иллюзия сложности. На самом деле, разметка HTML довольно простая (даже школьники на уроках информатики её осваивают без проблем).
Суммарное число html тегов не так уж и велико (по факту используется лишь 10-15 тегов). Плюс к тому же все страницы одного сайта очень похожи друг на друга (отличия заключаются лишь в контентной части). Давайте сразу рассмотрим простенький пример создания html-страницы, чтобы начать наше изучение.
Контент, содержащийся в теге , предназначен для навигационных целей. После добавления тега к примеру кода мы получаем код, показанный в .
Листинг 8. Добавление тега
<!DOCTYPE html>
<html>
<head>
<title>
A Simple HTML Page
</title>
</head>
<body>
<header>Header
<nav>
<a href='#'>Some Nav Link</a>
<a href='#'>Some Other Nav Link</a>
<a href='#'>A Third Nav Link</a>
</nav>
</header>
<section>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
<aside>
<p>
This is an aside for the first blog post.
</p>
</aside>
</article>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
</article>
</section>
<footer>Footer</footer>
</body>
</html>
Примеры
Пример 1 — определение ключевых слов для поисковых систем:
<meta name=»keywords» content=»HTML, CSS, XML, XHTML, JavaScript»>
Пример 2 — Определите описание веб-страницы:
<meta name=»description» content=»Free Web tutorials on HTML and CSS«>
Пример 3 — Определите автора страницы:
<meta name=»author» content=»html5css»>
Пример 4 — обновление документа каждые 30 секунд:
<meta http-equiv=»refresh» content=»30″>
Пример 5 — Настройка видового экрана, чтобы сделать ваш сайт хорошо выглядел на всех устройствах:
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
Добавление видео на HTML страницу
Для начала давайте определимся, что из себя представляет формат видеофайла.
Формат видеофайла – это определённая структура, в которой видеозапись хранится на носителе (запоминающее устройство) и определяется двумя состовляющими: файлом-контейнером, в котором хранится сама видеозапись, и кодеками, которые используются для обработки звука и изображения.
В настоящее время существует 3 поддерживаемых формата видео для элемента <video>:
| Браузер | MP4 | WebM | Ogg |
|---|---|---|---|
| Chrome | ДА | ДА | ДА |
| Firefox | ДА | ДА | ДА |
| Opera | ДА | ДА | ДА |
| Safari | ДА | НЕТ | НЕТ |
| IE | ДА | НЕТ | НЕТ |
| Edge | ДА | НЕТ | НЕТ |
- Контейнер MPEG-4 + видео кодек Н.264 + аудио кодек ААС. Это сочетание обычно называют «MPEG-4». Н.264 — высококачественный и гибкий видео кодек, но он запатентован и на его использование необходимо получить платную лицензию. Лицензионные требования стали основной причиной, почему браузеры отказываются его поддерживать.
- Контейнер Ogg + видео кодек Theora + аудио кодек Vorbis. Как правило, формат называется «Ogg Theora». Все кодеки и контейнер в этом варианте с открытым исходным кодом и без патентных или лицензионных ограничений.
- Контейнер WebM + видео кодек VP8 + аудио кодек Vorbis. «WebM» открытый формат мультимедиа, представленный компанией на конференции Google I/O 19 мая 2010 года. Формат не требует лицензионных отчислений, основан на открытых видео кодеках VP8 и VP9, аудио кодеке Vorbis и подмножестве медиа контейнера Matroska. Новый формат вместе с VP8 призван заменить проприетарный стандарт H.264/MPEG-4.
Теперь самое время рассмотреть пример в котором мы добавим видео-контент на веб-страницу и поговорим о некотрых нюансах:
<!DOCTYPE html> <html> <head> <title>Пример использования тега <video></title> </head> <body> <h1>Видео в HTML5</h1> <video width = "320" height = "240" poster = "10.jpg" controls> <source src = "123.mp4" type = "video/mp4"> <source src = "123.ogg" type = "video/ogg"> <track src = "sub_en.vtt" kind = "subtitles" srclang = "en" label = "English"> <track src = "sub_ru.vtt" kind = "subtitles" srclang = "ru" label = "Russian" default> Ваш браузер не поддерживает видео тег. </video> </body> </html>
В этом примере мы:
Добавили на страницу видео (тег <video>) шириной 320 пикселей и высотой 240 пикселей (атрибуты width = «320» height = «240»), атрибут poster — указывает местоположение изображения, которое пользователь будет видеть перед запуском видео (если атрибут не указан, то отображается первый кадр видео). Часто этим атрибутом пользователей вводят в заблуждение (отсутствие того контента, которое изображено на картинке).
Атрибутом controls добавили отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения / паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).
Использовали тег <source>, который позволяет указать несколько вариантов формата видео (в этом случае браузер сможет выбрать подходящий формат для загрузки и воспроизведения). Чтобы повысить эффективность работы клиента, при использовании нескольких форматов нужно указывать в тегах <source> атрибут type (MIME-типы для видео):
| Формат | MIME-типы |
|---|---|
| MP4 | video/mp4 |
| Ogg | video/ogg |
| WebM | video/webm |
Благодаря тегу <track> добавили субтитры к видео:
- Добавили путь к файлу атрибутом src.
- Установили тип дорожки — субтитры kind = «subtitles» (данный параметр устанавливается по умолчанию, также доступны навигационные параметры, метаданные и параметры для людей с ограниченными возможностями).
- Установили язык дорожки srclang = «ru».
- Отобразили названия двух дорожек label = «English», label = «Russian».
- Выбрали дорожку по умолчанию атрибутом default.
Результат нашего примера:
Ваш браузер не поддерживает этот видео формат.
Рис. 50 Добавление видео с субтитрами на страницу (HTML тег <video>).
Допускается добавлять видео файлы с использование упрощенного синтаксиса (без использования тега <source>), но такая запись будет актуальна если все браузеры поддерживают данный формат видео:
Прочие, часто используемые атрибуты элемента <video>:
| Атрибут | Значение атрибута |
|---|---|
| autoplay | Задает автоматическое воспроизведение видеоролика (старайтесь не использовать этот атрибут без необходимости – раздражает, когда за тебя решают, когда должно начаться воспроизведение видео контента). |
| loop | Зацикливает воспроизведение видеоролика (наша песня хороша – начинай сначала). |
| muted | Воспроизведение видеоролика с отключенным звуком. |
Тег article
Тег обозначает важные разделы контента внутри Web-страницы. Например, в блоге каждый отдельный пост представляет собой значимый фрагмент контента. После добавления тега к примеру кода мы получаем код, показанный в .
Листинг 5. Добавление тегов
<!DOCTYPE html>
<html>
<head>
<title>
A Simple HTML Page
</title>
</head>
<body>
<header>Header</header>
<section>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
</article>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
</article>
</section>
<div id='footer'>Footer</div>
</body>
</html>
Советы и примечания
Примечание: <meta> Теги всегда заходят внутрь элемента <head>.
Примечание: Метаданные всегда передаются в виде пар «имя-значение».
Примечание: Атрибут content должен быть определен, если определено имя или атрибут HTTP-EQUIV. Если ни один из них не определен, атрибут Content не может быть определен.
Настройка видового экрана
В HTML5 появился метод, позволяющий веб-дизайнерам управлять окном просмотра через тег <meta>.
Видовой экран — это видимая область пользователя веб-страницы. Она варьируется в зависимости от устройства, и будет меньше на мобильном телефоне, чем на экране компьютера.
На всех веб-страницах необходимо включить следующий элемент <meta> видового экрана:
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
Элемент <meta> видовой экран предоставляет браузеру инструкции по управлению размерами страницы и масштабированию.
Ширина = устройство-ширина часть задает ширину страницы, чтобы следовать ширине экрана устройства (который будет варьироваться в зависимости от устройства).
Элемент начального масштаба = 1.0 задает начальный уровень масштабирования при первой загрузке страницы обозревателем.
Вот пример веб-страницы Без мета-тег видового экрана и та же веб-страница С мета-тег видового экрана:
Совет: Если вы просматриваете эту страницу с телефоном или планшетом, вы можете нажать на две ссылки ниже, чтобы увидеть разницу.
Без мета-тега видового экрана
С помощью мета-тега видового экрана
Вы можете прочитать больше о видовом экране в нашем Адаптивный веб-дизайн — учебник по видовому экрану.
Виды тегов html
Существует два типа тегов — одиночные и парные (контейнеры). Последние являются более распространенными. Все что включено между открывающимся <> и закрывающимся тегом </> называют содержимым контейнера. Как можно заметить внутри закрывающегося тега обязательно нужно ставить слеш, т.е. косую черту «/», находящуюся сразу же после первой угловой скобки. Действие тегов распространяется на заключенную между ними информацию.
Одиночные теги (метки) как можно догадаться состоят из одного html элемента — открывающегося тега (например <img>).
В независимости от вида каждый тег состоит из следующих элементов:
- открывающаяся угловая скобка (<);
- имя тега (p, body, br);
- закрывающаяся угловая скобка (>).
Для расширения возможностей используемого тега используются различные атрибуты и значения атрибутов, разделяющиеся между собой с помощью пробела. В свою очередь атрибуты можно условно разделить на обязательные и необязательные.
Итоговый вариант примера
В показан результат замены исходных тегов новыми структурными тегами HTML5.
Листинг 9. Итоговый вариант примера
<!DOCTYPE html>
<html>
<head>
<title>
A Simple HTML Page
</title>
</head>
<body>
<header>Header
<nav>
<a href='#'>Some Nav Link</a>
<a href='#'>Some Other Nav Link</a>
<a href='#'>A Third Nav Link</a>
</nav>
</header>
<section>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
<aside>
<p>
This is an aside for the first blog post.
</p>
</aside>
</article>
<article>
<p>
This is an important section of content on the page.
Perhaps a blog post.
</p>
</article>
</section>
<footer>Footer</footer>
</body>
</html>
Несмотря на то, что в демонстрационных целях этот пример был максимально упрощен, сравнение исходного примера на базе элементов () с результирующим вариантом () наглядно демонстрирует назначение новых структурных тегов.
Заключение
Новые структурные теги HTML5 описывают контент, который они содержат, и помогают разделить документ на логические разделы. Подобно автору, пишущему книгу, автор документа по-прежнему сможет сам решать, когда и где использовать эти новые элементы в своем документе. Хотя два автора, пишущих одну и ту же книгу, могут выбирать разные способы для разбиения этой книги на главы, использование глав по-прежнему является единообразным подходом к разбиению книг на разделы. Аналогично, хотя два автора некоторой Web-страницы вполне могут выбрать разные структуры, новые структурные элементы HTML5 предоставляют разработчикам Web-страниц новые единообразные возможности, которые не обеспечивались прежними тегами .
Похожие темы
- Оригинал статьи: New HTML5 structural tags
- Новые элементы в HTML5(developerWorks, август 2007 г.). Дополнительные сведения по структурным элементам HTML5.
- WHATWG: Организация WHATWG — это сообщество, отвечающее за спецификацию HTML5.
- W3C: Организация W3C создала первую спецификацию HTML, а в настоящее время вместе с WHATWG работает над спецификацией HTML5.
- HTML5 (Wikipedia): Дополнительные сведения о HTML5.
- Различия между HTML5 и HTML4 (W3C). Рабочий проект, позволяющий глубже понять различия между HTML 4 и HTML5.
- Первое знакомство с HTML5 (lynda.com): Чем является HTML5 (и чем не является).
