Устаревшие теги в HTML 5
Опубликовано: 18.12.2014 15:52Просмотров: 3981
В этой статье мы рассмотрим теги HTML, которые уже устарели и в скором времени будут удалены из употребления. Нужно знать такие теги и стараться не использовать их на своих сайтах. Итак, поехали
В новой версии языка HTML, вышедшей в свет 28 октября 2014 года и получивший название HTML 5 стал официальной рекомендацией W3C. В процессе развития данного языка появлялись новые элементы, атрибуты и новые особенности. Многие вещи были переработаны, а некоторые и вовсе вышли из стандарта. Сегодня мы рассмотрим устаревшие теги языка HTML.
Тег hgroup
Данный элемент использовался для группировки нескольких элементов заголовков (h). При помощи данного тега можно создать подзаголовки для составления схемы документа. Пример использования тега hgroup:
<article> <hgroup> <h2>Устаревшие теги языка HTML</h2> <h3>Иногда спецификация языка заставляет менять код</h3> </hgroup> <p>Рассмотрим тему устаревших тегов подробнее...</p> </article>
Спецификация говорит о том, что тег <hgroup> нужно заменить на:
<article> <h2> Устаревшие теги языка HTML <span>Иногда спецификация языка заставляет менять код</span> </h2> <p>Рассмотрим тему устаревших тегов подробнее...</p> </article>
Атрибут pubdate
Данный атрибут используется в теге time для вывода логического значения о дате публикации статьи. Атрибут pubdate говорит о том, что родительский элемент был опубликован в указанную дату. Смотрим пример:
<article> <h2>Заголовок статьи</h2> <p>Тут содержится какой-то текст</p> <footer> <p>Было опубликовано в <time datetime="2014-12-21" pubdate>21 декабря 2014 года</time></p> </footer> </article>
Без атрибута pubdate данный код будет выглядеть так:
<article itemscope itemType="http://schema.org/BlogPosting"> <h2 itemprop="headline">Заголовок статьи</h2> <p itemprop="articleBody">Тут содержится какой-то текст</p> <footer> <p>Было опубликовано в <time datetime="2014-10-25" itemprop="datePublished">21 декабря 2014 года</time></p> </footer> </article>
Атрибут scoped
Этот атрибут используется в атрибуте style. Scoped используется для того, чтобы можно было взять код html и перенести его в другой документ, например, при помощи JavaScript.
1
2
3
4
5
6
7
8
9
10
11
12
13
<article>
<h2>Заголовок моей статьи</h2>
<p>Текст...</p>
<section>
<style scoped>
p {
font-size: 14px;
}
</style>
<h3>Заголовок второго уровня</h3>
<p>Параграф 14-го размера</p>
</section>
</article>Данный атрибут не поддерживается в браузере GoogleChrome, но в Firefox он работает стабильно
Элемент command
Это служебный элемент, который использовался для предоставления пользователю выполнения команды. Сейчас этот тего полностью устарел. Рассмотрим пример использования этого тега:
<command type="command" label="Load file" icon="icons/load.jpg" onclick="load()">
Элемент center
Этот элемент позволяет горизонтально центрировать все дочерние элементы. Тег center устарел еще в стандарте HTML 4.0/ Смотрим пример:
<html> <head> <title>Смотрим как используется тег CENTER</title> </head> <body> <center> <p>В траве сидел кузнечик, совсем как огуречик :) ...</p> </center> </body> </html>
Заменить такой код можно при помощи css:
<html> <head> <title>Смотрим как используется стиль "align-center"</title> </head> <body style="text-align:center;"> <p>В траве сидел кузнечик, совсем как огуречик :) ...</p> </body> </html>
Мы рассмотрели пятерку устаревших тегов HTML в версии языка 5.0. Хоть эти теги и устаревшие, они все равно поддерживаются браузерами. Но эксперты все же рекомендуют постепенно заменять эти тега на альтернативные. Читайте в статье HTML 2014 — новые плюхи в старой обёртке новинки нотации HTML 5.0
Если статья была для Вас полезной — Поделитесь ссылкой!
Советуем почитать
Закрепленные
Понравившиеся
Теги HTML5 и некоторые их различия с HTML4. Совет
HTML — стандартный язык разметки документов в интернете — не так давно был окончательно «обновлен» до пятой версии, и теперь одну часть ранее использовавшихся тегов применять уже нельзя, а другую — можно, но с некоторыми модификациями. О том, как изменилисьПрофессиональным веб-мастерам, а также просто владельцам личных онлайн-дневников (блогов) приходится сталкиваться с версткой веб-страниц. Долгое время для верстки использовались стандарты HTML4.01 и XHTML1.1, однако ныне на смену им окончательно пришел единый стандарт HTML5, который может сочетать в себе синтаксические нормы HTML и XHTML. В результате разметка веб-страниц должна стать более рациональной, а возможности верстки — более гибкими.
Чтобы соответствовать требованиям HTML5, необходимо теперь при верстке веб-страниц отказаться от использования ряда устаревших тегов, а еще часть тегов употреблять с учетом появившихся изменений. Для примера рассмотрим некоторые наиболее распространенные теги, претерпевшие изменениями в HTML5.
Устаревшие, но поддерживаемые теги и атрибуты HTML
Некоторая часть тегов и атрибутов в HTML5 считается устаревшей, однако при проверке валидности верстки, т. е. ее соответствия стандартам разметки, употребление таких тегов и атрибутов не спровоцирует появление ошибок. Вместо этого веб-мастеру может быть выдано предупреждение о том, что используются устаревшие элементы разметки.
Так, в разметке веб-страниц не должен использоваться атрибут border тега img, вместо него следует использовать CSS-свойство border, с помощью которого можно настраивать толщину, стиль и цвет границы вокруг элемента. Если атрибут border все же присутствует, его значение должно быть строчным символом «о».
Еще в разметке веб-страниц нельзя использовать атрибут name в тегах a, embed, img и option — вместо него рекомендуется применять атрибут id. При этом, если атрибут name все же присутствует, то его значение не должно быть пустой строкой, а также не должно быть равно значению любого из ID элементов, кроме собственного ID элемента.
В элементе script не следует применять атрибут language. Он должен быть заменен атрибутом type. При этом, если атрибут language все же присутствует, то его значение должно быть указано как строка JavaScript
Устаревшие теги HTML
В HTML5 часть тегов, использовавшихся ранее в HTML4, не поддерживается, и их использование на сайте или блоге приведет к возникновению ошибок при проверке валидности кода. Устаревшие теги следует либо заменять новыми, либо же следует использовать вместо них соответствующие свойства каскадных таблиц стилей (CSS).
В число исключенных в HTML5 тегов вошли такие, как acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt. При этом вместо тега applet, к примеру, полагается применять теги embed или object, вместо тегов frame, frameset и noframes — тег iframe в сочетании с нужными стилевыми свойствами CSS, а вместо тегов font и center — подходящие стилевые свойства CSS.
Устаревшие атрибуты в тегах HTML
В HTML5 есть теги, в которых не поддерживается часть атрибутов, ранее поддерживавшихся в HTML4. Устаревшие атрибуты необходимо заменять, используя соответствующие свойства CSS или же допустимые теги и атрибуты.
Например, запрещен атрибут charset в элементах a и link. Вместо него следует использовать мета-тег HTTP Content-Type в заголовке связанного с данными элементами документа. Также запрещены в указанных элементах атрибуты methods, rev, urn – вместо них следует использовать HTTP OPTIONS, rel и href, соответственно.
Некоторые популярные устаревшие атрибуты, которые в HTML5 следует заменять свойствами CSS, удобно рассмотреть в виде таблицы.
HTML | Устаревшие теги | Портал информатики для гиков
CSS, HTML, Веб-технологии
Устаревшие теги или атрибуты — это те атрибуты, которые заменены некоторыми другими атрибутами. Тег или атрибуты устаревают, когда те же атрибуты достигаются другим способом.
HTML устаревший тег: полный список устаревших тегов приведен ниже:
| TAGS | DESCRIPTION | Alternate Tags |
|---|---|---|
| applet tag | Specify an applet | object tag |
| basefont tag | Specify a basefont | font style sheets |
| center tag | Use to specify a centered Text | text-align:center |
| dir tag | Specify a directory list | ul tag |
| embed tag | Embed an application to HTML document | object tag |
| font tag | Used to specify font text, size and color | font-family, font-size, color |
| isindex tag | Specify a single-line input field | form tag |
| menu tag | Specify a menu list | ul tag |
| plaintext tag | Specify a plaintext | pre tag |
| s tag | Specify a strike through text | text-decoration |
| strike tag | Specify a strike through text | text-decoration |
| u tag | Specify underlined text | text-decoration |
| xmp tag | Specify preformatted text | pre tag |
HTML устаревшие атрибуты : есть некоторые атрибуты, которые устарели в HTML4. Некоторые из этих атрибутов приведены ниже:
| Attribute | Description | Alternate Attributes |
|---|---|---|
| align attribute | Used to specify the positioning of an element | text-align, vertical-align |
| alink attribute | Specify color for selected link | active attribute |
| background attribute | Specify background image | background-image |
| bgcolor attribute | Specify background color | background-color |
| bgcolor attribute | Specify background color | background-color |
| border attribute | Used to specify border width of an element | border-width |
| height attribute | Specify height of body tag | padding attribute |
| language attribute | Specify scripting language being used | type attribute |
| link attribute | Specify default color of links in the document | link attribute |
| nowrap attribute | Prevent the text from wrapping within that table cell | white-space |
| vlink attribute | Specify the color of visited links | visited attribute |
| type attribute | Specify the type of list in li tag | list-style-type |
| vspace attribute | Specify the amount of whitespace or padding that should appear above or below an element | padding attribute |
Рекомендуемые посты:
HTML | Устаревшие теги
0.00 (0%) 0 votes
Глобальные атрибуты HTML5 » Энциклопедия HTML5
Новые глобальные атрибуты в HTML5
НовыйРассмотрим названия и описания глобальных атрибутов HTML5:
accesskey=" " — позволяет задействовать какой-либо элемент (тег) страницы, нажатием заранее запрограммированной комбинацией клавиш,class=" " — позволяет устанавливать имя класса,contenteditable=" " — позволяет редактировать содержимое элемента Новый,contextmenu=" " — позволяет создавать контекстное меню для элемента Новый,dir=" " — позволяет управлять направлением текста,draggable=" " — позволяет пользователю перетаскивать элемент Новый,dropzone=" " — позволяет указывать, что делать с элементом при перетаскивании Новый,hiden=" "
Новый,id=" " — позволяет устанавливать уникальный идентификатор для элемента,lang=" " — позволяет указывать код языка в содержимом элемента,spellcheck=" " — позволяет указывать проверять или нет правописание, в содержимом элемента Новый,style=" " — позволяет создавать стиль для элемента,tabindex=" " — позволяет создавать правило, которое указывает в каком порядке должны получать фокус элементы, при нажатии на клавишу Tab,title=" " — позволяет создавать всплывающую подсказку, которая появляется при наведении указателя мыши на элемент.Так как в спецификации HTML5, теги превратились в полноценные объекты, то в этих объектах уже изначально заложено понятие глобального атрибута, даже для тех тегов которые еще не описаны в спецификации.
Читать далее: Новые веб формы в HTML5
Изменения в коде HTML5 » Энциклопедия HTML5
Новшества в структуре кода HTML5 документа
1. В отличии от предыдущих версий языка, в HTML5 существует лишь один доктайп:<!DOCTYPE html> его например вы можете увидеть в исходниках страниц данного сайта (не забывайте что перед доктайпом ничего не должно быть, ни пробелов, ни переносов строк и т.д.).
2. Для того, чтобы указать язык документа, теперь вместо мета-тегa:<meta http-equiv="content-language" content="ru" /> нужно использовать атрибут lang="ru" в теге <html>:
<html lang="ru">
3. Для того, чтобы указать кодировку документа, теперь вместо мета-тега:<meta http-equiv="content-type" content="text/html; charset=utf-8" />
нужно использовать мета-тег <meta charset="utf-8" />, без атрибутов http-equiv и content
4. При создании JavaSсript сценария, теперь в тег <script>, внедрять атрибуты type="text/javascript" и language="JavaScript" не нужно.
<script src="script.js"></script>
5. При внедрении CSS стилей, теперь в теги <style> и <link />, внедрять атрибут type="text/css" не нужно.
<link rel="stylesheet" href="style.css" /> <style></style>
6. Ссылка <а> — это строчный тег, поэтому в ранних спецификациях HTML и XHTML, ими не рекомендовалось обрамлять блочные теги, сейчас в спецификации HTML5 данная рекомендация для ссылок была убрана и ими теперь разрешается обрамлять один или несколько блочных элементов.
В HTML4 или XHTML1, валидное обрамление ссылками выглядело так:
<h4><a href="url">Заголовок</a></h4> <p><a href="url">Абзац</a></p>
Теперь при HTML5, можно делать так:
<a href="url"> <h4>Заголовок</h4> <p>Абзац</p></a>
Читать далее: Синтаксис HTML5
Новые технологии в HTML5 » Энциклопедия HTML5
Новые технологии в языке HTML5
В этой статье-обзоре будут собираться и описываться новые технологии появившиеся в HTML5.
Семантика и структура сайта
В HTML5, появились семантические теги разделяющие структуру страницы сайта:<article> </article> — обрамляют основной контент страницы (статью),<header> </header> — обрамляют шапку страницы,<footer> </footer> — обрамляют подвал страницы,<nav> </nav> — обрамляют основное меню страницы,<aside> </aside> — обрамляют боковую панель страницы (сайдбар),<section> </section> — обрамляют повторяющиеся блоки на странице (например комментарии).
Мультимедиа
В спецификацию HTML5, добавлена возможность слушать музыку, смотреть видео, создавать анимацию и игры. И все это без внедрения дополнительных плагинов в браузер.
Раньше, чтобы просмотреть видеролик, прослушать музыку или поиграть в игрушку, в браузер нужно было загружать дополнительные плагины разработанные сторонними разработчиками (например флэш-плеер). Теперь благодаря HTML5 всё это можно делать без загрузки плагинов.
Тег <сanvas>
Тег <сanvas> — это специальный элемент, который предназначен для рисования векторных фигур и манипулирования ими. Тег <canvas> создан для того, чтобы заменить собою технологию Flash. С помощью тега <canvas> можно рисовать векторные фигуры (изображения), а с помощью JavaScript, манипулировать данными фигурами, создавая тем самым анимацию (мультфильмы и даже игры) на сайте.
Аудио/Видео
С помощью тега <audio> можно внедрять аудиофайлы на страницу и прослушивать их. Элемент <audio> также создает панель с кнопками проигрывания.
С помощью тега <video> можно внедрять видеофайлы на страницу и просматривать их. Элемент <video> также создает панель с кнопками проигрывания.
API JavaScript
Спецификация HTML5 описывает как должен взаимодействовать язык JavaScript, с элементами страницы через технологию DOM. Также в HTML5, появились свои методы манипулирования объектами, например с помощью JavaScript и этих методов, можно програмно управлять кнопками на панели управления аудио/видео.
Поддержка XML-технологий
В HTML-документ написанный с помощью языка HTML5, отныне можно внедрять технологии связанные с различными XML-форматами, например такими как SVG или MathML.
SVG
SVG — Scalable Vector Graphics (язык разметки масштабируемой векторной графики), является XML-форматом. Так как HTML5 начал поддерживать XML-форматы, то теперь можно внедрять в HTML-документ рисунки созданные с помощью SVG и манипулировать ими через JavaScript.
Пример кода рисунка «зелёный круг»:
<svg>
<circle r="55px" cx="80px" cy="70px" fill="green" />
</svg>Результат:
А вот что рисуют крутые пацаны с помощью SVG —
герб Шотландии на Википедии.
MathML
MathML — Mathematical Markup Language (язык математической разметки) XML-формат. С помощьюданного формата, можно описывать различные математические формулы.
Читать далее: Учебник HTML5