Устаревшие теги html5: Устаревшие теги HTML5 » Энциклопедия HTML5 – Устаревшие теги HTML — Как создать сайт

Устаревшие теги в 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 — стандартный язык разметки документов в интернете — не так давно был окончательно «обновлен» до пятой версии, и теперь одну часть ранее использовавшихся тегов применять уже нельзя, а другую — можно, но с некоторыми модификациями. О том, как изменились теги HTML5 и как теперь следует писать некоторые привычные теги HTML4, речь пойдет далее.

Профессиональным веб-мастерам, а также просто владельцам личных онлайн-дневников (блогов) приходится сталкиваться с версткой веб-страниц. Долгое время для верстки использовались стандарты 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 устаревший тег:

полный список устаревших тегов приведен ниже:

TAGSDESCRIPTIONAlternate Tags
applet tagSpecify an appletobject tag
basefont tagSpecify a basefontfont style sheets
center tagUse to specify a centered Texttext-align:center
dir tagSpecify a directory listul tag
embed tagEmbed an application to HTML documentobject tag
font tagUsed to specify font text, size and colorfont-family, font-size, color
isindex tagSpecify a single-line input fieldform tag
menu tagSpecify a menu listul tag
plaintext tagSpecify a plaintextpre tag
s tagSpecify a strike through texttext-decoration
strike tagSpecify a strike through texttext-decoration
u tagSpecify underlined texttext-decoration
xmp tagSpecify preformatted textpre tag

HTML устаревшие атрибуты : есть некоторые атрибуты, которые устарели в HTML4. Некоторые из этих атрибутов приведены ниже:

AttributeDescriptionAlternate Attributes
align attributeUsed to specify the positioning of an elementtext-align, vertical-align
alink attributeSpecify color for selected linkactive attribute
background attributeSpecify background imagebackground-image
bgcolor attributeSpecify background colorbackground-color
bgcolor attributeSpecify background colorbackground-color
border attributeUsed to specify border width of an elementborder-width
height attributeSpecify height of body tagpadding attribute
language attributeSpecify scripting language being usedtype attribute
link attributeSpecify default color of links in the document
link attribute
nowrap attributePrevent the text from wrapping within that table cellwhite-space
vlink attributeSpecify the color of visited linksvisited attribute
type attributeSpecify the type of list in li taglist-style-type
vspace attributeSpecify the amount of whitespace or padding that should appear above or below an elementpadding attribute

Рекомендуемые посты:

HTML | Устаревшие теги

0.00 (0%) 0 votes

Глобальные атрибуты HTML5 » Энциклопедия HTML5

Новые глобальные атрибуты в HTML5

Глобальные атрибуты — это атрибуты, которые могут быть внедрены в любой тег HTML-документа. В HTML5 появились новые глобальные атрибуты, в описаниях ниже они выделены словом Новый

Рассмотрим названия и описания глобальных атрибутов HTML5:

accesskey=" " — позволяет задействовать какой-либо элемент (тег) страницы, нажатием заранее запрограммированной комбинацией клавиш,
class=" " — позволяет устанавливать имя класса,

contenteditable=" " — позволяет редактировать содержимое элемента Новый,
contextmenu=" " — позволяет создавать контекстное меню для элемента Новый,
dir=" " — позволяет управлять направлением текста,
draggable=" " — позволяет пользователю перетаскивать элемент Новый,
dropzone=" " — позволяет указывать, что делать с элементом при перетаскивании Новый,
hiden=" " — позволяет скрывать элемент Новый,
id=" " — позволяет устанавливать уникальный идентификатор для элемента,
lang=" " — позволяет указывать код языка в содержимом элемента,
spellcheck=" " — позволяет указывать проверять или нет правописание, в содержимом элемента Новый,
style=" " — позволяет создавать стиль для элемента,
tabindex=" " — позволяет создавать правило, которое указывает в каком порядке должны получать фокус элементы, при нажатии на клавишу Tab,
title=" " — позволяет создавать всплывающую подсказку, которая появляется при наведении указателя мыши на элемент.

Так как в спецификации HTML5, теги превратились в полноценные объекты, то в этих объектах уже изначально заложено понятие глобального атрибута, даже для тех тегов которые еще не описаны в спецификации.

Читать далее: Новые веб формы в 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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *