Правила языка HTML. Базовая структура HTML страницы Описание структуры тега
Сегодня мы поговорим о семантике в HTML5. Я уже писал небольшой обзорный пост про . Рекомендую с ней предварительно ознакомиться, перед прочтением этой статьи. Сейчас мы разберемся с этим вопросом более подробно, о том как правильно и грамотно составлять семантическую структуру HTML5 документа.
В этой статье мы будем постепенно создавать html страницу, и оформлять ее семантическими HTML5 тегами.
Рисунок - Семантическая структура для HTML5 страницы.
DOCTYPE и meta теги в заголовке страницыНачнем со стандартного шаблона HTML5 документа, и добавим теги meta в head:
Заголовок страницы
Я добавил тег который отвечает за ключевые слова. И тег который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега . Title страницы должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.
Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные теги, то есть это блочные элементы. Но если не имеет семантической нагрузки, то header, nav, main и другие — уже нужно использовать только осмысленно.
Заголовок страницыШапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.
Site title
Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.
Site title
site slogan
Замечание по поводу тега H1
Следует заметить что в HTML5 тег H1 используется для указания заголовка контейнера в котором он находится (это может быть header, section, article и т.д.)
До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок H1! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи. H3 для под разделов и так далее.
Навигация на страницеОформление главной навигации по сайту должно заключаться в тег nav. Также следует помнить что хорошей практикой считается оформлять навигацию элементами списка.
- Home
- Portfolio
- Gallery
- Contacts
Основное содержимое страницы оформляется в тег main. Это может быть одна статья, или несколько превью статей если речь идет о странице блога с несколькими записями. Нельзя помещать сайдбар, хедер страницы, футер или главную навигацию в тег main!
...основной контент страницы...
Оформление статьиТег article — служит для обертки статей. В общем этот тег содержит в себе блок контента, который может быть вынут из контекста страницы, и использован отдельно в другом месте. Это может быть статья (полный тескт статьи или превью), пост на форуме, и т.п.
На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime="2015-09-30" или с указанием часов минут и секунд datetime="2015-09-30T15:25:55" . Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.
... Article title 30 Сентября Article sub-title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?
Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.
Сайдбар или колонка с виджетамиДля каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:
Widget title ... Последние записи ... Популярные комментарии ...
Тег sectionТег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента вне контекста самой страницы. Рекомендуется использовать теги ( – ) для обозначения темы секции.
В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег . Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section , наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section , но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»
Пример использования тега section в списке с перечислением городов:
An Event Apart Cities
Join us in these cities in 2010.
SeattleFollow the yellow brick road.
BostonThat"s Beantown to its friends.
MinneapolisIt"s so nice.
Accommodation not provided. Подвал сайта — FooterПодвал сайта оформляется тегом
© 2015 сайт Copyright
ЗаключениеДля проверки структуры страницы можно использовать инструмент HTML5 outliner . Он показывает структуру страницы блокам и заголовкам.
Семантика в HTML5 не ограничивается приведенными выше в статье тегами. Но используя приведенные примеры вы можете освежить свою разметку, и сделать сайт более дружелюбным к поисковым системам, что скажется на более высоком рейтинге сайта в поисковой выдаче.
В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org
Важное замечание по использованию HTML5 тегов. В спецификации не указаны жесткие правила по использованию семантических тегов, указаны лишь рекомендации п их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег использовать, лучше используйте div — чтобы не навредить и не нарушить структуру документа.
Статьи и материалы
По возможности поясняйте свой код, где это необходимо.Используйте комментарии, чтобы пояснить свой код: что он делает, за что отвечает, и почему используется выбранное решение.
(Этот пункт не обязателен, потому что нет смысла ожидать, что код всегда будет хорошо задокументирован. Полезность комментирования зависит от сложности проекта и может различаться для HTML и CSS кода.)
Задачи Отмечайте задачи для списка дел с помощью TODO .Отмечайте задачи с помощью ключевого слова TODO . не используйте другие часто встречающиеся форматы, такие как @@ .
Заключайте контакты (имя пользователя или список адресатов) в круглые скобки: TODO(контакт) .
Описывайте задачу после двоеточия, например: TODO: Задача .
Рекомендуется:
{# TODO(Ivan Ivanov): Разобраться с центровкой #}
Тест
Рекомендуется:
- Огурцы
- Помидоры
(Рекомендуется использовать HTML с типом контента text/html . Не используйте XHTML, так как application/xhtml+xml (англ.) , хуже поддерживается браузерами и ограничивает возможность оптимизации.)
Валидность HTML По возможности используйте валидный HTML.Используйте валидный HTML код, кроме случаев, когда использование не позволяет достичь размера файла, необходимого для нужного уровня производительности.
W3C HTML validator (англ.) чтобы проверить валидность кода.
Валидность - это важное и при этом измеряемое качество кода. Написание валидного HTML способствует изучению технических требований и ограничений и обеспечивает правильное использование HTML.
Не рекомендуется:
Проверка
Просто проверка
Рекомендуется:
Проверка
Просто проверка.
Используйте элементы (Иногда неверно называемые “тегами”) по назначению: заголовки для заголовков, p для абзацев, a для ссылок и т.д.
Это облегчает чтение, редактирование и поддержку кода.
Альтернатива для мультимедиа Всегда указывайте альтернативное содержимое для мультимедиа.Постарайтесь указать альтернативное содержимое для мультимедиа: например для картинок, видео или анимаций, заданных с помощью canvas . Для картинок это осмысленный альтернативный текст (alt ), а для видео и аудио расшифровки текста и подписи если это возможно.
Альтернативное содержимое может помочь людям с с ограниченными возможностями. Например человеку со слабым зрением сложно понять, что на картинке если для нее не задан @alt . Другим людям может быть тяжело понять о чем говорится в видео или аудио записи.
(Если для картинки alt избыточен, или она используется только в декоративных целях в местах, где нельзя использовать CSS, используйте пустой альтернативный текст alt="" )
Разделение ответственности Разделяйте структуру, оформление и поведение.Держите структуру (разметка), оформление (стили) и поведение (скрипты) раздельно и постарайтесь свести взаимодействие между ними к минимуму.
Убедитесь, что документы и шаблоны содержат только HTML, и что HTML служит только для задания структуры документа. Весь код, отвечающий за оформление, перенесите в файлы стилей, а код отвечающий за поведение - в скрипты.
Старайтесь сократить их пересечения к минимуму, включая в шаблоны минимальное количество файлов стилей и скриптов.
Отделение структуры от представления и поведения помогает облегчить поддержку кода. Изменение шаблонов и HTML-документов всегда занимает больше времени чем изменение файлов стилей или скриптов.
Не рекомендуется: HTML sucks HTML Отстой
Я об этом и раньше где-то читал, но теперь точно все ясно:
HTML - полная фигня!!1
Не могу поверить, что для того чтобы изменить оформление,
нужно каждый раз все переделывать заново.
Рекомендуется:
My first CSS-only redesign
Мой новый CSS дизайн
Я читал об этом и раньше, но наконец-то сделал сам: Использую принцип разделения ответственности и не пихаю оформление в HTML
Как круто!
Ссылки-мнемоники Не используйте ссылки-мнемоники.Единственное исключение из этого правила - служебные символы HTML (например < и & ) а так же вспомогательные и “невидимые” символы (например неразрывный пробел).
Необязательные теги Не используйте необязательные теги. (не обязательно)Для уменьшения размера файлов и лучшей читаемости кода можно опускать необязательные теги. В спецификации HTML5 (англ.) есть список необязательных тегов.
(Может потребоваться некоторое время для того, чтобы этот подход начал использоваться повсеместно, потому что это сильно отличается от того, чему обычно учат веб-разработчиков. С точки зрения, согласованности, и простоты кода лучше всего опускать все необязательные теги, а не некоторые из них).
Не рекомендуется:
Тратим байты - тратим деньги.
Рекомендуется:
Байты-деньги!
Так-то
Атрибут "type" Не указывайте атрибут type при подключении стилей и скриптов в документ.Не используйте атрибут type при подключении стилей (кроме вариантов когда используется что-то кроме CSS) и скриптов (кроме вариантов когда это не JavaScript).
Указывать атрибут type в данном случае не обязательно потому что HTML5 использует text/css (англ.) и text/javascript (англ.) по умолчанию. Это будет работать даже в старых браузерах.
Не рекомендуется:
Рекомендуется:
Не рекомендуется:
Рекомендуется:
Независимо от стилей заданных для элемента (CSS позволяет изменить поведение элемента с помощью свойства display ), переносите каждый блочный или табличный элемент на новую строку.
Также ставьте отступы для всех элементов вложенных в блочный или табличный элемент.
(Если у вас возникнут сложности из-за пробельных символов между списочными элементами, допускается поместить все li элементы в одну строку. Линту [утилита для проверки качества кода прим. пер.] рекомендуется в данном случае выдавать предупреждение вместо ошибки.
Рекомендуется:
- Маша
- Глаша
- Чебураша
Рекомендуется:
| $ 5.00 | $ 4.50 |
Кроме случаев, где необходим браузеро-зависимый код, или ошибок валидатора, используйте валидный CSS код.
Используйте такие инструменты как W3C CSS Валидатор (англ.) для проверки своего кода.
Валидность - это важное и при этом измеряемое качество кода. Написание валидного CSS помогает избавиться от избыточного кода и обеспечивает правильное использование таблиц стилей…
Идентификаторы и названия классов Используйте шаблонные или имеющие смысл имена классов и идентификаторы.Вместо использования шифров, или описания внешнего вида элемента, попробуйте в имени класса или идентификатора выразить смысл его создания, или дайте ему шаблонное имя…
Шаблонные имена - это просто вариант названия для элементов, у которых нет специального предназначения или которые не отличаются от своих братьев и сестер. Обычно они необходимы в качестве “Помощников.”
Использование функциональных или шаблонных имен уменьшает необходимость ненужных изменений в документа или шаблонах.
Не рекомендуется:
/* Не рекомендуется: не имеет смысла */
#yee-1901 {}
/* Не рекомендуется: описание внешнего вида */
.button-green {}
.clear {}
Рекомендуется:
/* Рекомендуется: точно и по делу */
#gallery {}
#login {}
.video {}
/* Рекомендуется: шаблонное имя */
.aux {}
.alt {}
Попробуйте сформулировать, что именно должен делать данный элемент, при этом будьте кратки насколько возможно.
Такое использование классов и идентификаторов вносит свой вклад в облегчение понимания и увеличение эффективности кода.
Селекторы типа Избегайте использование имен классов или идентификаторов с селекторами типа (тега) элемента.Кроме случаев когда это не обходимо (например с классами-помощниками), не используйте названия элементов с именами классов или идентификаторами.
Сокращенные формы записи свойств Используйте сокращенные формы записи свойств, где возможно.CSS предлагает множество различных сокращенных (англ.) форм записи (например font ), которые рекомендуется использовать везде где это возможно, даже если задается только одно из значений.
Использование сокращенной записи свойств полезно для большей эффективности и лучшего понимания кода.
Не рекомендуется:
/* Не рекомендуется */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
Рекомендуется:
/* Рекомендуется */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
Не указывайте единицы измерения для нулевых значений если на это нет причины.
0 в целой части дроби Не ставьте “0” в целой части дробных чисел.Не ставьте 0 в целой части в значениях между -1 и 1.
Кавычки в ссылках Не используйте кавычки в ссылкахНе используйте кавычки ("" , "" ) с url() .
Шестнадцатеричные названия цветов Используйте трехсимвольную шестнадцатеричную запись где это возможно.Трехсимвольная шестнадцатиричная запись для цветов короче и занимает меньше места.
Префиксы Предваряйте селекторы уникальными для текущего приложения префиксами. (не обязательно)В больших проектах, а так же в коде, который будет использоваться для других проектов или в других сайтах, используйте префиксы (в качестве пространств имен) для идентификаторов и имен классов. Используйте короткие уникальные названия с последующим дефисом.
Использование пространств имен позволяет предотвратить конфликты имен и может облегчить обслуживание сайта. Например при поиске и замене.
Разделители в классах и идентификаторах Разделяйте слова в идентификаторах и именах классов с помощью дефиса.Не используйте ничего, кроме дефиса, для соединения слов и сокращений в селекторах, чтобы повысить удобство чтения и легкость понимания кода.
Не рекомендуется:
/* Не рекомендуется: слова “demo” и “image” не разделены */
.demoimage {}
/* Не рекомендуется: используется подчеркивание вместо дефиса */
.error_status {}
Рекомендуется:
/* Рекомендуется */
#video-id {}
.ads-sample {}
Кажется заманчивым бороться с различиями в работе разных браузеров с помощью CSS-фильтров, хаков или прочих обходных путей. Все эти подходы могут быть рассмотрены лишь в качестве последнего средства, если вы хотите получить эффективную и легко поддерживаемую кодовую базу. Проще говоря, допущение хаков и определения браузера повредит проекту в долгосрочной перспективе, так как это означает, что проект идет по пути наименьшего сопротивления. Что облегчает использование хаков и позволяет использовать их все чаще и чаще, что в результате приведет к слишком частому их использованию.
Правила форматирования CSSУпорядочивание объявлений Сортируйте объявления по алфавиту.Задавайте объявления в алфавитном порядке, чтобы получить согласованный код, с которым легко работать.
При сортировке игнорируйте браузерные префиксы. При этом, если для одного свойства используются несколько браузерных префиксов, они также должны быть отсортированы (например -moz должен быть перед --webkit )
Отступы в блоках. Всегда ставьте отступы для содержимого блоков.Всегда ставьте отступы для любого блочного содержимого (англ.) , Например для правил внутри правил или объявлений, чтобы отобразить иерархию и облегчить понимание кода.
После объявлений Ставьте точку с запятой после каждого объявления.После каждого объявления ставьте точку с запятой для согласованности кода и облегчения добавления новых свойств.
После названий свойств Используйте пробелы после двоеточий в объявлениях.Всегда используйте один пробел после двоеточия (но не до) в объявлениях, для порядка в коде.
Отделение селектора и объявления Отделяйте селекторы и объявления переносом строки.Начинайте каждый селектор или объявление с новой строки.
Разделение правил Разделяйте правила переносом строки.Всегда ставьте перенос строки между правилами.
Мета правила CSSГруппировка правил Группируйте правила и обозначайте группы комментарием. (не обязательно)По возможности объединяйте правила в группы. Обозначайте группы комментариями и разделяйте переносом строки.
ЗаключениеБудьте последовательныЕсли вы редактируете код, потратьте несколько минут, чтобы разобраться в том, как он написан. Если математические операторы обособлены пробелами, делайте то же самое. Если комментарии окружены скобочками или черточками, сделайте то же со своими комментариями.
Идея этого руководства в том, чтобы создать общий словарь, который позволил бы разработчикам сконцентрироваться на том что они хотят выразить, а не на том, как .
Мы предлагаем единые правила оформления позволяющие писать код в одном стиле, но стиль кода, уже используемый в проекте, также важен.
Если ваш код будет сильно отличаться от существующего, это может сбить читающего с ритма и затруднить чтение. Постарайтесь этого избежать.
Примечание от переводчика Хочется еще отметить, что Google ориентируется в первую очередь на большие высоконагруженные проекты, где каждый байт дорог, поэтому стоит учитывать, что если они рекомендуют начинать каждый селектор с новой строки, или использовать пробелы вместо табов, то это в первую очередь подразумевает, что код будет обязательно минифицирован и сжат до использования на сайте.Спасибо всем кто дочитал до этого места.
Теги: Добавить метки
HTML - это язык разметки сайта. Многие считают его программированием, но это не так. В HTML нет никаких переменных, вычислений, массивов и других элементов, присутствующих в любом языке программирования.
Пользуясь HTML, разработчик может создать только внешний вид сайта. Важно понимать, что ни один сайт не существует без разметки. HTML является базой создания веб-страниц. Весь остальной функционал добавляется различными языками программирования.
Создание html-документаСоздать простую страничку сайта можно в любом редакторе. Подойдет даже "Блокнот". Для начинающего разработчика рекомендуется использовать другие редакторы, у которых есть функции автоподстановки и другие подсказки. Благодаря этому можно создавать готовые таблицы, ссылки, изображения и другие элементы. А в "Блокноте" каждую букву приходится писать вручную.
Как правило, "Блокнот" используют только в тех случаях, когда под рукой нет других инструментов. Сначала создается текстовый документ, а потом сохраняется в формате html. Все страницы сайта должны быть с расширением html.
Язык html является иерархичным. То есть существует специальная структура html-документа. Что это такое? Рассмотрим ниже для наглядности.
Структура html-документа. ПримерСтруктура всегда одна и та же. Если вы захотите поменять что-то, браузер не сможет это обработать. В результате вы не получите то, что задумали.
На рисунке выше указана структура любого html-файла. Первый пункт указывает на тип файла. Этот тег указывается один раз. Если вы будете использовать специальные редакторы, то вся структура создастся автоматически. Вам нужно будет подправить стандартные значения.
Структура html-документа - основные теги:
Из этих трех тегов состоит каркас всего сайта. Обратите внимание на рисунок. Все эти теги имеют закрывающийся тег со знаком “/”. Если вы пишете от руки, привыкайте ставить сразу оба тега - открывающий и закрывающий.
Выше было сказано, что страницы сайтов имеют расширение.html. То есть если вы создадите текстовый документ, но при этом напишете правильный код, браузер всё равно отобразит вам просто текст. Никакого преобразования кода не будет.
Раздел headНа рисунке под пунктом 3 указан раздел head. В этом разделе указывается служебная информация. Например, можно указать кодировку (пункт 4) и заголовок страницы (пункт 5).
Заголовок должен быть всегда. Без него ни один поисковик не сможет определить название контента (текста) на веб-странице. А это плохо для продвижения сайта. Более того, в браузере наверху не будет указан заголовок страницы. Это неудобство для пользователя.
Структура html-документа такова, что указывается только в разделе head. Если тег указать в разделе body или после него, то обработчик на него не обратит внимания.
Кроме этого, в разделе head указывается информация для подключения скриптов, файлов стилей, инструкции для поисковых систем или любые другие данные, которые пользователь не должен видеть, но они важны для браузера или программистов.
Подключение стилейСтруктура html-документа позволяет подключать стили различными способами. Более того, их можно писать индивидуально в каждом элементе. Но данный способ не рекомендуется, поскольку код становится слишком большим и неудобным.
Подключается файл следующим образом.
В атрибуте href указывается путь до файла. Если в пути будет ошибка, то стили не загрузятся. Также обязателен атрибут type, который указывает, что это файл css.
Другим вариантом является определение стилей прямо в разделе head.
Но этот вариант также не очень рекомендуется. Эти методы сильно отличаются тем, что файл css может быть одним для всего сайта, и все изменения в нем будут мгновенно применяться ко всем страницам. А если вы используете метод, который указан на рисунке выше, то вам придется вносить изменения во все существующие страницы сайта.
Если создаваемый класс будет использоваться только на одной странице, тогда этот вариант вам подходит.
Подключение скриптовСкрипты подключаются следующим образом.
Здесь обязательны два атрибута: type и src. В первом указываем, что это файл Javascript, а второй - где расположен файл. Если вы допустите опечатку, то ничего работать не будет.
Раздел bodyСтруктура html-документа такова, что размещать содержание, которое будет видно пользователю, нужно только в разделе body. Название тега говорит само за себя.
Здесь указывается весь основной код страницы, который может включать неограниченное число элементов. Но чем длиннее код, тем дольше он будет обрабатываться.
Рассмотрим самые основные теги, которые можно использовать в области body. Основных не так много. Все остальные вы будете узнавать по мере роста ваших знаний и практики.
Основные тегиСтруктура html-документа требует обязательного порядка написания элементов. Теги всегда должны по краям обрамляться скобками . Без этого браузер не поймет, что это тег. После открывающейся скобки всегда следует имя элемента (тега). Если вы допустите пробел между < и именем, то браузер посчитает это текстом.
Рассмотрим на примере тега изображения. Обратите внимание, что этот тег не закрывающийся, в отличие от ссылок, абзаца и многих других.
Порядок атрибутов не имеет значения. Но их написание (оформление) очень важно. Всегда сначала идет имя атрибута, потом знак равенства, затем в кавычках пишется значение атрибута. Значение может быть разным - цифровое или текстовое.
Атрибут src во всех тегах указывает путь файла, который нужно подгружать. Атрибут alt во всех элементах указывает короткое описание. В данном случае загружается фотография bird.jpg с описанием - фотография птицы.
Кроме этого, в можно было указать размеры, только ширину или высоту, заголовок, выравнивание, класс стиля или рамку.
Рассмотрим другие основные теги, которые указываются в разделе body.
Назначение |
|
Изображения |
|
Перенос текста на новую строку |
|
… | Жирный текст |
Перечеркнутый текст |
|
Подчеркнутый текст |
|
Начинающие разработчики не всегда сразу могут представить всё это умозрительно. Посмотрите несколько примеров структуры веб-страниц, и тогда вам точно станет понятно.
Здравствуйте, уважаемые читатели блога сайт. На современном этапе язык ХТМЛ служит для обеспечения корректного отображения контента () на всех страницах веб-ресурсов () в удобном для пользователей виде.
На блоге сайт для изучения HTML есть , предназначенный начинающим, так что вы без труда сможете постигнуть основы этого языка разметки, который, к слову, не является супер-пупер сложным и подвластен большинству тех, кто раньше вообще не сталкивался с ним и был далек от этой темы.
В сегодняшнем материале я планирую представить в основном общую информацию, которая, тем не менее, очень важна не только начинающим изучать HTML с нуля, но и более опытным юзерам. В частности, мы рассмотрим, из каких элементов состоит код языка разметки, какие из них являются обязательными и присутствуют в каждом документе, а также на каком официальном ресурсе можно найти абсолютно все действующие теги, служащие основой любого кода ХТМЛ.
HTML — это специальный язык разметки гипертекстаНачнем с того, что аббревиатура HTML расшифровывается как «HyperText Markup Language», что в переводе на русский означает «язык гипертекстовой разметки».
Он был создан основоположником интернета Тимом-Бернерсом Ли в конце 80-х — начале 90-х прошлого столетия. Этот язык разметки (подчеркиваю, разметки, а не программирования , как считают некоторые неопытные пользователи) изначально задумывался как средство обмена научной и технической информации между специалистами. Именно с помощью HTML любое содержание должно было воспроизводится без искажений на каждом устройстве.
Значение языка гипертекстовой разметки многократно возросло с появлением первых браузеров (), или, по-другому, веб-обозревателей. Они позволяют не только найти и получить нужную страницу (документ), но и интерпретируют полученный ХТМЛ код в понятный пользователям глобальной сети вид.
Кстати, именно появление браузеров вкупе с развитием ХТМЛ можно считать зарождением новой эры, когда интернет начал принимать современные очертания.
В 1994 году по инициативе того же Тима-Бернерса Ли основана организация W3C , которая была призвана разработать единые стандарты для производителей программ и оборудования. Это было начальным этапом по наведению порядка в Мировой Паутине, хотя не все складывалось гладко (но без этого шага неминуемо последовал бы хаос в полном смысле этого слова). В рамках этих мероприятий была разработана 2 версия языка разметки гипертекста.
В этом же году получил полноправную "путевку в жизнь" браузер Mosaic, ставший прародителем Netscape Navigator (который в свою очередь впоследствии был преобразован в ).
В 1995 году по инициативе корпорации W3C опубликована очередная версия HTML 3, которая уже поддерживала .
Надо сказать, что разработчики , появившегося в том же 1995 в качестве детища компании Microsoft и поставлявшегося в составе самой популярной в мире операционной системы Windows, начали внедрять свои стандарты, которые коснулись и HTML.
Появился некоторый дисбаланс, поскольку одни разработчики вновь появлявшихся веб-браузеров (например, ) следовали рекомендациям Всемирного Консорциума W3C касательно языка ХТМЛ, а другие использовали стандартизацию по лекалам компании Майкрософт, которая была внедрена в Интернет Эксплорер.
В результате страницы сайтов отображались по-разному в различных браузерах. Это негативным образом коснулось как простых пользователей, так и вебмастеров, которые вынуждены были прибегать к различным ухищрениям для того, чтобы добиться высокой степени (идентичного отображения документов в разных браузерах).
Такая ситуация сложилась в том числе потому, что работа по внедрению единого стандарта шла в W3C крайне медленно и отставала от развития технологий, используемых в глобальной сети.
По этой причине многие необходимые аспекты не были к тому времени до конца учтены. Чтобы не допустить окончательно неразберихи, в!997 году Консорциум сделал стремительный рывок, представив в начале года версию HTML 3.2, а уже в конце года — и 4.0, которая оказалась принципиально новой, в ней многие элементы были отменены, поскольку безнадежно устарели.
А в 1999 году миру явился HTML 4.01 , созданный на базе четвертой версии и безальтернативно просуществовавший долгое время. Это стало большим успехом Консорциума, потому что к этому времени подавляющее большинство популярных браузеров было адаптировано под этот стандарт.
Исключение долгое время составлял лишь Explorer, разработчики которого явно не торопились полностью подключиться к единой стандартизации. Главной причиной была сила популярности ОС Виндовс (напомню, этот обозреватель по умолчанию является ее частью), соответственно и доля IE первое время оставалась весьма значительной в мире.
Однако, время расставило все по своим местам. Бурное развитие конкурентов (Мозилы, Оперы, а, главное, ) серьезно пошатнуло позиции Эксплорера, а потому владельцы Microsoft вынуждены были предпринять определенные шаги.
Одним из этих шагов стал постепенный переход к Международным стандартам, в результате чего уже 9 версия IE была практически полностью адаптирована к ним. Таким образом, возросшая активность организации W3C позволила сохранить стабильность и порядок во многих аспектах, что позволило ей завоевать серьезный авторитет среди крупнейших компаний компьютерной и интернет индустрии. Все ожидали следующего этапа, и он настал.
Долгие годы версия ХТМЛ 4.01 успешно выполняла поставленную задачу. Но жизнь двигается вперед, инфотехнологии активно развиваются, поэтому в один прекрасный момент возникла потребность внедрить в язык HTML отвечающие современным требованиям рекомендации.
В результате в 2014 году появилось сообщение об официальной рекомендации новой версии HTML5 , что означало полную готовность стандарта к широкому применению.
Более того, в 2016 и 2017 году соответственно со стороны Международного Консорциума окончательные рекомендации получили модификации 5.1 и 5.2, а на данном этапе уже ведутся работы по внедрению версии HTML 5.3.
Полноправным посредником этой операции как раз и служит приложение, именуемое браузером. Необходимо отметить, что каждая страничка любого сайта (по-другому документ) в интернете имеет свой уникальный , включающий , предназначенный для передачи гипертекста, а также путь до объекта, указывающий на его местоположение:
Http://site.ru/category1/article2
Поскольку гипертекст напрямую связан с протоколом HTTP и, соответственно, с языком HTML, для лучшего понимания всей темы следует уяснить и его значение.
Общая структура HTML страницы и основные тэгиИтак, абсолютно любой документ в интернете предстает перед глазами юзера в окончательном, готовом для изучения, виде. Однако, как мы выяснили выше, браузер получает от сервера его содержание в формате HTML, которое выглядит примерно так:
Если взглянуть на код любого документа, то можно выделить две составляющие:
- контент в "чистом" виде, то есть, содержание, которое получает пользователь;
- элементы разметки (команды), каждый из которых больше известен под наименованием «тег» или «тэг» (англоязычный вариант — «tag»)
С помощью тэгов браузер получает команды о том, какие элементы будут располагаться на веб страничке. Однако, каждый из этих элементов обладает своими характеристиками и свойствами. Чтобы учесть этот аспект, в языке разметки гипертекста существует такое понятие как , принимающий то или иное значение (параметр). Тогда в общем случае синтаксис открывающего тега (либо одиночного) можно представить в таком виде:
Это может избавить вас от необходимости полностью вручную составлять HTML код всех страниц, ведь одной из функциональных особенностей любой ЦМС является возможность генерировать странички с разметкой автоматически "на лету". Тем более, что для написания базового контента, например, в админ панель WP встроен .
Однако, при доработке и редактировании сайта (а без этого невозможно обойтись) вам может понадобиться вставить в с помощью HTML-кода дополнительно те или иные формы, кнопки, логотипы и т.д. Вот тут-то и пригодится знание тегов и их атрибутов.
Важность HTML5, все действующие теги и атрибутыВ статье я уже обмолвился, что последнее обновление HTML 4.01 вышло в далеком уже 1999 году. Однако, эта версия оказалась настолько удачной, что просуществовала аж целых 15 лет, что кажется невероятным, если учесть бурное развитие инфотехнологий.
Но все же с тех далеких пор интернет сильно изменился. Ускорение глобализации, рост числа пользователей планшетов, смартфонов и других мобильных устройств продиктовали насущную необходимость внесения весьма существенных изменений и дополнений, поэтому начиная с 2014 года официальной действующей версией является HTML5.
Для вебмастеров очень важным является понимание того, что при создании новых сайтов уже нужно использовать пятую версию , так как это сулит немалые преимущества. Но заслуга Международного Консорциума W3C заключается в том, что новый вариант разметки создавался очень взвешенно, в нем осталось все лучшее, что было присуще прежней редакции.
Более того, HTML4 до сих пор поддерживается, в том числе популярными браузерами, а потому вебмастерам, имеющим давно действующие проекты, заточенные под четвертую версию, можно осуществить плавный и максимально безболезненный перевод своих сайтов на HTML5. Почему же в принципе важно делать подготовительные шаги к такому переходу уже сейчас?
Дело в том, что в отличие от всех предыдущих версий, которые создавались на базе метаязыка SGML, ХТМЛ 5 разработан в связке с DOM (Document Object Modul) , являющимся по своей сути универсальным программным интерфейсом, дающим возможность приложениям получать доступ к содержанию документов с гипертекстовой разметкой.
Это дает право считать HTML5 не продолжением предшествующих версий, а принципиально новой платформой, использующей программное обеспечение для создания видео, аудио, графики, а также многих других полезных вещей. Такие вот дела.
Единственная проблема, которая препятствует пока полновластному и повсеместному господству пятой версии ХТМЛ — это то, что, хотя последние модификации популярных браузеров и поддерживают большинство тегов и атрибутов HTML5, все же многие пользователи до сих пор применяют устаревшие варианты веб-обозревателей (особенно, это касается рунета), которые, естественно, не отображают корректно страницы веб-ресурсов, созданных на основе последних инноваций. Соответственно, это влияет негативно на показатели посещаемости.
Как я уже сказал, полный переход на пятую версию происходит постепенно, поэтому браузеры какое-то время будут поддерживать HTML4. Кроме того, удачный вариант четвертой модификации позволил оставить подавляющее число тегов и атрибутов без изменений. При внедрении ХТМЛ 5 лишь незначительное их количество стало неликвидным или было изменено, что тоже помогает вебмастерам максимально безболезненно осуществить переход.
Наверное, настало время проинформировать вас относительно веб-ресурсов, где вы сможете посмотреть полный перечень всех действующих и валидных на данный момент элементов разметки. В первую очередь, естественно, это первоисточник , коим является официальный сайт World Wide Web Consortium (W3C).
Но все-таки наиболее актуальны теги и атрибуты, соответствующие последней версии ХТМЛ5. Для получения к ним доступа на той же web-странице с перечнем стандартов нужно кликнуть по линку «HTML5.2» , а после перехода на вебстраницу прокрутить меню слева в самый низ и перебраться в раздел «Index» - «Elements» :
На первых порах вам будут нужны первая колонка (Element ), в которой указаны действующие тэги, при клике по которым вы переместитесь на вебстраницу с их подробным описанием, и шестая, где даны соответствующие им атрибуты (Attributes ). Кстати, если нажать на ссылку globals , то можно перейти к просмотру списка глобальных атрибутов , работающих для всех без исключения тегов. В других столбцах следующая информация:
- Description — краткое описание элемента;
- Categories — категории, к которым относится данный тег;
- Parents — к какой категории относится родительский элемент;
- Children — то же самое, только касается дочерних элементов;
- Interface — нормативное определение элемента в интерфейсе DOM, на основании которого базируется весь HTML 5.
Ежели захотите углубиться в тему и получить более подробную информацию по каждой из всех присутствующих в таблице категорий, следует просто нажать на ее название. Правда, все данные там на английском, но здесь уж ничего не поделаешь. Тем, кто не понаслышке знаком с этим языком, будет несложно понять содержание, остальным — Гугл переводчик в помощь.
Но все-таки я предоставлю весьма авторитетный русскоязычный ресурс, в справочнике которого есть необходимые ссылки на информацию о всех тегах и атрибутах. Это не первоисточник, однако сайт весьма полезен, тем более, что своевременно обновляется.
Но я все же постараюсь дать краткое пояснение в отношении чтения данной таблицы на примере тега a, посредством которого создается гиперссылка (hyperlink). Скажем, в колонках «Categories» и «Parents» напротив него присутствует категория «phrasing» (подразумевающая текст документа, а также теги, осуществляющие разметку текстового фрагмента), которой может принадлежать «a» и его родительский элемент абзаца p.
Фрагмент текста с гиперссылкой, которая создается с помощью дочернего элемента a.
Попутно обращаю ваше внимание на то, что в выше приведенном примере для тега a указан атрибут «href» , значением которого является URL страницы сайта.
Пятая версия языка разметки еще более тесно связана с каскадными таблицами стилей (CSS), определяющими стиль оформления, поэтому продолжилась тенденция упразднения некоторых атрибутов, которые выполняют ту же самую задачу, но гораздо менее функциональны.
Впрочем, отследить абсолютно все отличия HTML5 от HTML4 вы сможете опять же в специальном разделе веб-ресурса, принадлежащего Консорциуму, которые включают новые, измененные, а также устаревшие элементы и атрибуты. В завершение предлагаю видеоролик от Евгения Попова, который может дополнить информацию в статье.
Настало время рассмотреть на примере простейший HTML-документ. Мы напишем код, результатом работы которого является вывод в окне браузера фразы «Hello, world!» (в дословном переводе с англ. - «Здравствуй, мир!»). Обычно такая практика написания кода является первым опытом при изучении нового языка. Такая постановка задачи обращает внимание учащегося сразу на несколько ключевых моментов языка программирования (в нашем случае языка разметки), главным из которых является базовая структура программы (в нашем случае веб-страницы).
doctypeЭто элемент также называют корневым, потому что все остальные элементы документа располагаются в нем. Корневой элемент может иметь только два дочерних элемента: и .
Элемент headЭлемент является контейнером для других элементов, которые предоставляют информацию о документе, известную как метаданные. Эти метаданные сообщают браузеру о местонахождении внешних скриптов и таблиц стилей, устанавливая отношение между текущим документом и другими ресурсами, и могут предоставлять дополнительные данные, предназначенные для браузеров. Помимо обязательного элемента , рассматриваемого далее в этой главе, браузеры не отображают никакие метаданные, находящиеся внутри элемента .
Элемент должен быть первым дочерним элементом , никакое содержимое или элементы не должны располагаться перед ним:
Элемент title
Элемент предоставляет текстовый заголовок для документа. Каждый HTML-документ должен иметь ровно один элемент , который должен располагаться внутри элемента :
Заголовок окна
Браузеры отображают содержимое элемента как заголовок (имя) документа, который обычно отображается вверху окна браузера или в названии вкладки:
Элемент bodyЭлемент является контейнером для всего содержимого веб-страницы. Все, что отображается в окне браузера и видит пользователь, содержится в нем (у каждого HTML-документа может быть только один элемент ). Его основная цель - отделить содержимое документа от метаданных:
Заголовок окна
Вот и все! Начало положено – вы получили прекрасную заготовку. Вот так будет выглядеть готовая структура документа с выводом в окне браузера фразы «Hello, world!»:
Заголовок окна Hello, world!
Загрузка...