HTML 5 Элементы уровня текста
В HTML 4 существует множество элементов для различного форматирования текста, например, для форматирования программного кода, выделения различных элементов текста. При этом до сих пор не было никаких элементов, которые позволяют выделять, например, время или числа. Чтобы исправить этот недостаток в HTML 5 были введено несколько тегов уровня текста.
Вот их список:
1) mark (m).
2) time.
3) meter.
4) progress.
Тег mark используется для выделения определённой части текста по какому-либо критерию, например, выделение особо важного момента в статье.
<html>
<head>
</head>
<body>
<p>Основное <m>важная часть</m> повествование</p>
</body>
</html>
Здесь внутри тега <p> включён тег <m>, который выделяет "важную часть".
Тег time, как следует из названия, служит для выделения времени и даты. Например, так:
<html>
<head>
</head>
<body>
<p>Сегодня <time>21 мая 2010 года</time></p>
</body>
</html>
Тег meter служит для представления чисел в определённом формате, например, зарплаты, результатов голосования и так далее.
Вот простой пример использования элемента meter:
<html>
<head>
</head>
<body>
<p>Прибыль сегодня: <meter>$15000</meter></p>
</body>
</html>
Также тег meter представляет шесть атрибутов, позволяющие облегчить жизнь, например, тем же самым поисковым роботам:
1) value - отвечает за само значение некой величины.
2) min - отвечает за минимальное значение некой величины.
3) low - отвечает за минимальное значение некой величины, которое было получено.
4) high- отвечает за максимальное значение некой величины, которое было получено.
5) max- отвечает за максимальное значение некой величины.
6) optium - отвечает за оптимальное значение некой величины.
Пример применения этих атрибутов:
<html>
<head>
</head>
<body>
<p>Ваша оценка:
<meter value="4.2" min="0" max="5.0" low="3.0" high="4.8" optimum="5.0">4.2</meter>.
</p>
</body>
</html>
И, наконец, элемент progress используется для представления какого-либо состояния. Например, процент выполнения какой-либо задачи, как в примере ниже:
<html>
<head>
</head>
<body>
<p>Выполнено:
<progress value="100" max="500">20%</progress>
</p>
</body>
</html>
Как можно видеть из примера выше, у элемента progress имеются два атрибута: value и max. Значение первого атрибута показывает текущее состояние, а значение второго атрибута показывает максимум, которого необходимо достигнуть, чтобы выполнить определённую задачу.
Вот и все новые теги HTML 5, касающиеся текста. Как видите, появляется всё больше и больше возможностей для самого разнообразного форматирования HTML-документа, что, разумеется, хорошо для Web-мастера, которому будет проще понимать то, что он написал, а также для поисковых роботов, которым будет гораздо проще понимать, о чём идёт речь на странице.
А в следующих статьях мы поговорим и о других новых тегах HTML.
-
- Михаил Русаков
Комментарии (31):
Можете показать пример? А то у меня ни какого представления нету. И Вы же сказали что щас Эйчтимэль не поддерживается не в одних браузерах, поэтому я не могу даже в браузере посмотреть, если не трудно можете выполнить просьбу?
Ответить
Это не получится показать, пока не появится поддержка этих тегов.
Ответить
Понятно.
Ответить
А что делает <form id ="main_form" action="/reg/register?retpath=http%3A%2F%2Fmail.qip.ru%2F" method="post"> <div id="reg_err_box" class="errorbox" style="display:none"></div>? Это адрес места регистрации? Или что-то вроде? И еще кое-что. Можете сказать что надо сделать(написать) чтобы после регистрации как на всех сайтах, сразу перешло на например: мой мир в mail.ru. Буду очень благодарен, если Вы ответите на мой комментарий.
Ответить
Данный код просто создаёт форму, правда, без полей. /reg/register?retpath=http%3A%2F%2Fmail.qip.ru%2F - путь к обработчику формы. Если судить по названию, то данный скрипт занимается регистрацией. Переход после регистрации делается с помощью редиректа. Его можно сделать либо на PHP (http://myrusakov.ru/redirekt-php.html), либо на JavaScript (http://myrusakov.ru/redirect-javascript.html).
Ответить
Тоесть если я например напишу <form id ="main_form" action="mail.ru/cgi-bin" то, на то место method="post"> mail.ru/cgi-bin как-то дадут знать что кто-то зарегистрировался на этом сайте? Тоже самое с форумом можно? Отправляешь письмо и вводишь вот это. И адрес.
Ответить
Там стоят скрипты-обработчики, которые принимают данные из формы. Что они с ними делают - никто не знает, кроме их разработчиков. А отправлять любые формы можно, куда угодно, хоть на почту.
Ответить
А рамку надо ставить для сообщения? Или сообщение само в рамке выйдет?
Ответить
Какую рамку?
Ответить
Например: <frameset>, <fieldset>, <table>. Только не знаю почему ни одна из них кроме <fieldset> не действует и теги <th>,<td>,<tr> тоже.
Ответить
Многие теги вырезаются в целях безопасности. Какие теги вырезаются, зависит от сервера-приёмника (например, mail.ru).
Ответить
Сервер-приемник это: ru kz com org uz ua ya net и т.д.?
Ответить
Сервер-приёмник - это сервер, который принимает данные, любые данные. Я в скобках показал пример mail.ru. То есть Вы отправляете письмо, а mail.ru его принимает.
P.S. Впредь, вопросы не по теме статьи задавать на форуме.
Ответить
Спасибо.
Ответить
У меня ни сервера-приемника ни установлено, ни домена. И он не опубликован.
Ответить
Но Вы так и не ответили на предыдущий вопрос про то, нужно ли рамку ставить? Или она сама вместе с сообщением пользователя отправится?
Ответить
Никаких рамок не появится. Их нужно добавлять самому.
Ответить
Спасибо.
Ответить
То есть вводишь <form id ="main_form" action="" method="post"> и можешь отправить письмо хоть с форума какого-нибудь веб-сайта, на почту мэйл.ру?
Ответить
Это просто форма (да ещё и без единого элемента). В action должен быть скрипт-обработчик, в котором нужно написать PHP-код для отправки письма.
Ответить
Что такое PHP-код?
Ответить
http://myrusakov.ru/php.html
Ответить
Можете уточнить?
Ответить
http://ru.wikipedia.org/wiki/PHP
Ответить
То есть http://mail.ru./PHP это и есть этот PHP-код?
Ответить
Это не PHP код, а ссылка, пройдя про которой, Вы увидите статью о том, что такое PHP.
Ответить
Заранее благодарю.
Ответить
P.S Эйчтимэль 5
Ответить
Спасибо автору, но насколько мне известно к элементам уровня текста относятся элементы вида bdo, mark, time, ruby, rt,rp, wbr предназначенные для семантического выделения текста .. в данной же статье они практически не освещены :(. ..зато сюда же в кучку попали элементы уровня форм meter и progress..
Ответить
Так работает, просто <m> нет. <p>Основное <mark>важная часть</mark> повествование</p>
Ответить
У меня аналогичная ситуация. При выделении основной части с помощью <m> текст не изменился. При выделении <mark> -появилось выделение желтым цветом. Спасибо!
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.