Офис НП AMWAY в Ярославле
Офис Амвей в Ярославле
На карте Офис AMWAY в ЯрославлеПрием и выдача заказов, презентация продукции Амвей, мастер–классы, вопросы по бизнесу Amway:
Адрес: улица Валентины Терешковой, дом 1 (Вход со двора)
Телефон: +7 (920) 112-00-91
Email: matyxho@mail.ru
Сайт: https://www.amway.ru/user/lebedem
Визитка: http://yar.meweb.ru
Иерархия статей
Статьи » HTML, CSS, JS » Перевод сайта на стандарт HTML5
Сниппет
Стандарт HTML5 полностью вошел в жизнь и поддерживается всеми современными браузерами. Вот и я решил перейти на него с xHTML, однако столкнулся с некоторыми трудностями, решением которых я и хочу поделиться.
Перевод сайта на стандарт HTML5
Опубликовал  Pisatel Pisatel Добавлено  11-09-2014 00:38 11 Сентябрь 2014 00:38:24 12888  Прочтений 12888 Прочтений
 printer
Возникло тут у меня желание перевести сайт на стандарт HTML5, соответственно, первым делом я изменил заголовки, то есть всю шапку. Изначально моя шапка выглядела так:

Код: HTML
    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='ru' lang='ru'>

<head>

<title>Заголовок</title>

<meta http-equiv='Content-Type' content='text/html; charset='windows-1251' />

<meta name='description' content='Описание' />

<meta name='keywords' content='Ключевые слова' />

<link rel='stylesheet' href='styles.css' type='text/css' media='screen' />

<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />

<script type='text/javascript' src='jquery/jquery-1.11.1.min.js'></script>

<script type='text/javascript' src='jscript.js'></script>\n

</head>

<body>




То есть, все банально: указываем браузеру язык, в котором отдаем документ, заголовки, описание, подключение скриптов, иконки. А теперь посмотрим, как это будет выглядеть в HTML5:

Код: HTML5
    <!DOCTYPE html>

<html xml:lang='ru' lang='ru'>

<head>

<title>Заголовок</title>

<meta charset='windows-1251' />

<meta name='description' content='Описание' />

<meta name='keywords' content='Ключевые слова' />

<link rel='stylesheet' href='styles.css' media='screen' />

<link rel='shortcut icon' href='favicon.ico' />

<script src='jquery/jquery-1.11.1.min.js'></script>

<script src='jscript.js'></script>

<!--[if lt IE 9]>

<script src='html5shiv.js'></script>

<![endif]-->

</head>

<body>




Заметили, насколько короче и читабельнее стал код? Хочу обратить внимание на подключение скрипта html5shiv.js: он позволит устаревшим (устаревающим) браузерам "понимать" новый стандарт HTML5. Последнюю на сегодня версию 3.7.2 скрипта можно скачать здесь.

Но и это еще не все. В последнее время все гонятся за адаптивной версткой (чтобы дизайн сам подстраивался под ширину экрана девайса), так вот HTML5 дает нам этот замечательный инструмент, добавив всего одну строчку кода мета до закрывающего тега </head>:

Код: HTML5
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />




Далее идет тело документа, разметка будет примерно следующей:

Код: HTML5
    <header>

<!-- здесь можно разместить логотип -->

<a href='http://www.meweb.ru/' title='www.meweb.ru'><img src='logo.jpg' alt='logo' /></a>

<!-- логотип я сделал ссылкой на главную: где-то читал, что это полезно для пс, да и удобно пользователям -->

</header>

<!-- далее можно в шапке сделать навигацию -->

<nav>

<ul>

<li><a href='contact.php'>Контакты</a></li>

<li><a href='downloads.php'>Загрузки</a></li>

<li><a href='articles.php'>Статьи</a></li>

<li><a href='forum/index.php'>Форум</a></li>

</ul>

</nav>

<!-- далее у нас будет идти, например, левый сайдбар -->

<aside>

<!-- здесь контент -->

</aside>

<!-- далее у нас идет основной центральный контент -->

<article>

<h2>Заголовок контента</h2>

<!-- я не случайно использовал тег <h2> в <article>: валидатор всегда этого просит (h2-h6) и выдает предупреждение, если этого нет -->

<!-- здесь содержимое основного контента -->

</article>

<footer>

<!-- подвал сайта: счетчики, баннеры, копирайты и т.п. -->

</footer>

</body>

</html>




Все это здОрово, замечательно, превосходно и т.п., однако статью эту я задумал написать не для того, чтобы раскрыть все прелести новых возможностей верстки, а для того... чтобы попробовать исправить ошибки, которые возникают после перехода с HTML/xHTML на HTML5. После смены заголовков я открыл сайт в валидаторе и был весьма неприятно удивлен: 130 с лишним ошибок и более 20 предупреждений! И это только на главной странице.

Дело все в том, что в HTML5 убраны некоторые устаревшие теги, убраны многие атрибуты (например, у таблиц: все параметры теперь рекомендуется задавать в стилях). Нет, в этом, на самом деле, нет ничего страшного: страницы браузер все так же будет отображать, вот только тогда встает два вопроса:
  • Корректно ли будут теперь отображаться страницы с устаревшей версткой в современных браузерах?
  • Зачем мы вообще затеяли перевод сайта на стандарт HTML5, если не собираемся учиться верстать по-новому? Ведь все "плюшки" из HTML5 будут работать и без полного перевода сайта на этот стандарт.


Итак, поехали.

Самые распространенные возможные проблемы после перевода сайта на HTML5

Ну, изначально, весь дизайн у меня банально "поплыл" после добавления в разметку новых тегов <header></header>, <footer></footer>, <nav></nav>, <article></article>, <aside></aside>, <figure><figcaption></figcation></figure>. А произошло это оттого, что по умолчанию эти теги уже имеют свои стили, и совсем не факт, что они идеально встроятся в ваш проект. Решил я эту проблему весьма просто: нужно просто "обнулить" стили тегов, добавив в ваш файл css-стилей примерно следующее:

Код: CSS
address, article, aside, cite, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

display: block;

}




Все, теперь мы спокойно сможем пользоваться новыми тегами без боязни "перекосить" проект. Далее: align, valign, cellpadding, cellspacing, border, width- всех этих атрибутов более не существует, так же как тегов <center></center>, <s></s>, <big></big>, <u></u>. Все атрибуты нужно будет заменить стилями, а устаревшие теги- их аналогами по новому стандарту HTML5. Вот пара примеров. Начнем с таблиц. Было:

Код: HTML
    <table cellpadding='0' cellspacing='1' width='100%'>




Должно стать

Код: HTML5
    <table style='border-spacing:1px; width:100%;'>




Небольшой нюанс: если у вас, например, cellpadding='1', это означает, что каждая ячейка <td> таблицы должна иметь внутренний отступ в 1px, то есть, либо для каждой ячейки прописывать теперь <td style='padding:1px;'>...</td>, либо задать это через файл css-стилей

Код: CSS
td {

padding: 1px;

}




, но это будет правилом для всех ячеек всех таблиц сайта. Для наглядности, как лучше организовать верстку приведу пример старого формата и нового.

Код: HTML
<!-- старая разметка -->

<table cellpadding='1' cellspacing='1' width='100%' align='center'>

<tr>

<td align='center' valign='top'>Text</td>

</tr>

</table>

<!-- новая разметка -->

<table style='border-spacing:1px; width:100%; margin:0 auto;'>

<tr>

<td style='text-align:center; vertical-align:top; padding:1px;'>Text</td>

</tr>

</table>




Конечно, это "грязная" разметка, но она лишь для примера, я лично рекомендую все стили писать в таблице каскадных стилей CSS.

Одной из первых ошибок в валидаторе у меня была ошибка, связанная с кодировкой.
Цитата [ Отметить все ]
The encoding cp1251 is not the preferred name of the character encoding in use. The preferred name is windows-1251. (Charmod C024)
Я никак не мог понять, с чем это связано, однако затем, открыв исходный код страницы, обнаружил, что сервер отдает в заголовках кодировку cp1251, а документ в кодировке windows-1251. Я не стал детально разбираться, с чем это связано (вероятнее всего- с настройками сервера), эту проблему мне помогли решить две строчки в .htaccess:

Код: APACHE
DefaultLanguage ru

AddDefaultCharset windows-1251




Еще одна ошибка была связана с <input /> и выглядела так:
Цитата [ Отметить все ]
Element input is missing required attribute alt.
Чисто интуитивно я догадался, что не хватает атрибута alt в изображении. После правки код стал выглядеть так:

Код: HTML5
    <input type='image' src='image.jpg' alt='myimage' title='button' />




Список устаревших (устаревающих) тегов

— Устаревшие теги

<applet> – добавляет Java-апплет в документ. Вместо него следует использовать теги <embed> или <object>.

<acronym> – заменяем на <abbr>.

<bgsound> – определяет музыкальный файл, который будет проигрываться на странице при её открытии. Теперь для воспроизведения аудио используйте тег <audio>.

<dir> – создает список, содержащий названия директорий, вместо него

используйте <ul>: ненумерованный список.

<frame>, <frameset>, <noframe> – фреймы в современном стандарте не поддерживаются. Если они вам необходимы, используйте другую версию HTML или <iframe> совместно со стилями.

<isindex> – предназначен для поискового индекса в текущем документе. Комбинация <form> и <input> лучше справляется с этой задачей.

<listing>, <xmp> – для вывода листинга программы в стандарте HTML5 предназначены теги <pre> и <code>.

<nextid> – этот тег не предназначен для людей и указывает идентификатор следующего документа для автоматических редакторов HTML.

— Полностью исключен.

<noembed> – предназначен для отображения информации на странице, если браузер не поддерживает работу с плагинами. В качестве альтернативы используйте <object>.

<plaintext> – отображает содержимое контейнера "как есть", любые теги выводятся как текст. Вместо тега используйте MIME-тип text/plain.

<rb> – определяет базовый текст внутри тега <ruby>. Этот тег полностью исключен.

<strike> – для зачёркнутого текста применяется <s> (хотя он тоже считается устаревающим), а для указания редакторской правки используйте <del> (я пользуюсь им).

<basefont>, <big>, <blink>, <center>, <font>, <marquee>, <multicol>, <nobr>, <spacer>, <tt>, <u> – вместо этих тегов, управляющих видом текста, теперь применяются стили. Обратите внимание, что тег <small>допустим, хотя относится к той же группе тегов, что и <big>.

— Устаревшие, но поддерживаемые атрибуты

Атрибут http-equiv тега <meta> для указания языка должен заменяться атрибутом lang.

Код: HTML
<!-- Было -->

<meta http-equiv='content-language' content='ru' />

<!-- Стало -->

<html lang='ru'>




Атрибут name тега <a> должен заменяться атрибутом id. Если name все же присутствует, то он должен содержать пустую строку или совпадать со значением id.

Код: HTML
<!-- Было -->

<a name='tagname'>LINK</a>

<!-- Стало -->

<a id='tagname'>LINK</a>

<!-- Либо (но это вызовет предупреждение в валидаторе) -->

<a id='tagname' name='tagname'>LINK</a>




Атрибут language тега <script> должен быть опущен. Если он присутствует, значение совпадает с JavaScript или другим типом, но в таком случае язык скрипта следует указать через type.

Код: HTML
<!-- Было -->

<script type='text/javascript' language='JavaScript'>

...

</script>

<!-- Стало -->

<script>

...

</script>




Атрибут border тега <img>не указывается, а толщина границы задаётся через стили. Если этот атрибут присутствует, его значение должно быть 0.

Код: HTML
<!-- Было -->

<img border='1px' />

<!-- Стало -->

<img style='border:1px solid black;' />




Наличие атрибута summary тега <table> приведет к предупреждению.

— Устаревшие атрибуты

- У элемента <a>: charset, coords, shape, methods, name, rev, urn.

- У элемента <area>: nohref.

- У элемента <body>: alink, bgcolor, link, marginbottom, marginheight, marginleft, marginright, margintop, marginwidth, text, vlink.

- У элемента <br>: clear.

- У элемента <embed>: name.

- У элемента <head>: profile.

- У элемента <html>: version.

- У элемента <iframe>: longdesc.

- У элемента <img>: longdesc, lowsrc, name.

- У элемента <input>: usemap.

- У элемента <link>: charset, methods, rev, target, urn.

- У элемента <meta>: scheme.

- У элемента <option>: name.

- У элемента <object>: archive, classid, code, codebase, codetype, declare, standby.

- У элемента <param>: type, valuetype.

- У элемента <script>: event, for, language.

- У элемента <table>: datapagesize.

- У элемента <td> и < th>: abbr, axis.

Также запрещён атрибут datasrc для всех элементов.


Вот, вкратце, пока и все, чем хотел поделиться. Будут вопросы- спрашиваем. Если появится дополнительный интересный и полезный материал- обновлю статью.
Понравилась статья?
Метки для данной статьи
Похожие статьи
Поделиться:   
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Вопрос по переделке bb-кода
PHP, MySQL
18939 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
52272 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
13267 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
15495 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
113487 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
11982 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
19035 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
21974 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
6621 0 Pisatel
15. июня 2015
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
31416 32 Pisatel
26. апреля 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
10366 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
16050 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
102204 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
7826 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
21321 13 Pisatel
03. апреля 2015