Содержание

Использование HTML 5

HTML 5 (HyperText Markup Language, version 5) больше не является частью SGML, теперь это самостоятельный язык разметки.

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

Элементы, такие как <section>, <article>, <header> и <nav> разработаны для семантического обогащения содержимое html- страницы. Семантика HTML5 нужна для поисковых систем, которые ее должны будут использовать когда-нибудь:)

Правила записи элементов и их атрибутов

По большому счету, это правила записи элементов XML. Однако, XHTML документы также являются документами XML и подчинены тем же требованиям.

Введем ряд определений:

Элементы - одна из наиболее важных сущностей XHTML документа. С помощью элементов производится разбиение страницы на структурные блоки и выполняется визуальное оформление документа.

Рассмотрим ряд правил. которым вы должны следовать при записи тэгов и самих элементов.

В ранних версиях языка разметки HTML правила записи имен элементов несколько отличались. Например, не существовало принципиальной разницы между записью <BODY> и <body>. Браузеры до сих пор "понимают" устаревшую форму записи и не делают между ними различия. Однако, вы должны следовать требованиям современных стандартов, чтобы научиться создавать страницы не только привлекательно выглядящие в браузере, но и отвечающие современным представлениям о правильном оформлении XHTML документов.

В начальном тэге элемент может содержать один и более атрибутов: 

<имя_элемента атрибут="значение" ...>

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

...</имя_элемента>

Сразу за символом < должен следовать символ /, а за ним - имя элемента. В закрывающем тэге больше ничего не должно содержаться. Перечисление здесь атрибутов элемента будет грубой ошибкой! 

<img ... ></img>

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

<img ... />

Последовательность " />" закрывает элемент так, как обыкновенный закрывающий тэг. Причем, между именем тэга или значением последнего атрибута (если таковые имеются) и символом "/" должен следовать хотя бы один пробел!

Отсутствие пробела перед символом "/" не приведет к катастрофическим результатам при запуске страницы в браузере. Однако, при проверке документа HTML Validator выдает предупреждение об его отсутствии.

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

<имя_элемента атрибут="значение" атрибут="значение" ... >

При записи атрибута указывается пара имя="значение", причем значение атрибута обязательно заключается в одинарные (') или двойные (") кавычки. Между именем следующего атрибута и значением предыдущего обязательно должен следовать как минимум один пробел.

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

id - уникальный идентификатор элемента 
style - стиль элемента 
class - класс стиля в таблице стилей CSS 
title - всплывающая подсказка элемента 
lang - код языка, применяемый к элементу и его содержимому 
dir - задает направление размещения текста содержимого

DOCTYPE html head meta body

HTTP- заголовок(генерируемый Web сервером) является более предпочтительным, он перекрывает тег meta.

Линейные и блочные элементы

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

Для примера: тег абзаца "<p></p>" - блочный элемент, выделение текста жирным ("<b></b>") или курсивным ("<i></i>") начертанием - линейные элементы.

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

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

Элементы логического форматирования привносят в HTML код семантику. То есть, по самому названию элемента можно судить о сути, смысле выделяемого фрагмента. При этом, физуальный эффект разметки играет второстепенную роль и даже может отсутствовать.

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

К блочным элементам относятся <div>, <h1> и <p>.

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

Простой пример блочной разметки 

...
<body>
    <p>Первый абзац.</p>
    <p>И второй абзац.</p>
</body>
...

Любой сложный многоуровневый документ можно разбить на разделы. Раздел принято начинать заголовком. Это будет первый уровень разбиения. Каждый раздел, в свою очередь, можно поделить на более мелкие структурные единицы - подразделы (второй уровень) и так далее.

Атрибут style

Наиболее простым способом применения стилей CSS является использование атрибута style: 

<элемент style="правила стиля"> ...

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

<body>
    <h1>Обыкновенный заголовок 1го уровня</h1>
    <h1 style="font-size: 16pt; color: #660000;">
        Заголовок 1го уровня, использующий стили.
    </h1>
</body>

Тег form, тег label

Форма создаётся с помощью тега <form>. Формы обеспечивают получение данных от пользователя и передачу их на сервер, где они уже подвергаются анализу и обработке. Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега <input> или другим тегом допустимым в форме, а значение введено пользователем или установлено в поле формы по умолчанию. После нажатия пользователем кнопки Submit, происходит вызов обработчика формы, который получает введённую в форме информацию.

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

У тега form существует несколько необязательных атрибутов:

Во время обычного submit'а формы браузер сам кодирует значения полей и составляет тело GET/POST- запроса для посылки на сервер. При работе через Свойства и методы XMLHttpRequest, это нужно делать самим, в JavaScript- коде.
Пример PHP - загрузка файла на сервер.

События формы. Эти события напрямую связаны только с тем, что случается в форме и в ее элементах ввода. С помощью события отправки данных — submit отслеживается момент передачи данных из формы; с помощью события изменения — change отслеживается пользовательский ввод данных в элемент; а событие select возникает, когда был обновлен элемент <select>.

Атрибут tabindex определяет последовательность перехода между ссылками при нажатии на кнопку Tab.

Тег label устанавливает связь между определённой меткой, в качестве которой обычно выступает текст, и элементом формы (<input>, <select>, <textarea>). Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Кроме того, с помощью label можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.

Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега label. При втором способе элемент формы помещается внутрь контейнера label. 

<input id="идентификатор"><label for="идентификатор">Текст</label>
<label><input type="..."> Текст</label>
<label for="from">From</label>
<input type="text" id="from" name="from"/>

Тег input

Тег <input> позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: