Html5 верстка


Html5 верстка

html5_tumblr.jpg

Сегодня я покажу основные моменты, которые стоит знать при работе с HTML5, и мы с вами сверстаем базовый HTML5-шаблон.

400x3001.png

Начнём работу. Первое, что стоит прописать в новом документе — это 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" /> 

Не нужно добавлять атрибут type для элементов <script> и <style>. Если, конечно rel не однозначный, например, на rel=alternate.


Прежде чем перейти к контенту, стоит остановиться ещё на 1-м моменте. Это хак под IE. Explorer не понимает новых тегов, так что стоит прописать скрипт для фиксации:

<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

Еще необходимо сделать новые элементы блочными (это уже в 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> <div id="header"> Шапка <div id="navigation">Навигация</div> </div> <div id="content"> <div id="post">Пост</div> <div id="sidebar">Боковая колонка</div> </div> <div id="footer">Подвал</div> </body> </html> 

И теперь взглянем по-новому:

naikom.ru

HTML5 и СЕО


Одно из ключевых особенностей HTML5 и на мой взгляд самое важное – это разделение поисковым роботом всех блоков по их значимости, т.е. сегментация веб-страниц. В html4 сделать это  было невозможно, т.к. стандартный тег div не добавляет смысловой значимости элементу, который находится внутри данного тега. С использованием новых элементов header, article, aside, footer все меняется. Т.е. грубо говоря, они “говорят” поисковым роботам каким элементам придавать значение, а какие пропускать. Например, поисковый бот легко поймет, что информация, заключенная между тегами <footer></footer> является копирайтом и подобной информацией для посетителя.

Элементы, влияющие на индексацию в поисковых системах

<article>

Тег article является одним из наиболее важных при сегментации страниц сайта. Данный тег явно указывает поисковым системам, где находится основной контент сайта. А мы все знаем, что контент это прежде всего то, за чем приходят посетители на сайт. Здесь предполагается, что ПС будут максимально уделять внимание контенту, заключенному между тегами <article> </article>, отбросив или отодвинув на второй план остальные элементы.

<section>

Элемент section разбивает всю разметку на различные секции. Что это дает? Поисковые роботы хорошо ориентируются на веб-странице, которая хорошо структурирована. Если правильно использовать тег <section>, то можно с легкостью построить информационную иерархию документа, а это в свою очередь улучшает индексацию сайта в целом.


<header>

C помощью тега header поисковые роботы легко могут найти на сайте логотип, название сайта, слоган, главную навигацию (главное меню).

<nav>

Данный тег определяет навигационную структуру на сайте.

Ссылки

В отличии от HTML4 в HTML5 ссылки имеют больше значимых атрибутов.

Вот основные атрибуты ссылок в HTML5:

alternate – ссылки на альтернативные адреса одной и той же страницы

author – ссылки, имеющие отношение к автору веб-страницы

external – ссылки, указывающие на внешние ресурсы

help – ссылки, ведущие на страницы помощи

next – ссылка ведущая на следующую часть страницы

nofollow – ссылка не подтверждается данным сайтом

prev – ссылка ведущая на предыдущую часть страницы

Остальные атрибуты можете посмотреть здесь.

Вот такой вот небольшой обзор разметки на HTML5. Что касается меня, то я давно перешел на верстку с использованием разметки HTML5 и большинство шаблонов на своих сайтах уже перевел на HTML5, вот только вот до данного блога никак руки не доходят.

На этом все. Всем пока. Увидимся в следующих постах.

А вы уже перешли на HTML5?

zaurmag.ru

Семантическая верстка в HTML


Семантика в языкознании означает смысл, значение слова или речевого оборота. Мы уже встречали данный термин, когда рассматривали сбор семантического ядра для сайта. И в том контексте, и в сегодняшней статье определение «семантический» указывает на то, что в основе лежит смысл. А стало быть, семантическая верстка – это верстка, построенная на смысловой структуре. В отличие от так называемой верстки на дивах (div – html-тег), все элементы семантической верстки подчинены смысловой иерархии. И самый наглядный пример для объяснения – это использование тегов заголовков и подзаголовков h1, h2, h3 и т.д.Семантическая разметка страницы

Это теги семантической разметки. И если изначально в html для выделения подзаголовков использовались теги <b> или <strong>, то сегодня такое акцентирование для заголовков почти не употребляется. Вместо этого теги h1 и h2 вобрали все необходимые функции для выделения названий разделов жирным увеличенным шрифтом. Кроме того, эти теги дают гораздо больше информации о тексте, как самим веб-разработчикам, так и роботам, обрабатывающим веб-страницы. Т.е. ранее html-верстка была более описательной, уделялось внимание внешним атрибутам элементов, которые составляли общую структуру отдельными блоками. В семантической же верстке – основной акцент делается на подчинении структурных элементов общей смысловой иерархии, где каждый блок имеет свое назначение для целого.


Употребление тегов семантической верстки позволяет уменьшить количество кода страницы, ускорить обработку, а соответственно и загрузку документа. Также понятная структура кода гораздо быстрее распознается, а потому и выше котируется поисковыми системами. Напомню, как мы использовали микроразметку для расширенного описания сайта в выдаче.

Когда каждому структурному элементу сайта соответствует определенный тег, код становится упорядоченным и понятным. При этом описание стилей элементов выводятся в отдельный css-файл. Для того, чтобы увидеть насколько страницы вашего сайта структурированы можно проделать простой эксперимент. Отключите на время в браузере поддержку CSS и JavaScript и посмотрите, где на вашем ресурсе названия статей, содержание, подзаголовки и т.д. Можете ли вы разобраться в структуре вашего сайта, используя только html-разметку?

Примеры семантической верстки HTML5

Еще один наглядный пример, где ясно видно отличие семантической верстки от прошлых стандартов html, — использование тега <em> (от английского emphasis – акцент). Тег <em> заменил тег <i> (выделение курсивом). Для тега <em> в файле стилей может задаваться отображение курсивом, подчеркиванием, полужирным. Но значение данного тега – именно акцентирование текста, к примеру, для выделения нового термина. Однако, в случае, когда нужно употребить цитату, в семантической верстке будет уже использоваться тег <cite>, хотя ранее оба эти элемента (и новый термин, и цитата) были бы заключены в тег <i> (выделены курсивом).


А теперь приведем пример, как верстка дивами заменяется семантической.

Пример обычной верстки:

Замена на семантическую:

Здесь мы использовали теги семантической верстки: section, article, h1, p.

Стили прописываются, как правило, в отдельном в файле (в случае с WordPress в style.css) следующим образом:

В случае верстки с div, данное описание выглядело бы так:

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

Распространенные теги HTML5 для семантической верстки

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

<header> — задает шапку сайта или раздела, в него обычно включен заголовок, а также внутрь могут помещаться другие теги, кроме более высоких по иерархии (html, body, head и т.п.)


<article> — тег, в который заключают элементы статьи: непосредственно текст, изображения, комментарии

<section> — разделяет веб-документ на смысловые секции, есть возможность вкладывать один тег section в другой

<footer> — подвал сайта, где содержится информация о контактах, адреса, ссылки, авторство и прочее

<nav> — тег html5 для навигации по сайту, в него помещаются наиболее приоритетные ссылки, хотя допустимо использование нескольких тегов на странице

<aside> — блок неосновного контента, как правило, боковая панель (сайдбар): рекламные блоки, рубрики, метки и т.д.

Теперь, зная вышеприведенные теги, посмотрим, как они работают на примере ниже.

Прописываем такой код в редакторе Notepad или Блокноте:

Теперь запустим документ, как html-файл.

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

Итак, общий вид нашего файла style.css будет таким:

Подробно изучив приведенный код, вы увидите, что для каждого тега (header, section, article, footer) заданы расположение, ширина, цвет заливки или шрифта.

Такого же вида веб-страницы можно было бы достичь, сверстав документ с помощью тегов <div>, однако использовав теги семантической верстки мы наглядно узнали о ее преимуществах. Просмотрев код, сразу становится понятным значение того или иного блока, что дает возможность веб-разработчикам эффективнее работать с документами. В свою очередь структурированность семантической верстки позволяет поисковым роботам быстро обрабатывать страницы, что дает фору в ранжировании, созданного таким образом, ресурса.


Кроме приведенных основных тегов html5 для семантической верстки, существует также множество специальных, выполняющих важное назначение. Приведем краткий список наиболее использующихся семантических тегов html5:

  • <video> — воспроизведение и управление видео;
  • <audio> — добавление и управление аудио на странице;
  • <canvas> — область для создания изображений и других объектов Javascript;
  • <command> — кнопка или переключатель внутри тега <menu>;
  • <menu> — создание меню и контейнер для тега <command>;
  • <datalist> — список вариантов, доступный после ввода в текстовом поле (пример такого списка – подсказки Google);
  • <figure> — группирование элементов (например, изображения с подписями);
  • <hgroup> — группирование заголовков и подзаголовков;
  • <mark> — смысловое выделение текста;
  • <meter> — вывод значений в заданном диапазоне, как правило, числовые данные;
  • <ruby> — добавление аннотации сверху или снизу основного текста (пример – транскрипция под словами);
  • <source> — вставка аудио- или видеофайла внутри тегов audio, video;
  • <time> — текст внутри тега приобретает значение даты, времени;

Напоследок, смотрите познавательный видео-урок по основам html5, его тегами и примерами их использования:

При должной устремленности, вы обязательно сможете освоить необходимые  знания. Верьте в свои силы.

До новых встреч!

pro-wordpress.ru

Верстка на HTML5 — разработка быстрее, а код гибче

Вдобавок к размещению новых семантических элементов HTML5 еще и сильно укорачивает код.

Заметно, что они вышли гораздо аккуратнее, чем то, что у вас получилось бы, если писать HTML4 или XHTML. Объявление doctype занимает всего четыре буквы.

А вот как это было раньше:

Способ HTML5 гораздо лучше, правда? Далее мы открываем тэг html и устанавливаем язык документа. (Подтэг своего языка можно найти в IANA Language Subtag Registry). Еще одно заметное тут изменение – отсутствие кавычек, окружающих значение en. Вам приходилось для подтверждения правильности включать кавычки в XHTML, но исходя из того, что это HTML5, они больше не необходимы.

Может, это покажется совсем небольшим выигрышем: сколько (кило)байт вы сэкономите на нескольких кавычках? Но ведь страница грузится не единожды; со временем она вам за все отплатит. У вас в действительности может приключиться другая сложность — по привычке вы продолжите добавлять кавычки. Если в своем любимом текстовом редакторе вы пользуетесь великолепным плагином Zen Coding, то он добавляет кавычки автоматически. Единственное решение проблемы – найти и убрать их все после окончания работы над файлом.

В элементе head мы сначала определяем набор символов и добавляем заглавие. Весьма стандартно, без кавычек. Двигаясь дальше, вставляем условный комментарий, внутрь которого загружаем файл JavaScript, который поможет нам работать с Internet Explorer (IE) 8 и более ранними его версиями.

Условный комментарий – это вид HTML-комментария, который Microsoft использует в IE, по сути, для реализации отдельных (или всех) версий своего браузера.

Используемый нами здесь комментарий проверяет, является ли браузер, открывающий страницу, Internet Explorer’ом с номером версии менее 9. Другой комментарий, который мы бы использовали, это: < !-- [if lte IE 8] -- >; он проверил бы, является ли открывающий страницу браузер IE версией ниже или равной 8. По существу, между этими двумя комментариями нет разницы; они оба направлены на один ряд версий IE, так что можете взять любой.

Причина включения скрипта HTML5Shiv Реми Шарпа (Remy Sharp) кроется в отсутствии у Internet Explorer’а поддержки элементов HTML5. Проблема IE в том, что он не применяет никаких стилей CSS к элементам, которые не распознает. Таким образом, чтобы заставить более старые версии IE правильно выполнять элементы HTML5, нам нужно при помощи JavaScript создать незнакомые элементы.

Продвигаясь к тэгу body, размечаем область заголовка своей страницы, где полно элементов HTML5:

Элемент Header

Сразу же после открытия тэга body мы воспользуемся одним из новых элементов HTML5 – header. Вот какое определение дает элементу заголовка консорциум Word Wide Web (W3C):

Элемент заголовка (header) представляет вступительную группу или вспомогательные средства навигации.

Следуя их рекомендации, элемент header будет содержать наш логотип, подзаголовок и основную навигацию. При вводе элемента заголовка header у нас появляется деталь разметки, содержащая все те части страницы, которые мы интуитивно считаем заголовком. (Или все те детали страницы, которые будут вложены в элемент div с id заголовка.) На странице элемент header можно употребить не один раз, и мы снова будем пользоваться им внутри элементов article, в которых будут содержаться вступления к постам.

Элемент Hgroup

Первым внутри элемента заголовка идет другой новый тэг – hgroup. Мы воспользуемся им для показа соответственно логотипа нашего сайта и подзаголовка в тэгах h1 и h2.

Элемент hgroup используется для группирования набора элементов h1-h6, когда у заголовка имеются множественные уровни, такие как субименования, альтернативные названия или подзаголовки.

Элемент hgroup может смотреться излишним, пока вы не обернете, как обычно, заголовки в элемент div для того, чтобы у названия или субименования(й) был обычный фон или стиль. Однако в схеме документа hgroup играет важную роль. Алгоритм схемы проверяет вашу страницу и передает структуру заголовка. Проверить набросок своей работы с помощью инструмента Outliner. Когда алгоритм схемы столкнется с элементом hgroup, он проигнорирует все, кроме заголовка самого высшего уровня (обычно h1).

Теперь у нас возникла проблема: алгоритм схемы не безупречен и не завершен. Например, следующий элемент, который мы обсудим – это элемент nav, и разметка помечает его как "Untitled Section" (область без названия). К разработчикам разметки поступали просьбы об изменении алгоритма схемы для того, чтобы тот представлял элемент nav как "Navigation" (навигация). В любом случае, элемент hgroup обеспечивает вас способом группирования своих заголовков и, таким образом, организует их как структурно, так и семантически.

Элемент Nav

Мы переходим к следующему элементу HTML5 – nav. В nav мы включим основную навигацию сайта, обернутую в неупорядоченный список.

Элемент nav представляет сектор страницы, который ссылается на другие страницы или области внутри страницы: область со ссылками навигации.

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

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

Элемент Article

Следующий элемент, который я хочу вам представить – article. Основная область нашей демо-страницы содержит три цитаты из постов, и каждую из них мы обернем в тэг article.

Вот определение W3C для элемента article:

Элемент article представляет в документе модульную композицию […], таким образом, он предназначен стать автономно распределяемым или многократно используемым, например, при синдикации (одновременном опубликовании контента на нескольких веб-узлах).

На этот раз спецификация более понятная и пост в блог (или его отрывок) гораздо лучше (обратите внимание на упоминание о синдикации) подходит к article. Конечно, мы можем разместить на странице много элементов article.

Вы, несомненно, заметили, что внутри article мы разместили элементы заголовка и нижнего колонтитула. Как header, так и footer могут быть использованы более одного раза на отдельной HTML-странице. Так как header – это «вступительная группа или вспомогательный элемент навигации», то мы включили в него дату, название и количество комментариев. Далее, у нас имеется параграф с отрывком из поста, за которым следует footer (нижний колонтитул).

Элемент Footer

Как я уже говорил, нижний колонтитул footer можно использовать на одной странице столько раз, сколько нужно, и он представляет собой сегмент нижнего колонтитула страницы документа или часть документа.

Элемент footer представляет нижний колонтитул той секции, к которой обращается. Обычно нижний колонтитул содержит информацию о своей секции, такую, как авторство, ссылки на связанные документы, дату копирайта и прочее.

У нас на демо-странице есть четыре элемента footer: по одному на каждый из трех элементов article и общий нижний колонтитул для всей страницы. Нижний колонтитул в элементе article содержит имя автора поста, тэги и кнопку ссылки на полную версию поста в блоге.

footer

Общий нижний колонтитул содержит три элемента секций и извещение об авторском праве. Оба варианта использования элемента footer правомерны и соответствуют рекомендации W3C.

Элемент Section

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

Элемент section представляет общую область документа или приложения. Секция в данном случае – это тематическое группирование содержимого, обычно при помощи заголовка.

Элемент section довольно хитрый, потому что в определении по спецификации кажется очень похожим на элемент div. Я попался в эту ловушку, когда начал писать код для демо-страницы; я разместил внутри элемента section три элемента article. Вскоре я понял ошибочность своих методов. Единственный способ решить, употреблять ли section – это посмотреть, нужно ли той области, которую вы хотите обернуть элементом section, название (заголовок). Из определения видно, что у элемента section обычно есть заголовок.

Другой вопрос, который полезно задавать для установления обоснованности использования элемента section, это: добавляете ли вы его исключительно для стилей? Вы добавляете его просто потому, что нужно выделить эту секцию с помощью JavaScript, или потому что нужно применить к ней обычный стиль, и вы вместо того должны использовать элемент div.

Обертывание в тэг section трех элементов article нашей демо-страницы было бы оправдано, если бы section включал заголовок типа «Последние посты в блогах». Это имело бы смысл; иначе тэг, внутри которого расположены элементы article – это просто поддержка стилей – нечто, помогающее нам нацелиться на него при помощи JavaScript или CSS.

Элемент Aside

Последний используемый для демо-страницы элемент HTML5 – aside; мы использовали его как контейнер боковой колонки.

Элемент aside представляет секцию страницы, состоящую их контента, поверхностно связанного с содержимым, расположенным вокруг aside, и который может восприниматься отдельно от этого содержимого. Такие секции часто представлены в книгопечатании как боковые колонки.

Как видно из спецификации, один из примеров идеального использования элемента aside – это боковая колонка. Ниже на графике можно увидеть расположение иерархии элемента aside нашей демо-страницы.

aside

Мы разместили два section и один nav. Первый элемент section содержит ссылки на Twitter и RSS, а второй представляет последний твит (запись пользователя в Twitter’е). Второй элемент section, кроме того — один из редких случаев, когда у него отсутствует заголовок. У него могло бы быть название, что-нибудь типа: «Последний твит», но, я думаю, это необязательно, потому что читатели привыкли видеть блоки вроде этого, а метка Twitter’а под цитатой очень узнаваема. Элемент nav нашей боковой колонки используется для отражения списка блогов и, в отличие от основной навигации, у него есть заголовок.

webformyself.com

Что такое верстка сайта или страницы для интернета

Верстка — это создание страницы по готовому макету psd (Photoshop) для интернета или для web. Это подразумевает в себе создание некой логической разбивки страницы кодом html и его визуальным оформлением с помощью css (Cascading Style Sheets — каскадные таблицы стилей). Для верстки необходим готовый шаблон прорисован в фотошоп с которого и будет происходить верстка. В ходе верстки у вас получится несколько типов файлов, которые должны находиться в одном месте, то есть в папке, это будет ваша web страница в формате index.html, ваш файл с расширением css в котором будут все стили предназначенные для вашей страницы и папка с картинками, которые используются при оформлении страницы стилями.

Как и в разных прочих работах касающихся как сферы IT, так и других сфер в жизни людей, верстка имеет некие негласные правила, придерживаясь которых вы получите к себе уважение со стороны заказчика и хорошую верстку, которой можно будет гордиться, вот несколько правил на которые я хочу обратить ваше внимание:

  • Совпадение с дизайном макета
  • Кроссбраузерность
  • Поддержка популярных разрешений
  • Валидный и аккуратный код

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

Кроссбраузерность — существует много различных браузеров, от известных нам Opera, Mozilla, Chrome и Internet Explorer и до менее известных их аналогов, вот кроссбраузерность и отвечает за одинаковое отображение верстки во всех этих браузерах. По сути сейчас все современнные браузеры отлично отображают верстку, но этого нельзя сказать о старых версиях IE.

Поддержка популярных разрешений — пользователи используют различные разрешения и аксессуары для серфинга в сети интернет, наша задача сделать верстку таковой, чтобы наша верстка отображалась максимально удобно и качественно на страницах с разных устройств просмотра страниц в сети. Главное ограничение для нас, это ширина монитора, которая минимальная на данный момент 1024px. Если наша страница помещается в этой ширине, это хорошо,  а вот при обратном процессе у вас появится горизонтальная страница прокрутки, что для нас есть не совсем хорошо и тем более для будущих пользователей нашей страницы.

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

Знакомство с HTML5

HTML5 — это не новый какой-то язык разметки, а всего лишь обновленный html4 в который были добавлены новые теги в основном предназначенные под оптимизацию и продвижение вашего будущего сайта. Все основные изменения с 4 на 5 версию можно выделить списком:

  • Доступны новые теги и атрибуты.
  • Возможность рисовать на странице.
  • Поддержка элементов ранее доступных только посредством использования Flash (вставка видео или аудио).

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

Программное обеспечение для верстальщика

Для верстальщика нужны определенные программы, которые помогут в работе и станут незаменимыми помощниками при вашей дальнейшей работе. Первое, что мы должны установить себе на компьютер это программу Notepad++. Это такой текстовый редактор, который умеет подсвечивать синтаксис языка программирования и может кодировать документ в различные кодировки. Скачать этот редактор можно скачать абсолютно бесплатно по адресу http://notepad-plus-plus.org/download/v6.7.4.html, по ссылке всегда актуальная версия.

Второй необходимой программой является Adobe Photoshop, думаю рассказывать о ее способностям нет смысла, все так или иначе знают о ее возможностях и применении. Фотошоп нужен, чтобы открывать макет и брать изображения для верстки, а также сравнивать нашу верстку с макетом в фотошоп.

Как же обойтись без браузеров, мы уже поняли, что для проверки кроссбраузерности нужно несколько браузеров, поэтому установим себе на компьютер их, рекомендую поставить для начала самые популярные и использовать периодически для просмотра результатов нашей верстки. Установите себе: Opera, Mozilla, Chrome, Internet Explorer и Yandex браузеры.

Основным браузером для верстки я беру Mozilla Firefox, если вам интересно почему, отвечу так — для этого браузера написано наибольшее количество расширений во всевозможных применениях, включая и верстку. Мы будем использовать этот браузер, как основной, а во всех остальных проверять уже нашу кроссбраузерность.

Дополнения для верстальщика на Mozilla

Для нашего основного браузера есть замечательное дополнение под названием Firebug, чтобы установить его, открываем нашу Мозиллу и через меню в правом верхнем углу переходим во вкладку дополнения. Там в поле поиска вводим Firebug и устанавливаем его себе в браузер. Сегодня использовать мы его не будем, но в будущем это станет незаменимый помощник для нашей работы.

Вторым не менее важным дополнением является Web Developer, плагин, дает дополнительный ряд инструментов в верхней панели нашего веб браузера. Как и писал выше, с работой этих плагинов мы ознакомимся уже на практических занятиях.

Сайт с css и без css

Основное отличие сайта с работающими стилями css и без них заключается в его визуальном оформлении. Давайте откроем любую страницу в браузере Mozilla и используя наш плагин Web Developer отключим стили оформления для данной страницы, делается это следующим образом:

Отключение стилей css

На вкладке css отмеченной скриншотом 1 выбираем Disable Styles и Disable All Styles, этим действием мы полностью отключаем стили к данной странице сайта. Вы можете видеть, как работает гипертекстовая разметка html без стилей. По сути страница остается не тронутой, вся информация как была, так и есть, вот только вид у нее не совсем презентабельный ))).

Практическое начало в HTML

Прежде чем мы с вами начнем создавать свою первую страницу на html, я хочу показать и рассказать как это делалось и сейчас многие делают при HTML4

 

Итак первая строка называемая DOCTYPE отвечает за указание или присвоение типа текущему документу, делается это для того, чтобы браузер понимал в каком стандарте отображать данную страницу, а этих стандартов есть несколько (HTML4, HTML5, XHTML и т.д.).

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

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

Внутри парного тега html содержатся еще два таких же парных тега, это тег <head></head> и тег <body></body>. Первый тег head содержит в себе невидимую для пользователя информацию, которая предназначена для браузера и поисковых систем. Все внутренние теги заключенные в head называются служебные и первым служебным тегом сейчас мы рассмотрим тег meta — это есть одиночный тег и указывает он браузеру на какой кодировке будет сверстана наша страница.

Основной и универсальной кодировкой для использования русскоязычных символов является utf-8, в дальнейшем следует создавать именно в ней свои страницы. Чтобы сменить кодировку в Notepad++ нужно в верхнем меню нажать слово кодировка и выбрать преобразовать в UTF-8 без BOM.

Чтобы не устанавливать кодировку в ручную каждый раз я вам советую настроить ее по умолчанию для каждого нового документа в Notepad++, делается это следующим образом. Заходим в раздел меню Опции —> настройки и переходим во вкладку Новый Документ с правой стороны указываем UTF-8 без BOM и закрываем настройки. В дальнейшем все ваши документы будут создаваться в этой кодировке по умолчанию.

Следующим тегом находящимся в теге head есть парный тег <title>…</title> — тег, который дает название нашей странице, это название выводится в верху нашей вкладки в браузере. Название имеет очень большое значение для поисковых систем, поэтому в будущем нужно быть внимательным при создании названий вашим документам. Сейчас же можно просто внутри парного тега title написать <title>Мой первый html документ</title>, сохранить и открыть в браузере, в верху вкладки вы найдете это название.

Следующим шагом мы рассмотрим парный тег <body>…</body>. Это тег, который содержит в себе всю видимую страницу браузера. В нем уже и будет содержаться весь макет, который мы будем верстать с макета psd.

Еще скажу пару слов о правильной компоновке кода в редакторе Notepad++, используйте табуляцию, то есть все теги, которые вложены внутри других парных тегов можно сдвигать в право на один TAB. Тогда ваш код будет чистым, понятным и удобочитаемым.

Основные отличия HTML5 от HTML4

Мы с вами уже рассмотрели выше, как оформляется основной каркас страницы по старому принципу, сейчас же сделаем это с помощью технологии HTML5 и затронем несколько основных тегов введенных в 5 версии.

DOCTYPE стал короче и проще. Также я добавил два мета тега description  и keywords, которые отвечают сугубо за поисковую оптимизацию сайта и предназначаются для поисковых систем. Description  — дает краткое описание характеризующее содержание веб страницы. Keywords — содержит в себе перечень основных ключевых слов по которым продвигается эта страница в поисковой выдаче, в настоящее время тег утратил свое значение и практически не используется вебмастерами да и поисковыми машинами тоже.

Парный тег <header> находится в теге <body> и указывает ПС на часть страниц отвечающей за верхнюю часть страницы, так называемая шапка сайта. В этом теге могут находится логотип, меню, слоган сайта, контактные данные и т.д.

Появился парный тег <nav>, который отвечает за навигацию, по большому счету, в него можно заключать все меню доступные на странице, а также хлебные крошки.

Очень важный тег <article>, который также парный, он отвечает за основное информационное содержание страницы. Обычно это текстовое наполнение, статья в блоге, описание товара на странице карточки товара, описание рецепта, книги и т.д. Этот тег может содержать в себе еще такой парный тег, как <section>. Section разделяет основную статью на более мелкие части, как в коде выше с примером о кошках и собаках.

Так же, как тег <header> для шапки сайта появился тег <footer> (парный) для подвала или футера сайта. В нем содержится вся нижняя часть сайта такая, как копирайт, нижнее меню навигации, ссылки на разработчика и т.д.

Все выше рассмотренные теги имеют большое значение для поисковых систем и никаким образом не влияют на отображение страницы в браузере. Другими словами вы можете их и не использовать, но используя их ваш сайт намного быстрее получит хорошее ранжирование в ПС и приоритет перед теми, кто не использует их.

Заголовки и подзаголовки в html

Вы уже наверное в коде выше заметили непонятный парный тег <h1>. Это тег заголовка первого уровня, то есть самый главный заголовок нашей страницы. Заголовков есть аж 6 уровней, чем выше цифра заголовка, тем менее значимый он для пользователя и ПС. Все они есть парные и находятся в таком виде:

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

Продолжим ознакомление с тегами, которые применяются для оформления текстового наполнения сайта. Предлагаю перейти на сайт http://ru.lipsum.com/и скопировать один абзац предлагаемого текста, для дальнейшего его форматирования с помощью тегов. Вставляем его в наш код пониже заголовка h1 и сдублировав его вставляем на следующей строке еще раз. После сохранения и открытия в браузере вы не увидите двух абзацев, а слитый единый текст, это потому, что браузер не понимает нашего кода так, как мы хотим без специальных разметок — тегов.

Теперь в начале каждого абзаца поставим вот такой вот тег <p>, а в конце абзаца </p>, вы уже догадались, что этот тег парный, так как имеет и открывающий и закрывающий тег. Сохраните еще раз документ и просмотрите на результат в браузере. Изменения на яву )))

Помимо абзацев в тексте очень часто используется принудительный перенос строки, выделяется он одинарным тегом <br /> давайте применим его в первом абзаце по окончании первого предложения и посмотрим на результат. Этот тег можно использовать по несколько раз подряд.

Теги форматирования текста

  • <strong> — парный тег выделяющий область текста жирным начертанием.
  • <em> — тег, который также парный и выделенный текст делает курсивом.

Чтобы вы усвоили на практике эти теги, найдите любые пару словосочетаний в ваших абзацах и сделайте их жирными и курсивом, примерно это будет вот так:

Проделайте это несколько раз, чтобы у вас отложилось в голове их значение и предназначение в верстке.

Понятие строчного и блочного элемента

Все теги, которые есть в применении разметки html делятся на два вида, а именно блочные и строчные. Строчные еще могут называть инлайн элементами верстки.

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

Выделение блочных элементов

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

А вот два тега, которые мы рассмотрели с вами <strong> и <em> являются уже строчными или инлайн элементами. Вы спросите зачем нам все это знать и понимать, отвечаю.

ВАЖНО понимать, что блочные элементы могут в себе содержать, как строчные, так и другие блочные элементы, чего не умеют делать однострочные. Вот два примера, где первый правильно, а второй нет:

Еще важный момент, строчный элемент может в себя включать еще один строчный или инлайн элемент. Но ни в коем случае не блочный элемент. Также следует закрывать парные теги в той последовательности в которой они были и открыты, то есть если есть два строчных элемента и один вложен во второй, то выглядеть это будет так: <strong> текст <em> текст </em></strong>. Не допускайте в этом ошибок.

Что такое атрибут тега

Атрибуты — это дополнительные управляющие слова, которое задают определенные свойства элементам. И первым атрибутом с которым мы познакомимся будет align (элайн), который задает выравнивание элементу. По умолчанию все выравнивание идет по левому краю, чтобы сделать нашим абзацам выравнивание по центру примените атрибут align так, как указано на картинке выше. Проделайте это со всеми значениями данного атрибута.

На практике это уже не применяется, ибо это устаревшее и сейчас все делается с помощью css, то есть с помощью каскадной таблицей стилей. Этот пример вам я привел лишь для понимания, что такое атрибуты и как они применяются.

Но есть атрибуты, которые мы будем использовать и я бы даже рекомендовал их использовать, сейчас я вам приведу пример такого атрибута:

В примере кода вы видите два атрибута применяемые к тегу h1, первый задает выравнивание заголовку и он не используется в html5, а второй задает пояснение данному элементу. Имя атрибута title, а значение вы пишете которое поясняет место применения, я написал, что это заголовок h1. Рекомендую применять в изображениях, к ним мы еще дойдем и затронем там еще один атрибут alt.

Изображения на веб странице

Изображение в html

Изображение ставится на страницу с помощью тега <img src=»» alt=»» />, который имеет два обязательных атрибута!

  1. Тег img не имеет парного закрывающего тега
  2. Имеет два обязательных атрибута

src — атрибут, который указывает путь к изображению, alt — альтернативный текст описывающий кратко картинку, нужен для того случая, если у пользователя отключен просмотр картинок или же картинка повреждена и браузер не может ее показать. Разберем несколько путей указания картинки браузеру.

Абсолютный путь к картинке — <img src=»http://obuchaemsja.com/images/romantic.png» alt=»романтика» />. Абсолютный, потому, что где бы вы не вставили этот код, он будет отображать мою картинку, не важно на сайте это или у вас в рабочем документе.

Относительный путь к картинке — <img src=»images/dvd.jpg» alt=»dvd» />. Это относительный путь к картинке, которая находится в папке рядом с документом html.

Построение относительного пути

На картинке выше указаны примеры использования абсолютных путей, который будут встречаться на практике при верстке.

Хочу еще указать на два не обязательных атрибута применяемые во вставке картинки в теге img. Это атрибут height — высота и width — ширина картинки, их значения пишутся в пикселях, но без px. Попробуйте вставить любую картинку и применив к ней атрибут align, который мы проходили выровнять ее по правому краю.

Создание гиперссылок

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

Внешние ссылки

Здесь приведены два примера ссылки ведущие с нашего документа на страницу поиска Google, в чем же отличие первой от второй. Первая ссылка имеет парный тег <a> и обязательный атрибут href, который и указывает куда ведет ссылка. Такая ссылка откроет страницу Гугл вместо нашей страницы, что не совсем правильно, ведь это внешняя ссылка, а не внутренняя. А вот второй пример, как раз добавляет ссылке атрибут target, который и указывает, что ссылку нужно открывать в новом окне. Хочу добавить, что в данных примерах мы указывали абсолютный путь, как в изображении. То есть эта ссылка будет работать абсолютно везде, на любом сайте она будет вести на сайт Гугл.

Внутренние ссылки

А сейчас давайте создадим внутреннюю ссылку. В папке, где находится наш документ, создаем еще один по html шаблону и называем его page.html, можно вставить туда параграф или просто написать заголовок используя теги H1-H6. После создания второго документа переходим в первый и создаем ссылку на второй. Что следует учитывать, во первых путь уже не абсолютный, а относительный, и так как второй документ находится в одной директории и одной папке нам нужно в атрибуте href указать всего лишь имя и расширение документа. Давайте взглянем на пример:

Наверное вы заметили отсутствие второго не обязательного атрибута тега a target, это потому, что ссылка внутренняя, а такие ссылки не принято открывать в новых окнах.

Помимо внешних и внутренних ссылок на другие страницы, есть еще ссылки на разного вида документы, это могут быть архивы, pdf, картинка, видео и т.д. Если этот файл находится на одной директории и возможно в одной папке с вашим документом html, тогда ссылка указывается относительной, а если это к примеру ссылка на ролик с Ютюб, то здесь уже ссылка будет абсолютной. Вот пример ссылки, которая относительная и ведет к документу находящемуся в одной папке с html страницей.

Здесь можно по желанию использовать второй атрибут тега a target для открытия в новой вкладке браузера, но я это н стал делать.

Графическая ссылка

Что такое графическая ссылка, это картинка (строчный элемент) завернутая или вложенная в анкор другого строчного элемента в данном случае тега a. Ну и как же без примера:

Как видите вместо текста анкора мы указали тег картинки и сейчас он является ссылкой на Яндекс, а так как это внешняя ссылка мы добавили атрибут target.

Якорная ссылка

Якорная ссылка — это ссылка, которая ведет на любой странице к определенному месту документа, то есть веб страницы. Якорные ссылки могут быть как внешними, так и внутри существующей страницы. Для того чтобы указать куда вести ссылке, нужно создать якорь. Они создаются несколькими путями.

  • По идентификатору (id)
  • По атрибуту тега a name

Второй вариант я рассмотрю на примере нашей страницы, в самом низу документа перед закрывающимся тегом body я создаю такой якорь: <a name=»foot» />, это и есть

якорь, а рядом с уже ранее созданными ссылками создаю еще одну на наш якорь.

Если ссылка ведет на другую страницу к якорю, то указывается вначале полный (абсолютный путь) к странице, а потом после знака # ставится имя якоря.

sozdaj-sam.com

Семантическая верстка была основана на той идее, что названия тегов должны совпадать с их смысловым значением и что html разметка должна правильно описывать свой контент. Рассмотрим примеры самых важных и распространенных семантических тегов HTML5:

<header> — Используется для создания шапки сайта, в теге могут быть меню навигации, встречающиеся почти во всех сайтах, логотип и важные ссылки. В header могут быть описаны любые теги кроме самого header, и footer(исключениями являются основные теги <html>, <head>, <style>, <script>, <body>).

<article> — в переводе с англ. – статья. Этот тег является контентом для статей, в нем должны содержаться названия, текст и картинки, оценки и комментарии к статье. Для большего удобства комментарии могут быть включены в отдельный <article>, а тот в свою очередь в основной.

<aside> — тег используется для контента, который хранится вне основного, часто тег используется для рекламных блоков, кнопок социальных сетей.

<section> — с помощью этого тега веб-страницу можно разделить на смысловые части, можно сделать это как с одной статьей, так и объединив несколько в одну тематику.

<footer> — нижняя часть страницы, подвал сайта, хранящий в себе ссылки, информацию об авторских правах, дату создания сайта и многое другое. В footer-е могут использоваться любые теги, исключением являются <footer>, <header> и основные теги html.

<figure> — этот тег предназначен для группировки элементов, например, картинку и текст с описанием можно взять в figure и только потом поместить в тег <article>.

<nav> — включает в себя меню навигации по сайту, на странице таких элементов может быть несколько, но разработчики HTML 5 рекомендуют использовать лишь один такой элемент, и он должен находиться в главном меню.

Следующий пример – макет распространенной веб-страницы, ее мы создадим, используя теги HTML 5.

С помощью семантического метода верстки можно создать такую веб-страницу, используя следующий код:

А вот еще один очень интересный пример использования <figure> ( пути к картинкам в примере небходимо заменить на свои ):

Тег <figcaption> является дочерним для <figure>, и предназначен для его описания.

Используя HTML 5 семантические теги, ни в коем случае нельзя ими злоупотреблять. Старые <div> можно и нужно использовать там, где семантические теги не являются 100% решением. Если вы не уверены нужно ли употреблять <asign> или <section> (или любой другой HTML 5 тег), то лучше воспользоваться обычным <div>. И это не будет означать, что вы нарушаете структуру пятого html, а наоборот, <div> рекомендуют использовать сами разработчики языка гипертекстовой разметки!

Итак, при переходе от блочной к семантической верстке, <div> выжили и все еще остаются востребованным и незаменимым элементом html. Семантическая верстка внесла новые элементы, совпадающие со значением хранимого контента и смысла, который несет в себе элемент, но в html, как и в любой другой технологии, связанной с программированием, не обойтись без универсального решения, которым был и будет оставаться — самый элементарный блок <div>.

Для тех кто не читал — Табличная, Блочная и Семантическая виды верстки — в чем разница?

Html5 верстка

codeacademy.ru

Верстка div (старая)

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span>    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU">   <head profile="http://gmpg.org/xfn/11">    <!-- ......... -->    </head>   <body>   <!-- Шапка сайта -->    <div id="headerInner">    <!-- Навигация -->    <div class="bottomMenu">   <!-- ......... -->   </div>   <!-- Конец навигации -->    </div><!-- Конец шапки сайта -->    <div id="wrapper"><!-- основной блок -->    <div id="colLeft"><!-- блок там где отображаются посты -->    <!-- Начало поста -->   <div class="postBox">   <!-- ......... -->   </div>   <!-- Начало поста -->    <div id="colRight"> <!-- блок боковой колонки -->   <!-- ......... -->   </div>    </div>   </div>    <div id="footerInner"><!-- Футер сайта -->   <!-- ......... -->   </div>    </body>  </html>

Как видите из кода что для каждого div задан свой класс. Например div с классом headerInner — это блок шапки сайта который описан в стилях CSS, соответственно div с классом wrapper — это основной блок в котором находятся 2 блока с записями и боковой колонкой которые имеют классы colLeft — левый блок с постами и colRight правая колонка. И конечно же я не забыл за блок футера под классом footerInner.

Таким не сложным образом у нас получилась сетка из которой далее выходит полноценный сайт. Или же шаблон такой как на моём блоге.

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

Теги HTML5

Сначала давайте рассмотрим теги, которые используются в первую очередь, другими словами основные:

<header> — данный тег задаёт верхнюю часть сайта, или шапку сайта. В него может входить меню, логотип, и другие элементы которые используются в верхней части сайта.

<section> — данный тег задаётся для важных разделов на сайте, например для таких как статьи, или же важные моменты, которые Вы хотите выделить.

<article> — обычно в этом теге содержаться разнообразные записи на сайте, новости, документы. Например посты на блоге.

<aside> — задаётся для боковых колонок на сайте (Сайтбара). Не важно где он будет находится слева или справа.

<footer> — в этот тег должен входить низ Вашего сайта (Футер)

<hgroup> — в данный тег входят групы заголовков сайтов, например <h2>.

<nav> — данный тег включает в себя всю навигацию на сайте (меню).

Хочу сказать, что эти все теги обязательно должны закрываться, например если это тег <article> он должен иметь закрывающий тег </article> и так далее.

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

<audio> — данный тег выводит аудио на сайте.

<canvas> — данный тег создаёт на странице поле в котором можно добавлять и применять к разным элементам разные эффекты с помощью скриптов.

<menu> — в этот тег должны входить список меню, например ul li.

<time> — сюда входят время и дата на сайте. Например на блогах дата размещения поста.

<video> — вставляет видео на страницу.

<wbr> — данный тег переносит слово на новую строку в браузере. Аналогичен старому тегу <br>.

Естественно изменились не только теги в HTML5, грубо говоря круто изменился doctype. Вот как он выглядит в HTML4:

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

А вот как он выглядит по новому:

<!doctype html>

Ну как Вам разница? 🙂 По моему существенная. Так же ещё проще стал тег <html>. Он был такой:

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

А стал такой:

<html lang=ru>

Всё, теперь мы знаем практически все изменения и можем смело переходить к вёрстке под HTML5.

Верстка (новая)

Перед тем как приступить к вёрстке нам между тегами <head> и </head> нужно вставить простой код для IE, так как этот «супер» браузер не понимает новых тегов:

<!--[if IE]>  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  <![endif]-->

Ещё обязательно нужно все новые теги сделать блочными. Просто добавьте этот код в любое место в Вашем файле CSS:

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

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

<!DOCTYPE html>  <html lang="ru">  <head>    <!-- ......... -->    </head>  <body>    <!-- Шапка сайта -->    <header id="headerInner">    <!-- Навигация -->    <nav class="bottomMenu">  <!-- ......... -->  </nav>  <!-- Конец навигации -->    </header><!-- Конец шапки сайта -->    <section id="wrapper"><!-- основной блок -->    <aside id="colLeft"><!-- блок там где отображаются посты -->  <!-- Начало поста -->  <article class="postBox">  <!-- ......... -->  </article>  <!-- Начало поста -->    <aside id="colRight"> <!-- блок боковой колонки -->  <!-- ......... -->  </aside>    </div>  </section>    <footer id="footerInner"><!-- Футер сайта -->  <!-- ......... -->  </footer>    </body>  </html>

Как видите, что я просто некоторые div поменял на новые теги, опять повторюсь тут ничего сложного нет, главное знать какой класс за какой участок на сайте отвечает.

Опять приведу пример. Возьмём шапку сайта. В старой вёрстке она обозначалась тегом div  с классом headerInner — <div id=»headerInner»>. Как я писал выше, что этот класс выводит блок шапки сайта. А сейчас, когда мы знаем какой тег отвечает за шапку сайта в HTML5 (<header>) можем смело его использовать вместо div  только с таким же классом. Таким образом у нас получилось следующее:

<header id="headerInner">

И не забываем поставить закрывающий тег </header>, а также удалить закрывающий div.

Идём дальше, а у нас главный блок контента. Значит это главный блок и его нужно окружить тегом <section>. В старой вёрстке этот главный блок выглядел так <div id=»wrapper»>, а в HTML5 будет выглядеть вот так <section id=»wrapper»>. И опять же не забудьте поставить закрывающий тег и удалить старый div.

Придерживайтесь такого же принципа и в других тегах на сайте. Таким образом я перевёл свой блог в HTML5. И был приятно удивлён тем, что это совсем не сложно.

Вывод

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

Опять рекомендую Вам переходить Вам на новую технологию.

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

beloweb.ru


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.