Все для создания и продвижения сайтов

Верстка, программирование, SEO

Вёрстка HTML5

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

Итак, начнем работу. Прежде всего вам необходимо прописать в документе DOCTYPE.

<!DOCTYPE HTML>

Наверняка вы заметили, что в нем есть маленькие буквы, а также необычна и длина описания. Дело в том, что это теперь возможно, ведь в настоящее время регистр не влияет ни на что! Чтобы прочувствовать разницу, предоставим вам прежний формат написания:

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

Теперь нам необходимо изменить обозначение кодировки. Исходное:

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

Измененное:

<meta charset=utf-8>

Расскажем о некоторых вольностях. Дело в том, что для HTML5 абсолютно по барабану то, пишете ли вы кавычки или же нет. Также ему неинтересно, в каком регистре вы ставите символы, и даже наличие/отсутствие в конце непарных тегов слэша его не волнует!

Теперь нам нужно определить язык. Вместо вот этого:

<html lang="ru" dir="ltr" class="client-nojs" xmlns="http://www.w3.org/1999/xhtml">

Мы пишем вот это:

<html lang=ru>

Помимо этого, упрощению подверглись и ссылки. Дело в том, что убрали атрибут type, то есть код теперь выглядит следующим образом:

<link rel="stylesheet" href="style.css" />

Помните, как было раньше? Вот так:

<link rel="stylesheet" href="style.css" type="text/css" />

Этот же атрибут для парных элементов script тоже добавлять нет необходимости. Конечно, в том случае, если rel не является однозначным, как rel=alternate.

Перед тем как двинуться дальше, перейдя к контенту, рассмотрим еще один нюанс - хак IE. Дело в том, что Explorer, как типичный браузер, таких тегов не понимает, поэтому для фиксации нужно прописать вот такой скрипт:


Помимо этого, необходимо новые элементы превратить в блочные - но это, разумеется, выполняется в css-файле.

aside, nav, footer, header, section { display: block }

Итак, все понятно? Отлично, двигаемся дальше! Разберем конструкцию блога в HTML4 и HTML5, одновременно рассматривая различия.

HTML4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ru" dir="ltr" class="client-nojs" xmlns="http://www.w3.org/1999/xhtml>
     <head></head>
     <body>
          
 
          
Пост
</body> </html>

А теперь посмотрим, какие изменения были совершены:

HTML5

<!doctype html>
   <html lang=ru>
    <head></head>
    
        <header> Шапка
             
        
 
        
Пост
Подвал
</body> </html>

Становится понятно, что теперь все более просто. Помимо этого, были добавлены новые теги, которые предоставляют информацию для поисковых роботов в более простом виде.

  • <header> - шапка вашего блога или сайта;
  • <navr> - навигационный блок, который идеально подходит для того, чтобы формировать список основных навигационных ссылок;
  • <asider> - это боковая колонка;
  • <articler> - комментарий, пост или любой другой независимый текст;
  • <sectionr> - раздел того или иного документа;
  • <footer> - всем знакомый футер, или подвал.

Обратите внимание на то, что section - тег, которым можно заменить div практически в любом случае.

Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.