Офис НП 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 
11 Сентябрь 2014 00:38:24
13952 Прочтений
Возникло тут у меня желание перевести сайт на стандарт HTML5, соответственно, первым делом я изменил заголовки, то есть всю шапку. Изначально моя шапка выглядела так:
То есть, все банально: указываем браузеру язык, в котором отдаем документ, заголовки, описание, подключение скриптов, иконки. А теперь посмотрим, как это будет выглядеть в HTML5:
Заметили, насколько короче и читабельнее стал код? Хочу обратить внимание на подключение скрипта html5shiv.js: он позволит устаревшим (устаревающим) браузерам "понимать" новый стандарт HTML5. Последнюю на сегодня версию 3.7.2 скрипта можно скачать здесь.
Но и это еще не все. В последнее время все гонятся за адаптивной версткой (чтобы дизайн сам подстраивался под ширину экрана девайса), так вот HTML5 дает нам этот замечательный инструмент, добавив всего одну строчку кода мета до закрывающего тега </head>:
Далее идет тело документа, разметка будет примерно следующей:
Все это здОрово, замечательно, превосходно и т.п., однако статью эту я задумал написать не для того, чтобы раскрыть все прелести новых возможностей верстки, а для того... чтобы попробовать исправить ошибки, которые возникают после перехода с HTML/xHTML на HTML5. После смены заголовков я открыл сайт в валидаторе и был весьма неприятно удивлен: 130 с лишним ошибок и более 20 предупреждений! И это только на главной странице.
Дело все в том, что в HTML5 убраны некоторые устаревшие теги, убраны многие атрибуты (например, у таблиц: все параметры теперь рекомендуется задавать в стилях). Нет, в этом, на самом деле, нет ничего страшного: страницы браузер все так же будет отображать, вот только тогда встает два вопроса:
Итак, поехали.
Все, теперь мы спокойно сможем пользоваться новыми тегами без боязни "перекосить" проект. Далее: align, valign, cellpadding, cellspacing, border, width- всех этих атрибутов более не существует, так же как тегов <center></center>, <s></s>, <big></big>, <u></u>. Все атрибуты нужно будет заменить стилями, а устаревшие теги- их аналогами по новому стандарту HTML5. Вот пара примеров. Начнем с таблиц. Было:
Должно стать
Небольшой нюанс: если у вас, например, cellpadding='1', это означает, что каждая ячейка <td> таблицы должна иметь внутренний отступ в 1px, то есть, либо для каждой ячейки прописывать теперь <td style='padding:1px;'>...</td>, либо задать это через файл css-стилей
, но это будет правилом для всех ячеек всех таблиц сайта. Для наглядности, как лучше организовать верстку приведу пример старого формата и нового.
Конечно, это "грязная" разметка, но она лишь для примера, я лично рекомендую все стили писать в таблице каскадных стилей CSS.
Одной из первых ошибок в валидаторе у меня была ошибка, связанная с кодировкой.
Еще одна ошибка была связана с <input /> и выглядела так:
Вот, вкратце, пока и все, чем хотел поделиться. Будут вопросы- спрашиваем. Если появится дополнительный интересный и полезный материал- обновлю статью.
Код: 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.
Одной из первых ошибок в валидаторе у меня была ошибка, связанная с кодировкой.
Цитата [ Отметить все ]
Я никак не мог понять, с чем это связано, однако затем, открыв исходный код страницы, обнаружил, что сервер отдает в заголовках кодировку cp1251, а документ в кодировке windows-1251. Я не стал детально разбираться, с чем это связано (вероятнее всего- с настройками сервера), эту проблему мне помогли решить две строчки в .htaccess:The encoding cp1251 is not the preferred name of the character encoding in use. The preferred name is windows-1251. (Charmod C024)
Код: APACHE
DefaultLanguage ru
AddDefaultCharset windows-1251
Еще одна ошибка была связана с <input /> и выглядела так:
Цитата [ Отметить все ]
Чисто интуитивно я догадался, что не хватает атрибута alt в изображении. После правки код стал выглядеть так:Element input is missing required attribute 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.
Атрибут name тега <a> должен заменяться атрибутом id. Если name все же присутствует, то он должен содержать пустую строку или совпадать со значением id.
Атрибут language тега <script> должен быть опущен. Если он присутствует, значение совпадает с JavaScript или другим типом, но в таком случае язык скрипта следует указать через type.
Атрибут border тега <img>не указывается, а толщина границы задаётся через стили. Если этот атрибут присутствует, его значение должно быть 0.
Наличие атрибута 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 для всех элементов.
<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 для всех элементов.
Вот, вкратце, пока и все, чем хотел поделиться. Будут вопросы- спрашиваем. Если появится дополнительный интересный и полезный материал- обновлю статью.
Понравилась статья?
Метки для данной статьи
Похожие статьи
Заголовок
Категория
Просмотров
Поделиться:
Последние активные темы форума
| Темы | Просмотров | Ответов | Последние сообщения | |
 |
Вопрос по переделке bb-кода PHP, MySQL |
22799 | 5 | Pisatel 26. мая 2017 |
|
Вопросы по Ajax форме обратной связи CMS PHP Fusion |
71424 | 48 | Ditrin 19. февраля 2017 |
|
BBCode YouTube Video Colorbox mod CMS PHP Fusion |
15678 | 2 | Pisatel 10. декабря 2016 |
|
Как лучше создать собственную страницу? CMS PHP Fusion |
18320 | 17 | Pisatel 11. мая 2016 |
|
Небольшие вопросы по скриптам магазина и катало... PHP, MySQL |
149639 | 80 | Pisatel 11. января 2016 |
|
BBCode Code mod CMS PHP Fusion |
14822 | 0 | Pisatel 31. августа 2015 |
|
Ajax Like Dislike Article Panel CMS PHP Fusion |
23127 | 16 | Pisatel 07. июля 2015 |
|
Хлебные крошки / BreadCrumbs SEO Panel CMS PHP Fusion |
26911 | 17 | Pisatel 04. июля 2015 |
|
Abbr Description BBCode CMS PHP Fusion |
7811 | 0 | Pisatel 15. июня 2015 |
|
Плагин Email рассылки Mail To All by Pisatel CMS PHP Fusion |
37988 | 32 | Pisatel 26. апреля 2015 |
|
Подозрительный трафик и прочие страшилки Всякая хрень |
12001 | 2 | Ditrin 23. апреля 2015 |
|
Мод Newsletter - рассылка писем пользователям с... CMS PHP Fusion |
31425 | 13 | Pisatel 10. апреля 2015 |
|
Мод отправки писем PHPMailer для PHP-Fusion CMS PHP Fusion |
132967 | 113 | Ditrin 06. апреля 2015 |
|
Появление неизвестного файла subscriptions.php CMS PHP Fusion |
8981 | 2 | Pisatel 06. апреля 2015 |
|
Autoban on IP CMS PHP Fusion |
23472 | 13 | Pisatel 03. апреля 2015 |