Описание тегов html5
Описание тегов html5В этом разделе размещены описания и примеры использования основных тегов. В html5 — языке разметки гипертекста много нового и интересного. Появилось множество семантических элементов, с помощью которых поисковые роботы более правильно и полно индексируют содержание страниц. Также появился ряд новых тегов, позволяющих вставлять аудио и видео на сайт. Теперь не надо устанавливать граммосткие аудио и видео плееры на сайт, или вставлять коды со сторонних сервисов. Ниже более подробное описание и примеры применения основных элементов html5.
Теги — контейнеры для содержимого
<!DOCTYPE> — указывает браузеру о версии языка разметки html документа
<html> — этот тег говорит что внутри него содержится html код
<head> — в нем содержатся мета данные для браузера и поисковых систем
<body> — в нем заключается все видимое содержимое от шапки до подвала
<header> — обозначает шапку сайта и иногда сложные заголовки статей
<main> — в нем заключается контент, содержимое между шапкой и подвалом
<article> — обозначает конкретное содержимое типа статьи или новости
<aside> — определает независимое содержимое боковой блок или колонку и др
<section> — предназначен для разделения контента на секции
<div> — используется для создания контейнеров, блоков для содержимого
<footer> — в этом теге заключается содержимое подвала сайта
Теги для разметки текста
<nav> — определяет и используется для навигации по сайту
<menu> — используется для семантической разметки списка меню
<h2> <h3> <h5> <h5> <h5> <h6> — используются для разметки заголовков
<p> — используется для разметки текста на абзацы
<br> — применяется при разметке текста для переноса строки
<i> и <em> — применяются для выделения текста курсивным шрифтом
<b> и <strong> — эти теги выделяют текст жирным шрифтом
<a> — этот тег создает ссылки на внутренние и внешние страницы
<abbr> — тег для аббревиатур, расшифровки сокращенных и сленговых слов
<address> — предназначен для указания адреса автора сайта или контента
<blockquote> и <cite> — предназначены для выделения цитат
<dl> <dt> <dd> — предназначены для разметки списка определений
<details> — создает скрытое содержание или детали к элементам
<code> — предназначен для выделения программного кода в тексте
<ul> <li> <ol> — создают маркированный и нумерованный список
<small> — уменьшает выделенный текст, делает его меньше чем основной
Теги для разметки графики, мультимедиа
<img> — этот тег служит для вставки изображения
<figure> и <figcaption> — используются для обозначения изображений
<map> и <area> — используется для создания карты ссылок на изображении
<audio> — предназначен для воспроизведения аудио файлов на странице
<video> — позволяет воспроизводить видео файлы на странице
<canvas> — предназначен для создания графики при помощи JavaScript
<hr> — этот тег создает горизонтальную линию
Теги для создания таблиц
<table> <td> <tr> <caption> <col> <colgroup> <tbody> <tfoot> <th> <thead> — Теги для создания таблицы, назначение и краткое описание
<table> <tr> <td> — основные теги для создания таблицы
<caption> — предназначен для создания заголовка таблицы
<col> — задает параметры столбцов в таблицах
<colgroup> — предназначен для группирования столбцов (колонок) таблицы
Различные другие теги
<meta> — в нем указывается информация для браузеров и поисковых систем
<link> — указывает браузеру пути до файлов в теге <head>
<base> — указывает базовый адрес путей, с которого начинаются пути
<button> — предназначен для создания кнопок в формах
<form> — создает формы отправки данных на странице
<fieldset> — группирует содержимое форм отправки данных
<iframe> — создает фреймы для загрузки на страницу других веб страниц
<input> — создает разные элементы взаимодействия в формах
<keygen> — используется для шифрования при отправке данных
<xmp> — позволяет выводить html код на странице
Сокращения кода в синтаксисе HTML5
Для веб-программистов старой закалки, до сих пор использующих правила написания старых HTML кодов, хочу напомнить, что в синтаксисе HTML5 применение многих тегов сокращено и упрощено.
Первое значение соответствует старому написанию HTML, второе — HTML5.
Одиночные теги могут не закрываться слешем
<br /> — <br>
<img src=»…» /> — <img src=»…»> и т.д.
Для прописки стилей и скриптов можно не указвать type
<link rel=»stylesheet» type=»text/css» href=»style.css» />
<link rel=»stylesheet» href=»style.css»>
<style type=»text/css»>
…
</style>
<style>
…
</style>
<script type=»text/jаvascript»>…</script>
<script></script>
Необязательные закрывающие теги
Закрывающий тег </p> может быть упущен, если начальный элемент <p> следует сразу за: <header>, <div>, <footer>, <p>, <hr>, <ul>, <h2>, <h3>.
..
Или когда больше нет содержания в родительском элементе и родительский элемент не ссылка <a>.
Пример:
<div>
<p>Текст 1
<p><a href=»#»>Текст 2</a>
<p>Текст 3
</div>
Также это правило относится к таким блокам, как: <section>, <aside>, <menu>, <nav>,
<ol>, <table>, <form>, <blockquote>, <dir>, <fieldset>, <dl>, <pre> и т.д.
Закрывающий тег </li> может быть упущен, если за ним следует открывающий <li> или закрывающий </ul>:
Пример:
<ul>
<li>Строка 1
<li>Строка 2
<li>Строка 3
</ul>
Если в родительском элементе больше нет содержания, то можно не применять закрывающие теги типа: </th>, </td>, </tr>, </tfoot>, </option>, </colgroup> и
т.д.
Упрощённое написание имени атрибута
Для атрибутов, которые способны принимать только единственное значение, например disabled или checked, можно прописывать только имя самого атрибута.
<input value=»» disabled=»disabled» />
<input value=»» disabled >
Убираем кавычки для значений атрибутов
При прописке значений атрибутов, их можно не заключать в кавычки.
<img src=»img/images.jpg» alt=»описание» />
<img src=img/images.jpg alt=описание width=400 height=225 >
Внимание!
Если значение атрибута состоит из нескольких слов и содержит пробелы, то кавычки обязательны.
Примеры:
<img src=img/images.jpg alt=»описание картинки» width=400 height=225 > — атрибут alt содержит 2 слова с пробелом, следовательно кавычки нужны.
<input value=»значение из нескольких слов»>
<div> — не один класс.
Выше приведены лишь некоторые возможные сокращения HTML кода в синтаксисе HTML5.
Для упрощения написания кода и сокращения его объёма (веса Кб), советую вспомнить об обновлённом HTML5.
Тег HTML5 dialog — Tutorial Republic
Advertisements
Тема: Теги HTML5 ReferencePrev|Next
Описание
Элемент определяет диалоговое окно или другой интерактивный компонент на веб-странице, с которым пользователь может взаимодействовать выполнить задачу, например, отклоняемое предупреждение.
В следующей таблице приведены контекст использования и история версий этого тега.
| Размещение: | Блок |
|---|---|
| Содержимое: | Блочный, встроенный и текстовый |
| Начальный/конечный тег: | Начальный тег: требуется , Конечный тег: |
| Версия: | Новое в HTML5 |
Синтаксис
Основной синтаксис тега представлен следующим образом:
HTML / XHTML:
> Тег в действии.Пример
Попробуйте этот код » <диалоговое окно открыто>
Вы уверены, что хотите удалить этот элемент?
Атрибуты, специфичные для тега
В следующей таблице показаны атрибуты, характерные для тега .
| Атрибут | Значение | Описание |
|---|---|---|
открытый | открыть | Указывает, что элемент диалога активен и что пользователь может с ним взаимодействовать. |
Глобальные атрибуты
Как и все другие теги HTML, тег поддерживает глобальные атрибуты в HTML5.
Атрибуты событий
Тег также поддерживает атрибуты событий в HTML5.
Совместимость с браузерами
Тег поддерживается всеми основными современными браузерами.
Базовая поддержка —
|
Дополнительная литература
См.
учебник по HTML-формам.
Связанные теги: , , .
Предыдущая страница Следущая страница
Теги HTML 5 — javatpoint
следующий → ← предыдущая Существует список недавно включенных тегов в HTML 5. Эти теги (элементы) HTML 5 обеспечивают лучшую структуру документа. В этом списке показаны все теги HTML 5 в алфавитном порядке с описанием. Список тегов HTML 5
|
Он изолирует часть текста, отформатированную в
другое направление от внешнего текстового документа.
