Html перевести в html5

Переводим сайт на HTML5

Новый стандарт представления и структурирования содержания всемирной паутины шагает по планете. HTML версии 5 закончен и рекомендован к употреблению только в 2014 году, но уже в 2013 осуществлялась его поддержка браузерами. Он был создан для того, чтобы гипертекст легко читался и человеком, и парсерами (например – роботами поисковиков). Этот гипертекст лучше связан и с мультимедиа-технологиями. Сайт на HTML5 больше соответствует требованиям SEO.

Из HTML5 убраны некоторые элементы, потерявшие актуальность. Например: , , , , , , , , , , , , , . Зато появились новые тэги — , , , , и атрибуты — , , , , . Список неполный, но это не является темой нашего разговора.

Допустим, что у нас есть сайт, который уже использует шаблон, написанный на HTML4, а нам так хочется оптимизировать его содержание. Хочется, чтобы роботы его быстро индексировали и поисковые машины легко находили. То есть, мы захотели перевести его на HTML5.

Для этого нам необходимо удалить неактуальные элементы, улучшить структуру и семантику содержимого сайта. Ну, с первым всё понятно, удалили. Если какой-то из удаляемых тэгов вами использовался, то добавьте к элементу класс и опишите его в файле style.css.

Далее займёмся структурой и семантикой. Для начала разберёмся с новыми тэгами. В предыдущей версии языка повсеместно использовался тэг . Вёрстка на «дивах» была «наше всё»! Но сам по себе не имел никакого семантического значения. Он мог содержать и строчные, и блочные элементы, и рисунок, и текст. Он никуда не исчез, наш любимый , нет. Он по-прежнему будет нами использоваться, но он уже не будет главным.

Рассмотрим основные тэги по порядку, в котором они могут располагаться на странице:

2. — навигационное меню сайта.

3. — группа логически объединённых информационных блоков.

4. — самостоятельный информационный блок.

5. — боковой блок, обычно с дополнительной информацией или навигацией.

Это основные структурные элементы, блоки, из которых состоит страница. Каждому из таких блоков мы можем присвоить «id» или «class» и описать их в файле css в соответствии с дизайном страницы. Смысл каждого тэга понятен из названия. Вопрос может возникнуть только по поводу разницы между и . То и другое – информационные блоки. Разница в том, что не имеет индивидуального смысла, она может группировать, объединять в себе другие блоки — , статьи. То есть, это отдельная статья, имеющая уникальное содержание, а обычно объединяет несколько статей на определённую тему, или содержит похожие блоки.

Перейдём к основным атрибутам HTML5.

Все их перечислять я так же не буду, мы рассмотрим только основные, которые нам пригодятся обязательно. Атрибуты делают семантику страницы ещё более понятной. Они уточняют смысл структурных элементов, их роль:

1. — статья, информационный блок.

2. — главный информационный блок.

3. — некая интерактивная форма.

4. — активный элемент, кнопка.

6. — логотип и название сайта, заголовок страницы.

7. — дополнительный блок, отделённый от содержания сайта.

8. — обобщающая информация о сайте, обычно в футере.

10. — поле для ввода текста.

Грубо говоря, робот отдаст приоритет блоку, находящемуся между такими тэгами:

И практически проигнорирует:

Так достигается лучшая оптимизация содержания сайта в соответствии с требованиями SEO. Робот быстрее и правильнее проиндексирует страницу, построенную по такому принципу. Да и «читать» такой текст веб-мастеру удобней.

Перейдём к написанию html страницы.

В HTML5 изменился доктайп. Теперь просто пишем и всё! Доктайп сообщает браузеру, как правильно интерпретировать содержание сайта и выдавать его клиенту. Укоротились некоторые строки, например — и язык страницы сейчас объявляется проще — . Необязательным стало объявление языка скриптов теперь достаточно написать — . Исчезло объявление типа языка программирования — type=»text/javascript».

Для того, чтобы Интернет-Эксплорер версии 9 и ниже правильно отображал содержание сайта на HTML5, используется скрипт, на который мы даём ссылку.

В итоге мы получим примерно такой шаблон для страницы сайта:

Опубликовал Administrator — 3 апреля 2016, 07:12 — 608 просмотров

Комментарии

Зарегистрируйтесь или войдите в Ваш аккаунт, чтобы оставить комментарий.

Источник

Миграция с HTML4 на HTML5

В этой главе будет показано, как перевести код HTML4 в код HTML5 без потери функционала исходного контента или структуры.

Используя приемы, продемонстрированные здесь, также можно мигрировать с XHTML в HTML5.

Типичная страница HTML4

1. Изменение директивы DOCTYPE по стандарту HTML5

меняется по стандарту HTML5:

2. Изменение указания кодировки по стандарту HTML5

Информация о кодировке документа:

меняется по стандарту HTML5:

3. Добавляем библиотеку HTML5Shiv

Новые семантические элементы HTML5 поддерживаются всеми современными браузерами. При этом, вы можете «научить» более старые браузеры, как обрабатывать «неизвестные элементы».

Тем не менее, IE8 и более ранние версии не допускают определение стилей для неизвестных элементов. Ответом на это стала библиотека HTML5Shiv, которая является набором кодов JavaScript, определяющих стили для HTML5 элементов в Internet Explorer до версии 9.

Добавление библиотеки HTML5Shiv:

Подробнее о HTML5Shiv см. в разделе «Поддержка HTML5 браузерами».

4. Замена элементов на семантические элементы HTML5

В приведенном выше коде страницы есть код CSS, содержащий идентификаторы и классы, задающие стили некоторых элементов:

 body < font-family: Verdana,sans-serif; font-size: 0.9em; >div#header, div#footer < padding: 10px; color: white; background-color: black; >div#content < margin: 5px; padding: 10px; background-color: lightgrey; >div.article < margin: 5px; padding: 10px; background-color: white; >div#menu ul < padding: 0; >div#menu ul li

Его следует заменить на такой же код CSS, но задающий уже стили для семантических элементов HTML5:

 body < font-family: Verdana,sans-serif; font-size: 0.9em; >header, footer < padding: 10px; color: white; background-color: black; >section < margin: 5px; padding: 10px; background-color: lightgrey; >article < margin: 5px; padding: 10px; background-color: white; >nav ul < padding: 0; >nav ul li

И наконец, замените элементы HTML4 на соответствующие семантические элементы HTML5:

Разница между элементами , и

Есть некоторая непонятная разница в стандарте HTML5 между тегами , и .

Согласно стандарту HTML5 элемент определяется, как блок связанных элементов. Элемент как законченный, самодостаточный блок связанных элементов. А элемент определяется, как блок дочерних элементов.

Но как же все это интерпретировать?

В примере выше элемент использовался в качестве контейнера для связанных по тематике элементов .

Но аналогичным образом можно было бы в качестве контейнера использовать также элемент .

Вот несколько других примеров.

  
Знаменитые города
 
Лондон
 
Лондон — столица Англии. Это самый густо населенный город Великобритании с населением более 13 миллионов человек.
 
 
Париж
 
Париж — столица и самый густо населенный город Франции.
 
 
Токио
 
Токио — столица Японии и самый густо населенный город мира.
 
 
 

  
Знаменитые города
 
Лондон
 
Лондон — столица Англии. Это самый густо населенный город Великобритании с населением более 13 миллионов человек.
 
 
Париж
 
Париж — столица и самый густо населенный город Франции.
 
 
Токио
 
Токио — столица Японии и самый густо населенный город мира.
 
 
 

  
 
Знаменитые города
 
Лондон
 
Лондон — столица Англии. Это самый густо населенный город Великобритании с населением более 13 миллионов человек.
 
 
Париж
 
Париж — столица и самый густо населенный город Франции.
 
 
Токио
 
Токио — столица Японии и самый густо населенный город мира.
 
 
 
Знаменитые страны
 
Англия
 
Лондон — столица Англии. Это самый густо населенный город Великобритании с населением более 13 миллионов человек.
 
 
Франция
 
Париж — столица и самый густо населенный город Франции.
 
 
Япония
 
Токио — столица Японии и самый густо населенный город мира.
 
 
 
 

Источник

HTML5 Migration

On this page, we’ll show how you can migrate from HTML4 to HTML5. Let’s learn it step by step.

In HTML4, we used id and class attributes which are now replaced with new elements in HTML5:

div >header"> - header> div >menu"> - nav> div >content"> - section> div >article"> - article> div >footer"> - footer>

Step 1: Changing the Doctype

We change the HTML4 doctype to HTML5 doctype.

HTML4

HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5

Step 2: Changing the Encoding

Here, we change the HTML4 encoding information to HTML5 encoding.

HTML4

meta http-equiv="Content-Type" content="text/html;charset=utf-8">

HTML5

Step 3: Adding the HTML5Shiv

All modern browsers support the new HTML5 semantic elements. Moreover, you can «teach» older browsers handling «unknown elements». The HTML5Shiv is used to enable styling of HTML5 elements in such browsers.

[if lt IE 9]>  

Step 4: Changing to HTML5 Semantic Elements

Fisrt, see an example where HTML4 semantic elements are used.

Example of HTML4 elements:

html> html> head> title>Title of the document title> meta charset="utf-8"> script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> script> style> body < font-size: 0.9em; > #header, #footer < padding: 10px; color: white; background-color: black; text-align: center; > h2 < text-align: center > h3 < text-align: right; padding-right: 20px; > div.content < margin: 5px; padding: 20px; background-color: lightgrey; > .article < margin: 20px; padding: 10px; background-color: white; > #header-menu ul < padding: 0; > #header-menu ul li < display: inline; margin: 5px; > style> head> body> div id="header"> h1>LaravelSoft h1> div> div id="header-menu"> ul> li> a href="https://www.w3docs.com/learn-html.html">Books a> li> li> a href="https://www.w3docs.com/quiz/">Quizzes a> li> li> a href="https://www.w3docs.com/snippets">Snippets a> li> li> a href="https://www.w3docs.com/tool/">Tools a> li> li> a href="https://www.w3docs.com/string-functions/">String Functions a> li> ul> div> div class="content"> h2>Article Section h2> div class="article"> h3>Article Title h3> p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. p> div> div class="article"> h3>News Article h3> p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. p> p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. p> div> div> div id="footer"> p>© 2020 All rights reserved. p> div> body> html>

Now, see the migration from HTML4 elements to HTML5 semantic elements.

Example of HTML5 semantic elements:

html> html> head> title>Title of the document title> meta charset="utf-8"> script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> script> style> body < font-size: 0.9em; > header, footer < padding: 10px; color: white; background-color: black; text-align: center; > h2 < text-align: center > h3 < text-align: right; padding-right: 20px; > section < margin: 5px; padding: 20px; background-color: lightgrey; > article < margin: 20px; padding: 10px; background-color: white; > nav ul < padding: 0; > nav ul li < display: inline; margin: 5px; > style> head> body> header> h1>LaravelSoft h1> header> nav> ul> li> a href="https://www.w3docs.com/learn-html.html">Books a> li> li> a href="https://www.w3docs.com/quiz/">Quizzes a> li> li> a href="https://www.w3docs.com/snippets">Snippets a> li> li> a href="https://www.w3docs.com/tool/">Tools a> li> li> a href="https://www.w3docs.com/string-functions/">String Functions a> li> ul> nav> section> h2>Article Section h2> article> h3>Article Title h3> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. p> article> article> h3>News Article h3> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. p> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. p> article> section> footer> p>© 2020 All rights reserved. p> footer> body> html>

The Difference Between , and Elements

In HTML5, there are some differences between the , , and elements. Particularly:

• The element is specified as a block of related elements.
• The element is specified as an independent and complete block of related elements.
• The element is specified as a block of children elements.

Example of the , , and tags:

html> html> head> title>Title of the document title> head> body> section> h1>Articles about flowers h1> article> h2>Roses h2> p> Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration. p> article> div> h2>Lilies h2> p> Lily - an amazing beauty flower, one of the most ancient among a variety of bulbous plants. p> div> section> body> html>

Источник