Стандартная страница html. Правильная структура HTML документа и код страницы
HTML это лингва-франка сети Интернет. Это простой и универсальный язык разметки, который позволяет интернет-издателям создавать сложные страницы с текстом и изображениями, которые доступны кому угодно в сети, независимо от их вида компьютера или используемого ими браузера.
Не смотря на то, что вы могли слышать, вам не нужно никакого специального ПО для создания HTML страницы; все, что вам нужно это текстовый процессор (такой как SimpleText, BBEdit, или Microsoft Word) и рабочие знания HTML. И к счастью для нас всех, базовый HTML предельно прост.
Все дело в тэгахHTML это просто серия тэгов, которые интегрированы в текстовый документ. Они очень похожи на сценическую постановку - тихо говорят браузеру, что делать и какие средства использовать.
Тэгами HTML обычно являются английские слова (такие как blockquote - выделить цитатой) или сокращения (например "p" значит paragraph - абзац), но они отличаются от обычного текста, так как они помещены в маленькие угловые скобки. Таким образом, тэг абзаца это
А выделения цитатой это .
Некоторые тэги определяют, как будет форматирована страница (например,
Означает начало нового абзаца), другие определяют, как будут показаны слова (тэг делает текст жирным). Некоторые дают информацию - как например заголовок - которая не отображается на самой странице.
Первое, что нужно помнить про тэги это то, что они всегда ходят парой. Каждый раз когда вы используете тэг, скажем - вы также должны закрыть его другим тэгом - в данном случае - . Обратите внимание на слэш - / - перед словом "blockquote"; таким образом отличают открывающий тэг от закрывающего.
Стандартная страница HTML начинается с тэга и заканчивается тэгом . В промежутке, файл имеет два раздела - верхний колонтитул и тело.
Верхний колонтитул - заключенный между тэгами и - содержит информацию о странице, которая не отобразится на самой странице, например заголовок. Тело - заключенное между тэгами и - это место, где происходят все события. Все, что появляется на странице, заключено внутри этих тэгов.
Стандартный документ HTMLИтак, давайте попробуем создать простую страничку для примера. Первым шагом, конечно, будет создание нового текстового документа (помните, что он должен быть сохранен в формате "Text Only" или "Plain Text", если вы используете текстовый редактор сложнее, чем, скажем, SimpleText) и назовите его "anything.html", где "anything" - любое слово
Ваш стандартный документ должен выглядеть примерно так:
Summer Summer Vacation
My summer vacation was sunny, silly, and far too short.
How many days till Christmas?
Итак, внутри тэгов у нас заголовок "Summer", который появится на верхней панели окна вашего браузера.
И как вы уже наверно догадались, это тэг для заголовка шапки (самого большого заголовка), а
Конечно же, задает начало нового абзаца. Каждый абзац закрыт соответствующим тэгом
.Вроде бы просто, а? Так оно и есть.
Особенно, если вы можете посмотреть, какой конкретно код HTML использовался для построения любой страницы, просто взглянув на исходный код. О, и не думайте, что вам понадобится собственная домашняя страница, чтобы практиковаться. Вы можете сохранять документы HTML на вашем жестком диске, а потом открыть их, используя пункт Open в контекстном меню File вашего браузера.
Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта. В примере 1 показан код простого документа, содержащего основные элементы.
Пример 1. Исходный код веб-страницы
Пример веб-страницы Заголовок
Первый абзац.
Второй абзац.
Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example2.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example2.html. В браузере откроется веб-страница, показанная на рис. 1.
Рис. 1. Результат примера в браузере
Элемент (жарг. доктайп) предназначен для указания типа текущего документа - DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях - современный HTML5 или устаревшие HTML4 и XHTML. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .
Поскольку мы в дальнейшем будем работать только с HTML5, то нам потребуется только один короткий и современный доктайп.
Мы упоминали, что имена элементов можно писать маленькими и большими буквами. К это правило тоже относится и его можно записывать по разному. Тем не менее, традиционно имя этого элемента пишется в верхнем регистре.
Открывающий тег определяет начало HTML-документа, внутри него хранится «голова» ( ) и «тело» документа ( ).
Содержимое этого раздела не показывается напрямую на странице, за исключением элемента . Внутри могут располагаться следующие элементы: , , , , или .
Элемент является универсальным и добавляет целый класс возможностей, в частности, с помощью метатега, как обобщённо называют этот элемент, можно изменить кодировку страницы, добавить ключевые слова, описание документа и многое другое, предназначенное для браузера или поисковых систем. В частности, чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.
Пример веб-страницы
Элемент определяет название веб-страницы. В браузере оно отображается на текущей вкладке (рис. 2).
Рис. 2. Название веб-страниц в браузере
Элемент является обязательным и должен непременно присутствовать в коде документа. Внутри разрешается писать только текст и никаких других элементов в быть не должно. Но допустимо добавлять разные текстовые символы, например, так: Adobe™ Photoshop® .
Закрывающий тег показывает, что «голова» документа завершена.
«Тело» документа предназначено для размещения элементов и содержимого веб-страницы.
Заголовок
HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность раздела, расположенного после заголовка. Так, элемент представляет собой наиболее важный заголовок первого уровня, а элемент служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Элементы ... относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него браузер добавляет пустое пространство.
Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он всё равно будет передаваться в документе, так что, посмотрев его исходный код, можно обнаружить скрытые заметки.
Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта. В примере 4.1 показан код простого документа, содержащего основные теги.
Пример 4.1. Исходный код веб-страницы
Пример веб-страницы Заголовок
Первый абзац.
Второй абзац.
Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O) . В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.
Рис. 4.1. Результат выполнения примера
Элемент предназначен для указания типа текущего документа - DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .
Существует несколько видов , они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.
| HTML 4.01 | |
| Строгий синтаксис HTML. | |
| Переходный синтаксис HTML. | |
| В HTML-документе применяются фреймы. | |
| HTML 5 | |
| В этой версии HTML только один доктайп. | |
| XHTML 1.0 | |
| Строгий синтаксис XHTML. | |
| Переходный синтаксис XHTML. | |
| Документ написан на XHTML и содержит фреймы. | |
| XHTML 1.1 | |
| Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам. | |
Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать предпочтительнее.
Например, в строгом HTML и XHTML непременно требуется наличие тега , а в переходном HTML его можно опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе.
В дальнейшем будем применять преимущественно строгий , кроме случаев, когда это оговаривается особо. Это позволит нам избегать типичных ошибок и приучит к написанию синтаксически правильного кода.
Часто можно встретить код HTML вообще без использования , веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте в начало документа.
Тег определяет начало HTML-файла, внутри него хранится заголовок ( ) и тело документа ( ).
Заголовок документа, как еще называют блок , может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера .
Тег является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.
Пример веб-страницы
Тег определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).
Рис. 4.2. Вид заголовка в браузере
Тег является обязательным и должен непременно присутствовать в коде документа.
Обязательно следует добавлять закрывающий тег , чтобы показать, что блок заголовка документа завершен.
Тело документа предназначено для размещения тегов и содержательной части веб-страницы.
Заголовок
HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег представляет собой наиболее важный заголовок первого уровня, а тег служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги ... относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки.
Если вы создаете шаблон с нуля, то надо от чего-то отталкиваться. Учитывая, что стандарт HTML5 «широко шагает по стране», я в этой статье приведу пример пустого шаблона HTML5.
В новом стандарте многое упростилось и теперь базовая часть выглядит так:
...
Новые теги HTML5В HTML5 для структуры кода введено несколько новых тегов: , , , , , которые заменяют в некоторых случаях привычный . Сделано это для поисковых роботов, чтобы они лучше распознавали код страниц и отделяли основной контент от вспомогательных элементов.
С использованием новых тегов пустой шаблон HTML5 может выглядеть так:
Заголовок страницы Меню навигации Боковая колонка SideBar Контент - основное содержимое страницы. Подвал сайта
Упрощение написания DOCTYPEВспомним как было раньше, в HTML4 тег DOCTYPE выглядел так:
Теперь же запись минимальна, проще, наверное некуда:
Похожие упрощения произошли и с остальными тегами, так что переход на стандарт HTML5 существенно облегчает написание.
Необязательные теги в HTML5Новый стандарт принес много послаблений верстальщикам. В частности, использование элементов HTML, HEAD и BODY уже не является обязательным для разметки HTML5. Если их нет, то браузер все равно считает, что они существуют. По сути из обязательных в HTML5 остался только .
Трактовка русского языка как основного языка HTML документаТег определяет язык документа. В сети регулярно возникают дискуссии о правильном его написании, в частности правильность написания «ru-RU». Я склоняюсь к варианту, что «-RU» является избыточным, так как у русского языка нет диалектов и вариантов написания как у Английского языка (Британский и Американский). Суффикс RU уточняет, где говорят на русском языке. То есть если en-US означает «английский язык на котором говорят в США», то ru-RU означает «русский язык на котором говорят в России», что является излишним.
В прочем, ничего страшного не случится, если вы и дальше будете использовать вариант «ru-RU».
Зачастую веб-разработчики даже не подозревают о существовании определенных стандартов кодирования в HTML. Однако в период с 2000 по 2010 годы многие веб-разработчики перешли с HTML на XHTML. При этом XHTML вынудил разработчиков писать валидный и "хорошо сформированный" код. HTML5 же, когда дело доходит до валидации кода, допускает некоторую небрежность.
Тем не менее, единообразие по стилю облегчит другим понимание вашего HTML кода.
Возможно, когда-нибудь программам, вроде программ чтения XML данных, потребуется прочитать ваш HTML код. Таким образом, использование хорошо сформированного, близкого к XHTML синтаксиса будет вполне разумным подходом.
Всегда следите, чтобы ваш код был аккуратным, чистым и хорошо сформированным.
Используйте корректный тип документаНа первой строке всегда декларируйте тип документа:
Если вы хотите соблюдать последовательность с написанием тегов в нижнем регистре, то вы можете использовать следующее определение типа документа:
Имена элементов пишите маленькими буквами
HTML5 допускает одновременное использование в именах элементов больших и маленьких букв. Однако, лучше всегда использовать только маленькие буквы. Это объясняется следующими соображениями:
- Смешение больших и маленьких букв в именах тегов считается плохой практикой
Это параграф текста.
Очень плохо:
Это параграф текста.
Это параграф текста.
Закрывайте все HTML элементыВ HTML5 вы не обязаны закрывать все элементы (например, элемент
Это параграф текста.
Это параграф текста.
Это параграф текста.
Это параграф текста.
Закрывайте пустые HTML элементыВ HTML5 закрывать или нет пустые элементы зависит от желания веб-разработчика.
Допустимо:
Также допустимо:
Тем не менее, закрывающая косая черта (/) ОБЯЗАТЕЛЬНА в XHTML и XML.
Если ожидается, что к вашей веб-странице будут обращаться XML приложения, то в пустых HTML элементах лучше использовать закрывающую косую черту!
В именах атрибутов используйте маленькие буквыВ HTML5 при написании имен атрибутов можно смешивать большие и маленькие буквы.
- Смешение больших и маленьких букв в именах атрибутов считается плохой практикой
- Разработчики обычно используют маленькие буквы (как в XHTML)
- Написание в нижнем регистре выглядит чище
- В нижнем регистре легче писать
Заключайте значения атрибутов в кавычки
HTML5 допускает написание значений атрибутов без кавычек. Однако мы рекомендуем всегда заключать значения атрибутов в кавычки, потому что
- Смешение больших и маленьких букв в значениях считается плохой практикой
- Значения в кавычках легче читать
- Вы ДОЛЖНЫ заключать в кавычки, если в значениях есть пробелы
Очень плохо:
Это не будет работать, потому что в значении есть пробелы
| A | Description of A |
| B | Description of B |
По стандарту HTML5 тег и тег могут не использоваться.
Следующий код согласно стандарту HTML5 считается валидным:
Заголовок страницы Это текстовый заголовок
Это абзац текста.
Элемент - это корень документа. Это рекомендованное место для определения языка страницы:
Декларация языка страницы важна как для специализированных приложений (например, программ чтения с экрана), так и для поисковых систем.
Кроме этого, если не написать тег или тег , то это может сломать структуру DOM и XML приложения. А пропуск тега к тому же может привести к ошибками в старых браузерах (IE9).
Пропускать ли тег ?Согласно стандарту HTML5 тег может не использоваться.
По умолчанию, браузеры будут добавлять все элементы, расположенные перед открывающем тегом внутрь созданного ими элемента .
Вы можете снизить сложность структуры HTML, пропустив тег :
Заголовок страницы Текстовый заголовок
Это текстовый абзац.
МетаданныеЭлемент является обязательным в HTML5. Заголовок страницы должен быть наполнен значением:
Чтобы обеспечить правильную интерпретацию и корректное индексирование страницы поисковыми системами, определение языка и кодировки символов страницы необходимо декларировать как можно раньше:
Стандарты синтаксиса и кодирования в HTML5
Установка вьюпорта (окна просмотра)"Вьюпорт" - это видимая пользователю область веб-страницы. Эта область разница от устройства к устройству и на мобильных телефонах будет меньше, чем на экране компьютера.
В HTML5 был введен метод, позволяющий веб-дизайнерам контролировать вьюпорт при помощи тега .
Следует всегда использовать элемент управления вьюпортом в следующей форме на всех веб-страницах:
Данный элемент управления вьюпортом предоставляет браузеру инструкцию, как контролировать размеры и масштабирование страницы.
Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана текущего устройства (которая будет разной в зависимости от используемого устройства).
Часть initial-scale=1.0 устанавливает начальный уровень увеличения, когда страница впервые загружается браузером.
Ниже вы можете увидеть пример веб-страницы на экране смартфона с установленным мета тегом вьюпорта и без него:
Страница с мета тегом вьюпорта
HTML комментарииКороткий комментарий должен писаться на одной строке: