Html lang ru

Если вы создаете шаблон с нуля, то надо от чего-то отталкиваться. Учитывая, что стандарт HTML5 «широко шагает по стране», я в этой статье приведу пример пустого шаблона HTML5.

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

  <!doctype html>  <html lang="ru">  <head>   <meta charset="utf-8" />   <title></title>   <link rel="stylesheet" href="style.css" />  </head>  <body>   ...   </body>  </html>  

Новые теги HTML5

В HTML5 для структуры кода введено несколько новых тегов: <article>, <aside>, <footer>, <header>, <nav>, которые заменяют в некоторых случаях привычный <div>. Сделано это для поисковых роботов, чтобы они лучше распознавали код страниц и отделяли основной контент от вспомогательных элементов.

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

  <!doctype html>  <html lang="ru">  <head>   <meta charset="utf-8" />   <title></title>   <link rel="stylesheet" href="style.css" />  </head>  <body>    <header>Заголовок страницы</header>    <nav>Меню навигации</nav>    <aside>Боковая колонка SideBar</aside>    <article>   Контент - основное содержимое страницы.  </article>    <footer>Подвал сайта</footer>     </body>  </html>  

Упрощение написания DOCTYPE

Вспомним как было раньше, в HTML4 тег DOCTYPE выглядел так:

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

Теперь же запись минимальна, проще, наверное некуда :

  <!doctype html>  

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

Необязательные теги в HTML5

Новый стандарт принес много послаблений верстальщикам. В частности, использование элементов HTML, HEAD и BODY уже не является обязательным для разметки HTML5. Если их нет, то браузер все равно считает, что они существуют. По сути из обязательных в HTML5 остался только <!doctype html>.

Трактовка русского языка как основного языка HTML документа

Тег <html lang=»ru»> определяет язык документа. В сети регулярно возникают дискуссии о правильном его написании, в частности правильность написания «ru-RU». Я склоняюсь к варианту, что «-RU» является избыточным, так как у русского языка нет диалектов и вариантов написания как у Английского языка (Британский и Американский). Суффикс RU уточняет, где говорят на русском языке. То есть если en-US означает «английский язык на котором говорят в США», то ru-RU означает «русский язык на котором говорят в России», что является излишним.

В прочем, ничего страшного не случится, если вы и дальше будете использовать вариант «ru-RU».

moonback.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

RFC 3066 содержит сведения о допустимых значениях (выделение и ссылки добавлены):

Все двухбуквенные subtags интерпретируются как коды ISO 3166 alpha-2 от [ISO 3166], или впоследствии присвоенный службой ISO 3166 агентства или руководящих органов по стандартизации, обозначая область, в которую этот языковой вариант относится.

Я интерпретирую это как значение любого действительного (согласно ISO 3166) 2-буквенный код действителен как subtag. В RFC говорится:

Тэги со вторыми субтагами от 3 до 8 букв могут быть зарегистрированы с помощью IANA, согласно правилам главы 5 настоящего документа.

Кстати, это выглядит как опечатка, поскольку глава 3, похоже, относится к процессу регистрации, а не к главе 5.

Быстрый поиск реестра IANA показывает очень длинный список всех доступных языковых subtags. Вот один пример из списка (который будет использоваться как en-scouse):

Тип: вариант

Subtag: scouse

Описание: Scouse

Добавлено: 2006-09-18

Префикс: ru

Комментарии: Английский Ливерпульский диалект, известный как «Scouse»

Доступны всевозможные subtags; быстрый свиток уже показал fr-1694acad (французский 17-й век).


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

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

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

qaru.site

Синтаксис

Описание

Глобальный атрибут / параметр lang (от англ. «language» ‒ «язык») задаёт базовый язык содержимого элемента и текстовых значений атрибутов элемента. В качестве задаваемого значения должно выступать значение допустимое BCP 47 документом. В случае если полученное значение является нестандартной меткой языка, то оно должно рассматриваться браузером как неизвестный язык, имеющий данную метку.

Так же предусмотрено указание через тире («-») субверсии языка (версия языка: «en-us», «zh-gan»; набор символов для написания: «sr-Latn» ‒ сербский-латиница).

Данный параметр может выполнять следующие функции:

  • Оказание помощи поисковым системам;
  • Оказание помощи синтезаторам речи (выбор соответствующего произношения);
  • Помощь web-браузеру в выборе вариантов символов для высококачественной полиграфии (выбор соответствующих шрифтов, набора кавычек);
  • Помощь web-браузеру в принятии решений о переносах, лигатурах, и интервалах;
  • Помощь web-браузеру в выборе соответствующих пользовательских интерфейсов управления формой (выбор даты);
  • Содействие в проверке орфографии и грамматики (выбор соответствующего словаря).

Примечание

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


Поддержка браузерами


Спецификация


Значения


programmerbook.ru

Привет Хабр!

image Изначально хотел назвать статью «HTML по ГОСТ`у», но потом выяснилось что у большинства программистов не было предмета «Метрология и стандартизация» и о «стандартизации», «сертификации», «унификации» не все слышали.

В i-Free я много занимаюсь разработкой веб-приложений. А поскольку их много, они разные и работают в разных условиях, то само собой приходится задумываться о стандартизации. Есть такой проект «Пуленепробиваемый HTML5» (http://html5boilerplate.com/), в котором разработчики решили создать идеальный шаблон странички. Он мне очень нравился, и все свои проекты я начинал именно с него. Но, исправляя баг за багом, делая все новые и новые приложения, я пришел к выводу, что многого в нем не хватает. В этой статье я хотел бы рассказать о том, что обычно пропускают при написание страничек и веб-приложений и показать, чем и зачем я прокачал свой шаблон пустой странички.

Указатель на язык:

<html lang="ru-RU"> 

Это идет в паре с hyphens в CSS. Таким образом браузер может более корректно расставлять переносы.

p {  -moz-hyphens: auto;  -webkit-hyphens: auto;  -ms-hyphens: auto;  hyphens: auto; } 

Убираем возможность масштабировать:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"/> 

Это особенно полезно на телефонах с операционкой Bada, которые могут дождаться загрузки страницы и просто умножить разрешение на 2. Также мы отключаем zoom, т.к. в приложениях обычно никакого зума нет.

Ещё один тег для вышеописанной проблемы:

<meta name="HandheldFriendly" content="True"/> 

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

Запрещаем кэшировать документ:

<meta http-equiv="Cache-Control" content="no-cache"/> 

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

Mobile Internet Explorer позволяет принудительно активировать технологию ClearType для сглаживания шрифтов:

<meta http-equiv="cleartype" content="on"/> 

Не забываем добавить картинки для Apple устройств:

<link rel="apple-touch-startup-image" href="images/startup.png"> <link rel="apple-touch-icon" href="images/touch-icon-iphone.png"/> <link rel="apple-touch-icon" sizes="72x72" href="images/touch-icon-ipad.png"/> <link rel="apple-touch-icon" sizes="114x114" href="images/touch-icon-iphone-retina.png"/> <link rel="apple-touch-icon" sizes="144x144" href="images/touch-icon-ipad-retina.png"/> 

Этот мета-тег необходим для того, чтобы приложение открылось в полноэкранном режиме:

<meta name="apple-mobile-web-app-capable" content="yes"/> 

Ну и корректируем верхнюю полоску в iPhone:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> 

Ну и Windows 8 берет пример с iPhone. Дополнительная разметка для описания:

<meta name="application-name" content="Title"/>  <meta name="msapplication-tooltip" content="Description"/> 

Дополнительная разметка для оформления ссылки на приложение в меню:

<meta name="msapplication-TileColor" content="#990000"/> <meta name="msapplication-TileImage" content="images/custom_icon_144.png"/> <meta name="msapplication-square70x70logo" content="images/custom_icon_70.png"/> <meta name="msapplication-square150x150logo" content="images/custom_icon_150.png"/> <meta name="msapplication-square310x310logo" content="images/custom_icon_310.png"/> <meta name="msapplication-wide310x150logo" content="images/custom_icon_310x150.png"/> 

Дополнительные настройки для окна. Видимо, это такая отсылка к HTA, который не пошел:

<meta name="msapplication-window" content="width=400;height=300"/> 

Просим IE переключиться в последний режим:

<meta http-equiv="X-UA-Compatible" content="IE=edge"/> 

Отключаем панель работы с изображениями:

<meta http-equiv="imagetoolbar" content="no"/> 

Просим IE оформлять все в классическом стиле без учета текущей темы операционки:

<meta http-equiv="msthemecompatible" content="no"/> 

Запрещаем распознавать номера телефонов и адреса, а так-же выделять их:

<meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content="address=no"/> 

Для обычной веб-странички лучше вставить набор CSS стилей, описывающих телефон и адрес, а не блокировать их распознание.

Полный набор для SEO:

<title></title> <meta name="description" content=""/> <meta name="keywords" content=""/> <meta name="author" content=""/> <meta name="copyright" content="(c)">  <meta http-equiv="Reply-to" content="mail@yandex.ru"> 

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

Обязательно скидываем стили по умолчанию:

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

Свой reset я немного изменил. Он задавал background для TD тега, и это вызвало багу в старом IE, если мы заливаем всю строку через тег TR

Добавляем набор своих стандартных стилей:

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

А в них учтены ещё некоторые нюансы. Например убираем выделение в CSS:

body {  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);  -webkit-focus-ring-color: rgba(255, 255, 255, 0);  outline: none; 	  -moz-user-select: none;  -o-user-select: none;  -khtml-user-select: none;  -webkit-user-select: none;  user-select: none;  resize: none;   -webkit-text-size-adjust: none; } 

Но оставляем его для полей ввода текста:

input, textarea {  -moz-user-select: text;  -o-user-select: text;  -khtml-user-select: text;  -webkit-user-select: text;  user-select: text;  resize: none; } 

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

Ставить border картинкам обычно не забывают, т.к. он в reset.css, а вот vertical-align пропускают:

img {  border: 0;  vertical-align: top; } 

Ещё у меня хранится стандартный класс анимации, чтобы «мозолить глаза»:

.animation {  -webkit-transition: background-color 0.7s, color 1s, opacity 0.5s;  -ms-transition: background-color 0.7s, color 1s, opacity 0.5s;  -o-transition: background-color 0.7s, color 1s, opacity 0.5s;  -moz-transition: background-color 0.7s, color 1s, opacity 0.5s;  transition: background-color 0.7s, color 1s, opacity 0.5s; } 

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

А ещё в этих стилях я раскрашиваю плашку которая всегда идет вверху HTML шаблона:

<noscript class="no_script_message">  У вас отключен JavaScript. Сайт может отображаться некорректно. Рекомендуем включить JavaScript. </noscript> 

Ну и конечно, ради любимого IE в самом начале добавим:

<!-- saved from url=(0014)about:internet --> 

Этой строкой просим его не показывать нам табличку про то, что скрипты опасны и т.д. и т.п., а просто брать и включать JS

Ну и стили для портретной и альбомной ориентации:

<link href="css/portrait.css" rel="stylesheet" media="all and (orientation:portrait)"/> <link href="css/landscape.css" rel="stylesheet" media="all and (orientation:landscape)"/> 

Если будете переводить в HTA, есть такая вставка:

<!-- Option for HTA file 	<hta:application id=ifree.game.sudoku 		applicationName=Sudoku 		showInTaskBar=yes 		caption=yes 		innerBorder=yes 		selection=no 		icon=images/favicon.ico 		sysMenu=yes 		windowState=normal 		scroll=no 		resize=no 		navigable=no 		contextmenu=yes /> 		--> 

Тут указаны параметры для HTA файла (например, наличие системного меню, отсутствие скролла и т.п.). А также добавлен JS файл (по умолчанию он закомментирован):

<script src="js/hta.js"></script> 

Его задача сжать окно и отцентрировать его по середине экрана (если, конечно, это возможно).

Ну а с этим наверное уже знакомы?

<script src="js/html5.js"></script> 

Бежим по новым тегам HTML5 и пересоздаем их для старых IE.

Ну и прокачиваем Android

<script src="js/android.js"></script> 

Например, убираем у них адресную строку. Для этого:

  • Берем высоту страницы и увеличиваем её на два
  • Скроллим вверх до 1px сверху
  • Возвращаем высоту в исходное положение

Таким хаком на Android`ах исчезает адресная строка. А ещё можно добить тач, об этом говорил Иван Чашкин на DUMP-2014 (а ещё тут есть статья http://habrahabr.ru/company/mailru/blog/165213/ от Mail.ru). Суть в том, что, если переопределить все тач события и сделать им stopPropagation, то Android`ы перестанут тормозить с отправкой событий.

Просим закэшировать приложение для offline работы, если это возможно:

<html manifest="default.appcache"> 

Там выше ещё про переносы и язык было, поэтому полный тег такой:

<html manifest="default.appcache" lang="ru-RU"> 

Как выглядит input обычного человека:

<input type="text" id="name"> 

Как выглядит input курильщика:

<input type="text" autocomplete="on" spellcheck="true" autocapitalize="off" autocorrect="off" autofocus required  maxlength="30" pattern="^[А-Яа-яs-_0-9]+$" class="input_name" id="input_name" placeholder="Иван Иванович"  x-webkit-speech /> 

Атрибуты элемента:

  • placeholder — подсказка для ввода
  • maxlength — ограничение количества вводимых символов
  • spellcheck — проверка правописания
  • autocorrect — автоматическое корректировка написанного
  • autocapitalize — автоматическое преобразование регистра
  • x-webkit-speech — голосовой ввод

Требования к элементу:

  • Тип элемента должен соответствовать типу вводимых данных. Если это поле ввода пароля, оно должно иметь тип password. Вводимые символы при этом должны заменяться звездочками.
  • Элемент должен сопровождаться примером того, какие данные требуется ввести.
  • Элемент должен подсказывать пользователю данные для ввода на лету.
  • Элемент должен проверять орфографические ошибки.
  • Максимальная длина ввода должна быть ограничена.
  • Если это поле ввода нового пароля, необходимо добавить кнопку «авто-генерация пароля». При нажатие на которую генерируется случайный пароль.
  • Элемент должен содержать атрибут pattern, указывающий на ожидаемый тип данных.
  • При работающем JavaScript, введенные пользователем данные обязательно должны проверяться на лету. Если данные не прошли проверку — необходимо немедленно уведомить об этом пользователя.

Рекомендации:

  • Если это поле ввода пароля, необходимо добавить кнопку «посмотреть пароль» (обычно оформляется в виде «глаза»), при нажатие на которую тип поля становится text, и пользователь может проверить введенные данные.
  • Если есть возможность авто-заполнения поля, её необходимо обязательно использовать. Либо поместить около элемента кнопку, при нажатие на которую будет срабатывать авто-заполнение.
  • В зависимости от ситуации, иногда возможно использовать «автокоррекцию» и на лету удалять запрещенные символы. Опасность такой ситуации заключается в том, что пользователь может не заметить коррекцию и отправить данные, которые отличаются от того, что он хотел ввести.

Половину этих свойств можно переносить и на textarea. Тут и авто-дополнение, и проверка правописания, и голосовой ввод, подсказка, ограничение длины и т.д. Но есть ещё ряд дополнительных требований:

  • Изменение размера поля должно быть запрещено (resize: none в CSS)
  • Если это ввод некоего сообщения, необходимо информировать пользователя о том, сколько символов ему ещё можно ввести.

Замечания по верстке:

  • Идеальная верстка должна выживать где-то в районе IE6. Стараемся по минимуму использовать inline-block. Заранее смотрим, что будет если он станет inline или block элементом.
  • Position — это опасно. Желательно ничего никуда не позиционировать.
  • Float — тоже к добру не приведет. Желательно вообще про него забыть.
  • В дизайне надо сразу предусмотреть возможность того, что тот или иной фрагмент может отвалиться. В этом плане идеален стиль Metro. Как-то даже пришла в голову мысль, что Microsoft специально сделала такой стиль, в котором нет ни круглых углов, ни градиентов, ни теней. То есть ребята сразу отталкивались от своего браузера, чтобы никто не мог обвинить их в багах.

Progressive Enhancement и Graceful Degradation

Советую посмотреть доклад Сергея Горобцова из Яндекса про Progressive Enhancement и Graceful Degradation (http://tech.yandex.ru/education/shri/ekb-2013/talks/1500/) о том, как верстать так, чтобы было хорошо везде.

Что же ещё может понадобиться для стандартизации?

  • Расческа для CSS (http://csscomb.ru/online/) поможет всему принять единый вид.
  • Автопрефиксер Андрея Ситника поможет добить CSS-префиксы (http://habrahabr.ru/company/evilmartians/blog/176909/)
  • Вот такой скрипт (http://bakhirev.biz/StalinGrad/zip/build/generation_pictures.zip) поможет нагенерировать кучу картинок (требует установленного imagemagick)

Так же в своем шаблоне я сразу подключаю несколько готовых модулей типа замены стандартных alert`ов, добавление автопрокрутки сбоку (как на хабре или вконтакте) и т.п. Но это уже велосипеды, которые выходят за рамки статьи.

А вот этот стандартный велосипед может пригодиться. Стандартный footer по микроразметке:

<!-- SEO schema --> <footer itemscope itemtype="http://schema.org/LocalBusiness">  ООО «<span itemprop="name">Google</span>»  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">  <span itemprop="streetAddress">Ленина 1</span>  <span itemprop="addressLocality">Санкт-Петербург</span>,  <span itemprop="addressRegion">Ленинградская обл.</span>  <meta itemprop="addressCountry" content="RU"/>  </div>  Время работы менеджера-консультанта:  <time itemprop="openingHours" datetime="Mo, Tu, We, Th, Fr, Sa, Su 10:00-21:00">10:00 - 21:00 Ежедневно</time>  <span itemprop="telephone">206-555-1234</span>.  <span itemprop="email">info@wikimedia.org</span>.  <a href="http://www.google.com" itemprop="url">http://google.com</a>. </footer> 

С другой стороны, у всех поисковиков она есть в документации, но никто её не поддерживает. Я использую этот footer, т.к. мало ли, может в будущем начнут использовать.

Вот пожалуй и все. Тем кто осили — небольшой бонус:

image

В демке вы можете посмотреть все meta теги из статьи.

habr.com

Рассмотрим структуру HTML документа:

  • <!DOCTYPE html> — что же это за тег такой? Это версия HTML которая используется в данной странице. Подобным тегом принято начинать все HTML-документы. Это считается хорошим тоном. DOCTYPE указывает браузеру в какой версии HTML был написан документ, для того, что бы все браузеры (а их сейчас много) могли правильно обработать разметку и отобразить содержимое документа. Если этого не сделать, то браузер по умолчанию некорректно определит версию документа, в результате чего вся разметка может поехать и неправильно отображаться в разных браузерах. В данном случае DOCTYPE указывает на версию HTML5.
  • <HTML></HTML> — все содержимое страницы заключено между данными парными тегами, которые информируют браузер, что это HTML страница.
  • <head></head> -служебная секция (заголовок), которая используется для подключения внешних файлов, и установок отвечающих за вид, вывод и работу данной страницы. Содержимое ее, чаще всего, не отображается на странице, кроме тега title. Тег title – содержит заголовок страницы, который отображается во вкладке.
  • <body></body> — все что отображается на странице, пишется в теге body.

Для расширения функционала HTML в тегах добавляют специальную информацию, которая называется атрибутами. Так в строке:

charset="UTF-8" — атрибут. Атрибутов может быть много. Атрибуты пишутся через пробел. В данном случае, с помощью тега meta HTML странице указывается кодировка UTF-8. Т.е. браузеру указывается кодировка данного документа, для правильного отображения содержимого страницы.

Атрибуты используются для расширения функционала тегов и позволяют модифицировать как способы отображения тегов на странице, так и их поведение. Не все теги используются для вывода информации, есть теги которые используются только для программирования поведения страницы, например с помощью JavaScript.

Вопросы для самоконтроля

  1. Что такое гипертекст?
  2. В чем состоит необходимость использования HTML?
  3. Что такое кодировка страницы? Зачем она применяется? Где в браузере можно поменять кодировку?
  4. Какие виды атрибутов вам известны?
  5. Что такое теги? Чем они отличаются от атрибутов?
  6. Какие теги обязательно должна содержать HTML страница?

Текст урока разработан совместно с Каменщик М.

w3.org.ua

You May Also Like

About the Author: admind

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

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

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