10 тэгов HTML, которые вы, вероятно, не используете


Оглавление (нажмите, чтобы открыть):

7 HTML элементов, которые вы зря не используете

В современном Вебе в слово семантика вкладывают очень много. Но что означает семантика? Почему она так важна?

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

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

Отлично, раз семантика это так прекрасно, то как её использовать? Один из лучших вариантов делать разметку правильно – заменять привычные элементы на более выразительные.

Как и его блочный собрат

, тег применяется для создания цитат.

Почему просто не использовать кавычки? Кавычки не всегда означают цитату. Иногда они используются для акцентирования, иронии или обозначения имени или названия. В этих случаях использование кавычек полностью уместно. Однако, если Вы цитируете кого-либо, тег недвусмысленно подчеркнет это.

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

С приходом HTML5 и приобрели новый семантический смысл. Тег применяется для фрагментов, имеющих отдаленное отношение к контексту. Он полезен для обозначения, например, мыслей или технических терминов. Тег подходит для придания тексту стилистического отличия без изменения семантического смысла.

Рассмотрим типичную проблему локализации: даты. В США 5 октября 2013 записывается 10/05/13, в Великобритании 05/10/13, в Нидерландах 05-10-13, в Южной Африке 2013/10/05, а в России 05.10.13. При всех возможных вариантах поисковому роботу трудно корректно прочесть дату.

Тег дает возможность записывать даты в понятном для роботов формате. Пример выше можно записать так 10/05/13 . Таким образом, HTML-парсер может безошибочно определить время вне зависимости от форматирования. Также тег позволяет записать время в 24-часовом формате: 10/05/13 at 10 PM .

Когда-нибудь делали так?

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

Да, . Вы, возможно, использовали , и может даже , а как же все остальные? В HTML5 появились новые типы:

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

Заключение

HTML становится всё более семантичным с каждым днём. Использование этих элементов позволяет писать более чистую и понятную разметку. Чтобы узнать больше, можете ознакомиться с Периодической таблицей элементов, документацией Mozilla или спецификацией W3C, если вы уже матёрый девелопер �� Успехов!

Теги HTML: 10 крутых вещей которые они могут делать

В общем сложности, сегодня в HTML присутствует 142 элемента, которые стандартизованы W3C, исключая те, которые находятся в разработке или устарели (такие как: strike, center, font, plaintext и многие другие).

1. Map картинок

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

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

2. Input подсказки

Используя можно сделать список подсказок, которые будут появляться по время ввода данных в input.

3. Подсветка текста

Иногда требуется подсветка текста на темной фоне сайта, чтобы отделить некоторые участки текста. Этого можно добиться используя тег . Цвет заднего фона можно изменить с помощью background-color, а так же можно добавить color, чтобы сменить цвет текста.

4. Template

Вместе с HTML5, появился новый тег , который выполняет функцию хранения информации. Браузер не считывает (пропускает) все что внутри этого тега.

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

Внимание: Данный тег не поддерживается в IE.

5. Small

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

6. Ссылка на корень сайта

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

7. Picture тег

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

, который позволяет добавлять разные картинки под разные расширения.

Внимание: данный тег работает только в Chrome. Для того, чтобы это работало в FireFox нужно поставить dom.image.picture.enable как true в about:config.

8. Color Picker или выбор цвета

HTML5 представил очень много разных возможностей. Одним из них — это возможность выбора цвета. Input элемент, с type=»color», теперь позволяет выбрать цвет из окошка, которое появляется при нажатии на поле.


9. Группирование

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

Внимание: данный тег может принимать свойства CSS.

WebComplex – самостоятельное создание сайтов

Все о самостоятельном создании сайта

10 не популярных, но полезных тегов html

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

Каждый тег ниже входит как в HTML 4.01, так и в нашумевший HTML5.

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

2. Теги таблиц –

,

,

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

служит для обозначения заголовка таблицы.

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

содержит основную информацию в вашей таблице.

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

4. Заголовки

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

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

очень помогает в работе. Этот тег не изменяет внешнего вида, он добавляет функциональность. используется для определения метки обращения к элементу.

Если вам нужно обратить внимание на предложение, либо вы просто создаете банальный блок цитат,

Это то, что Nettuts + используется для его цитаты стиля.

FireZebra

Вставка объектов.

Чтобы вставить картинку нужно создать код:

Где http://site.ru/image.png адрес картинки.

Чтобы вставить ссылку:

Где http://site.ru/ — сайт, на который ведет ссылка, Перейти на Site.ru – название ссылки.

У ссылки есть несколько атрибутов, например target=»_blank» – заставит ссылку открыться в новом окне.

Вместо текста ссылки можно вставить картинку, тогда код такой:

В коде ссылки я вставил атрибут target=»_blank» — ссылка откроется в новом окне, а в коде картинки border=»0″ — у картинки не будет обрамления.

Списки

Списки создаются следующими html- кодами:

  • Первый пункт списка
  • Второй пункт списка
  • Третий пункт списка

Таблицы

Таблицы более сложный элемент чем эти html-теги, им можно посвятить целый пост, здесь просто покажу пример кода самой простой таблицы:

Содержание

Кстати, перевод строки после каждого тега вебмастеры ставят только для удобства редактирования html-кода, этот же код таблицы можно вставить так:

Избегаем популярных ошибок в HTML5

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

Не используйте как обёртку для оформления


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

Вместо этого я вижу следующее:

Честно говоря, это неправильно: — это не обёртка. Элемент определяет смысловую секцию содержимого для создания структуры документа. Он должен содержать заголовок. Если вы ищете элемент для того чтобы обернуть в него всю страницу (в стиле HTML или XHTML), подумайте, не применить ли стили непосредственно к элементу , как описано у Крока Кеймена. Если же вам всё ещё нужна дополнительная обёртка, используйте

Таким образом, корректной разметкой для упомянутого выше примера с использованием HTML5 и пары ролей ARIA будет следующий код. Обратите внимание, что вам, в зависимости от дизайна, всё ещё могут понадобится экстра-элементы

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

Используйте и осознанно

Элемент удалён из спецификации HTML5 и не рекомендован к использованию, прим. редактора.

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

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

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

Злоупотребление

Думаю, что вы в курсе, что можно использовать в документе несколько раз. Но эта возможность привела к следующим ошибкам:

Неправильное использование

Раз уж зашла речь о заголовках — я часто вижу неправильное использование . Не следует использовать в сочетании с в случае, когда:

  • дочерний заголовок всего один или
  • элемента будет достаточно и без .

Первая проблема выглядит так:

В этом случае стоит избавиться от и оставить только заголовок:

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

Когда — это единственный дочерний элемент , то какой смысл в этом ? Если в нём нет дополнительных элементов, соседствующих с , смело избавляйтесь от .

Больше примеров использования вы можете найти в отдельной, более подробной статье.

Не оборачивайте все списки ссылок в

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

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

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

Ключевая фраза — «главных навигационных блоков». Мы можем дискутировать весь день о значении слова «главный», но для меня это значит:

  • Самая главная навигация;
  • Поиск по сайту;
  • Вторичная навигация (что спорно);
  • Внутренняя навигация (по длинной статье, например).

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

  • Постраничная навигация;
  • Социальные ссылки, за исключением тех случаев, когда такие ссылки являются основной навигацией, к примеру, на сайтах About Me и Flavours;
  • Тэги к записи в блоге;
  • Категории записи;
  • Навигация третьего уровня;
  • Подвалы, набитые ссылками.

Если вы не уверены, стоит ли оборачивать список ссылок в , просто спросите у себя: «главная ли это навигация?» Чтобы было легче ответить на этот вопрос, обратитесь к следующим правилам:

  • «Не используйте , если кажется, что в этом случае может подойти и с заголовком », — Ян Хиксон, IRC.
  • Добавите ли вы этот блок в список ссылок «перейти» для улучшения доступности?

Если ответ на оба эти вопроса «нет», то, скорее всего, это не .

Общие ошибки с элементом

Ах, . Правильным использованием этого элемента вместе с подельником не так-то просто овладеть. Рассмотрим некоторые общие проблемы, которые я вижу при использовании .

Не каждая картинка это

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


Спецификация обозначает как «содержимое в потоке, с необязательным заглавием, самодостаточное, обычно упоминаемое в качестве смысловой единицы в основном тексте». Как раз в этом состоит вся красота элемента , который может быть перемещён из основного содержимого, скажем, в колонку, что никак не повлияет на основной поток документа.

Если это исключительно оформительская картинка, никаким образом не упомянутая в основном документе, то это точно не . Есть и другие варианты использования, но просто спросите себя: «Нужна ли эта картинка для лучшего понимания контекста?» Если нет, то это вероятно не , а, возможно, . Если да, спросите себя: «Можно ли переместить эту картинку в примечания к тексту?» Если ответ на оба вопроса «да», то это, вероятнее всего, .

Ваш логотип — это не

Плавно переходим к следующей проблеме, вышеупомянутые правила применимы и к ней. Вот пара регулярно встречающихся примеров:

Добавить здесь нечего: это совсем неправильно. Мы можем спорить до посинения насчёт того, должно ли лого находиться внутри

, но мы здесь не за этим. Настоящая проблема — в неправильном употреблении . Этот элемент должен использоваться, только если он упоминается в документе или контексте общего структурного элемента. Будет честным признать, что ваш логотип вряд ли будет упомянут подобным образом. Просто не делайте так. Всё, что вам нужно, это:

Элемент — это не только картинки

Другое распространённое заблуждение насчёт — что он может быть использован только для картинок. Это не так. Элемент может быть видео, аудио, графиком (на SVG, к примеру), цитатой, таблицей, блоком кода, фрагментом текста или любой комбинацией этих и многих других элементов. Не ограничивайте использование только картинками. Наша работа, как энтузиастов от веб-стандартов, заключается в том, чтобы максимально точно описывать содержимое при помощи разметки.

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

Не используйте ненужные атрибуты type

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

Дело в том, что в HTML5 не нужно добавлять атрибут type для элементов

Вместо этого просто напишите:

Кроме того, вы можете уменьшить объём кода, который пишете для задания кодировки документа и других вещей. Глава про семантику в «Погружении в HTML5» Марка Пилгрима объясняет всё.

Неправильное использование атрибутов форм

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

Одиночные атрибуты

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

Надо признаться, я нечасто встречал подобное, но если в качестве примера взять атрибут required , то попадалось следующее:

В конечном счёте это никому не вредит. HTML-парсер видит атрибут required в разметке, поэтому требуемая функциональность будет включена. Но что, если поставить код вверх ногами и написать required=»false» ?

Парсер по-прежнему увидит атрибут required и применит поведение, несмотря на то, что вы пытались сказать ему не делать этого. Явно не то, что вам было нужно.

Существует три правильных способа задания одиночных атрибутов, второй и третий из которых нужны только если вы пишете XHTML:

Если применить эту запись к нашему примеру (в HTML), получится следующее:

Резюме

Было бы просто невозможным перечислить здесь все странные приёмы и образцы разметки, с которыми мне довелось столкнуться, но эти — одни из самых часто встречавшихся. А какие ещё ошибки разметки бросались вам в глаза? Расскажите в комментариях.

Перевод оригинальной статьи «Avoiding common HTML5 mistakes» Ричарда Кларка (Richard Clark), опубликованной на сайте HTML5Doctor.com.

Комментарии +

Быстро проверить корректность структуры документа мне помогает инструмент h5o http://code.google.com/p/h5o/

Когда article, section, nav остается без заголовка (а это сразу выявляется в структуре), то нужно либо дать блоку осмысленный заголовок, либо заменить его на div. Памятуя об этом правиле, можно избежать неуместного использования новых тегов, мне кажется.

Стоить отметить комментарии к оригинальной статье, в которых говорится, что Internet Explorer не распознает атрибут required . Так, используя jQuery, запрос вида $(‘input[required]’) при наличии ничего не вернёт в Internet Explorer 8 и ниже. Но $(‘input[required=»»]’) при даст результат.

Забавно, я перевел эту же статью для Хабра, но эту заметил только сейчас (после обновления RSS фида).

B@rmaley, статья хорошая — понятное дело, хочется перевести.

Атрибут href тут правильно указан вместо привычного src, или это ошибка?

Антон, спасибо — это была опечатка в оригинальной статье, поправил.

Не «экстра-элементы div», а «дополнительные элементы div». То же самое насчёт «экстра-разметки вокруг картинок» (лучше: «избыточной разметки вокруг картинок»). В остальном перевод хороший.

Кажется пропущен предлог «с» в предложении «Правильным использованием этого элемента вместе подельником не так-то просто овладеть.»

Петр, что касается «экстра-элементов div», то согласен — там смысл немного другой, поправил. А вот что касается экстра-разметки, то это уже профессиональная лексика, ничего не поделаешь, все говорят именно экстра-разметка.

Сергей, поправил, спасибо.

Не планируете перевести статьи html5doctor? Отпала бы необходимость в подобных «разоблачениях».

crwin, у нас уже переведены статьи «Элементы small и hr», «Элементы i, b, em и strong» и ещё две (про hgroup и figure) лежат в черновиках. Доктор HTML5 — это самое интересное из того, что сейчас можно переводить, так что всё будет.

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


Не согласен с автором по поводу неуместности использования nav для постраничной разбивки. Зачем «дробить» и ветвить код разные типы навигации?

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

А от , всё же, надо избавиться. Лучшее правило его применения — просто забыть про него.

Кстати, да. Первое, что приходит на ум — при сужении области body, нельзя будет за его пределы вынести блок. Например, при оверлее (эффекте lightbox), если body уже доступного места в окне браузера, то и оверлей не затемнит всю рабочую область браузера, а только область body.

Не дело верстальщика описывать семантику страницы.

Для кого она нужна? Для поисковиков в первую очередь, и в наименьшей степени для альт. устройств (т.к. все популярные визуальные устройства поддерживают CSS, а для screen reader’ов достаточно обозначить структуру т.е. навигацию nav и область контента article.)

Все популярные визуальные устройства поддерживают CSS — обьясню получше, то что ты сейчас делаешь менюшку ul>li совершенно не отличается от div>div, div>span, span>span или любой другой чистой конструкции. (при необходимости эти конструкции меняются но то что нужно поисковикам будь то h1,h2,h3,h4,h5,h6,section,figure,details,nav,article,strong,em, и т.д.)

Если семантика html5 нужна в большей стпени поисковикам то и заниматься ей должны те кто понимает в поисковиках — сеошники.
(Что кстати на данный момент совершенно бесполезно т.к. не один поисковик не учитывает html5 семантику.)

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

exessqd, семантика не нужна этим гопникам от IT или «сеошникам», им нужно сайт в топ вытащить, нагенерив уникального контента и засрав интернет дорвеями. Не вижу смысла пересказывать здесь свой доклад «Вёрстка со смыслом», вся аргументация в нём. А ещё в статье «Семантическая вёрстка», не забудьте про вторую её часть.

Но если коротко: семантика — это методология, общий язык для разработчиков.

Видел я и доклад, и статьи читал.

Сначала скажу я подразумеваю под бесполезной семантикой — это использование dl,dt,dd,ul,ol,li,p и т.д. вне области контента. Давайте назовем это «списковая семантика».

Какая бывает семантика и кому она нужна?

Семантика контентной области(h1,h2,h3,h4,h5,h6,hgroup,em,strong и т.д.) — нужна поисковикам, невизуальным устройствам.

Структурная семантика(nav,article,aside,header,footer) — нужна
поисковикам(в будущем), невизуальным устройствам.

Списковая семантика — нужна никому.

По моему мнению в статье приводится единственная адекватная причина делать «списковую семантику» — это доступность.

Вопрос здесь в том — доступность для кого?
Для альт. устройств, они бывают визуальные и невизуальные.

Визуальные — телефоны(поддержка css неполная), смартфоны (полная поддержка), ридеры(полная поддержка).

Т.е. CSS — универсален для всех визуальных устройств.
Никто не выключает свой CSS чтобы посмотреть будет! твои dl,dt,dd,ul,ol,li,p никто не увидит.

Невизуальные — screen readers(читалки), не учитывают списки т.е. никто твои dl,dt,dd,ul,ol,li,p не услышит.

Как вообще появилась списковая семантика?

Я предпологаю это было так: Какой-то перец в году 1998 выключил стили и увидел: «Опа, что-то моя страница смотрится как-то хреново, дайка я списочками все расхерачу» Он хорошо знал что такое язык разметки и сразу вспомнил «Блин! Ещё отцы основатели идеологии языков разметки говорили что оформления сайта не должно зависеть от конкретного устройства а список он и в африке список»

Хватит творить херню и называть это семантикой, списковая семантика бесполезна.

P.S.
Чтобы ваш сайт был доступен с читалок не обязательно стилизовать структурные теги, делая ужасный javascript’овый fallback для старых браузеров, достаточно обернуть ваш код в них.

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

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

И так, я не согласен по поводу употребления тега

, именно так, как использует Макеев Вадим. Говорим о семантике, так для кого она нужна? Конечно — прежде всего для верстальщика. А поглядывая исходный код блога pepelsbey.net, невольно улыбаешься накой черт использовать тег

если можно использовать div или тот-же «спанчик» с классом — и ничего НЕ потеряешь. Какой логикой пользуется автор? Остается только догадываться.
Аргументы которые он приводит в своем докладе — буквально притянуты за уши.

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

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

http://pepelsbey.net/pres/sense-coding/
Идем по этой посылочке и находим код, где сам Апостол нам показывает, как можно использовать nav.
Как видите у каждого есть свои взгляды, на правильное (семантичное) использование тегов по стандарту HTML 5.
Только это все условно и не стоит этой теме придавать особое значение. Читайте стандарты и старайтесь их не нарушать.
А как правильно подскажет Ваша логика, а не абсурд который пишут мнимые проповедники.

если можно использовать div или тот-же «спанчик» с классом — и ничего НЕ потеряешь.

Ничего не потеряешь кроме того что с этой или этой штуки никто не поймет что это кокретно футер, а если и поймут то быстро перейти к нему не смогут.

exessqd, завуалированный ответ получился. Очень похожий на спам.
Раскроете до конца свою мысль?

Раскрыл подробно из двух предыдущих комментариев, но раз ты спрашиваешь.

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

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

то есть элементы разметки отражают смысл содержимого а не его оформление.


Была и другая причина — независимсоть от устройства вывода.

Оформление нужно людям, программам нужен смысл.

В HTML5 пошли ещё дальше и придумали структурную семантику
section,nav,article,aside,hgroup,footer,address
Чтобы программы могли отличать не только текст но и области содержимого.

На данный момент это нужно двум типам программ, поисковым роботам(чтобы лучше индексировать сайт, пока не работает) и альтернативным устройствам (screen readers — тип программ которые читают текст с экрана монитора, для слепых людей)

Человек использующий screen readers уже сейчас может, на странице размеченной структурными тегами, быстро переходить от одной части страницы к другой не читая при этом весь текст(особенно если это seo текст^^ ).

Что будет дальше?

W3C уже давно старается реализовать концепт «семантической паутины».

Таким образом программа-клиент может непосредственно извлекать из паутины факты и делать из них логические заключения.

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

Но пока skynet не появился мы можем спать спокойно.

P.S. Зачатки skynet можно усмотреть в проекте wolframalpha

Мой не «идеальный искусственный интеллект» отказывается воспринимать конкретно тег footer, именно так, как его использует уважаемый, Вадим Макеев.
Хотя и не нарушает спецификации 🙂 он (прошу прощения) пытается играть на 2 фронта. Да, именно идя на поводу спецификации подстраивает свою логику.
Я всего лишь хотел сказать, а не должно ли быть наоборот?
Использовать правила игры во благо логике.
Ну можно представить футер у блока, пусть даже у всех блоков/разделов. Но в комментариях зачем?

exessqd — из всего что я понял, Вас должно огорчить то момент, что использование h1 во всех новых узлах, (т.е. употребление его многократно) может «сказочно» отразится на поисковых системах. На сколько помню, это 2 элемент важности в seo, после title.

alexben, да что ж вы пристали к Вадиму Макееву? Шоколад, как говорится, не виноват. Если можно использовать футер там, куда он логически подходит, то почему вам, как разработчику, как человеку с интеллектом, не хватает гибкости мышления, чтобы видеть в комментарии самостоятельное содержимое, которое может иметь мета-информацию, помещённую в футер?

И ещё просьба: обратите внимание на правила оформления комментариев и оборачивайте блочные фрагменты кода в (что станет pre > code ), а не просто в code — это только для строчного кода.

видеть в комментарии самостоятельное содержимое

Я не вижу комментарии как самостоятельное содержимое и могу пояснить.
Коментарии с точки зрения логики, это следствие. И между контентом есть нить, которую можно назвать причинно-следственной связью.
Вследствие чего, вырвав из контекста любой комментарий, вероятность того, что мы поймем будет не 100%.
И только оффтоп будет является 100% самостоятельным содержимым т.к. он никак не пересекается и не зависит от контентной части.

alexben, согласен, все правильно.
И зачем было так кричать?

Добрый день немного не по теме, но как правильнее верстать формы? а именно связь label и input например. Список определений проситься, но итак ведь есть связь for id и в придачу в спецификации везде параграфом разметка идёт.

Seva, для форм есть fieldset , legend , label и остальные элементы, уже непосредственно сами формы. Сочетая их по назначению вместе со стерильными элементами, вроде div и span , на мой взгляд, можно написать любые формы.

тоесть вы считаете что внутри формы не нужно использовать дополнительные семантические теги типа p, dl, ul, ol и т.д.

а для разметки либо если позволяет css без лишних тегов или если не позволяет то добавить стирильных? но тогда почему в спецификации они параграфами размечают?

Как правильно использовать aside ?
Например страница с описанием страны, на ней есть блок новостей относящихся к этой стране. он должен быть в aside или section, ведь по сути это раздел и имеет отношение к описанию страны, но и является самостоятельным содержимым косвенно относящимся к странице с описанием страны.

Или например блок комментариев к новости, вроде как имеет косвенное содержимое то есть aside, но само по себе существовать не может получается section.

Подскажите пожалуйста какие теги div блоков заменить на теги HTML5
http://s019.radikal.ru/i604/1205/3b/56722aa5076e.jpg пример вёрстки

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

Но если рассматривать html-документ как всего лишь один раздел, кусок, секцию целого проекта, тогда использвание тега section логически оправдано.
Более того, если поместить все разделы(секции) сайта в один HTML-документ, то логическая структура проекта не нарушится (разделы сайта останутся в section, все логично). А в вашем случае они останутся в DIV’ах. Где семантика?

Прочитал комментарии к постам. Много спора о семантики блочных и строковых элементов. Кто — то не видит смысла использования, а другие обратное. Если разобраться тогда вообще можно не использовать семантические элементы в коде страниц, а взять не смысловые — блочный div, и строковый span, и сверстать только из них с применениями стилями CSS. Ведь по большому счету все элементы созданы для удобства их использовании для создания каркаса и вложений, а так же и строковые. Никто не принуждает использовать тот или иной стиль верстки, так как и программированию . Есть только рекомендации их использования. ))))

«Избегаем популярных ошибок в HTML5»
А с чего вообще автор взял, что это ошибки?
W3C дает лишь рекомендации по оформлению, а не четкие правила как в математике. Если же это рекомендация, то какие могут быть споры?

Если я делаю фотохостинг, то накой черт мне сдались теги которые семантически верно разбивают структуру сайта для читалок у слепых или тому подобное?
Как уже выразились — половина тегов нужна клопам СЕОшникам, а не верстальщикам и программистам.

В документе есть шапка, состоящая из шапки с главным меню из двух пунктов; основное тело; футер с тремя подблочками. Мучаюсь, как корректнее сверстать шапку.

Странно, что на одном уровне находятся и:

Главное меню не в , а содержит только один элемент:

Ко второму примеру заголовок:
«Странно, что на одном уровне находятся и »

К третьему:
«Главное меню не в , а содержит только один элемент»

Тег hgroup по текущим реалиям deprecated
Было бы неплохо указать об этом в статье

Илья, добавили указание, спасибо.

Очень полезная статья для начинающих верстальщиков. Спасибо!! 😉

Таблица основных тегов html с примерами

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

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


Базовые теги

— тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.

— показывает браузеру тип документа, сообщает его версию и язык.

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

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

30 необходимых практик для написания современного и эффективного HTML5

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

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

Этот список составлялся с расчётом на создание ясного, поддерживаемого и масштабируемого кода, который успешно использует элементы семантической разметки из HTML5 и который корректно отрендерится во всех поддерживаемых браузерах. Все SEO, CSS и обычные front-end практики JS выходят уже за пределы этой статьи.

A) Главное

01 — Указывайте doctype

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

Который на самом деле активирует стандартный режим во всех браузерах. Как альтернативу, вы можете использовать doctype , который отвечает за используемую HTML/XHTML версию.

02 — Закрывающие теги

Пустые элементы, то есть теги, которые не могут содержать какой-либо контент.

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

У обычных элементов никогда не будет самозакрывающихся тегов.

03 — Опциональные теги

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

Опциональные закрывающиеся теги

HTML5 допускает опциональные закрывающие теги для некоторых элементов. Вам необязательно их использовать, в Google Style Guide по HTML вообще рекомендуют избегать все опциональные теги.

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

04 — Атрибут lang

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

05 — Принцип простоты

В целом, HTML 5 был разработан для обратной совместимости с более старыми версиями HTML и XHTML. По этой причине рекомендуется избегать использования XML или его атрибутов. Совершенно нет причин для его применения:

Пока вам реально не надо будет написать XHTML документ, нет смысла в его применении и использовании. Также вам не нужны и xml атрибуты, как тут:

Этот блог бесплатный, в нём нет рекламы и ограничений paywall.
Вы можете его поддержать через Яндекс.Деньги. Спасибо.

B) Metadata

06 — Тег

Это очень полезный тег, особенно для разработки на локальных серверах. Однако, при неправильном использовании он может выдать нечто странное. По-сути, если вы впишите тег , то каждая ссылка на странице будет формироваться относительно неё, если она не указана полностью. Это влечет за собой смену стандартного формирования и поведения некоторых ссылок. Для примера, внутренняя ссылка href=»#internal» будет интерпретирована браузером как href=»http://www.example.com/#internal»

Также, ссылка на внешнюю страницу сделанная таким способом: href=»example.org” , будет интерпретирована браузером как href=»http://www.example.com/example.org»

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

07 — Тег

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

08 — Указывайте кодировку

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

09 — Метатег description

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

C) Использование семантически подходящих элементов для разметки вашей страницы


В HTML5 есть несколько элементов, которые помогут вам грамотно расставить и организовать элементы на вашей странице.

10 — Элементы и

11 — Элемент

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

Роль элемента уже подразумевается в самом теге:

12 — Элемент

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

Если у нас уже есть куда более точный тег для указания основного контента страницы:

13 — , или

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

И наконец, мы используем

14 — это семантический тег, а не стилистический

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

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

Для примера, вот некорректное использование тега :

Вот уже получше, но тут видно сильное злоупотребление тегом

И вот уже получше:

15 — Элемент

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

Представьте иллюстрации, таблицы или диаграммы в книге.

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

16 — Группировка элементов с помощью по общему

Тег должен располагаться либо сразу после открытия тега , либо сразу после закрытия тега .

D) Использование подходящих тегов и/или атрибутов в соответствии с их предназначением

17 — Стилизующие теги устарели в HTML5 — используйте CSS

Не используйте , , — они просто устарели и даже не смейте использовать , хоть он сам по себе и не устаревший.

Не используйте , он уже давно вышел из употребления.

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

И вообще, было бы оптимальным решением для каждого, избегать стилистических элементов в HTML разметке, для этого вообще-то есть CSS.

18 —
элемент не для разметки

Не используйте
для форматирования документа или для добавления пробелов между элементами. В письмах да, можно.

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

19 — Указание типа не очень важно для таблиц стилей и JavaScript файлов

В HTML5 нет нужды в указании типа для и

20 — Используйте атрибут alt для ваших изображений

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

21 — Будьте аккуратны при использовании атрибута title

Атрибут title не замена атрибуту alt . alt используется вместо изображения, в то время, как title показывается вместе с изображением, обычно как всплывающая подсказка.

В спецификации HTML5.1 предостерегают от чрезмерного использования атрибута title , из-за недостаточной поддержки браузерами, такими как touch-only в телефонах и планшетах.

Вот подходящий пример использования атрибута title :


Следующего использования нужно бы избегать:

Вместо этого, попробуйте должным образом дать название ссылке и использовать атрибут alt для вашего изображения:

E) Читабельность кода и подходы к форматированию

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

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

22 — Последовательность отступов

Код с полным отсутствием отступов или наличием непоследовательных отступов можно считать нечитабельным. На заметку — Google Style Guide для HTML рекомендует использование двух пробелов для отступов и не использовать табуляцию.

Если бы это был общепринятый формат, то каждый бы форматировал свой HTML код последовательно. Однако, каждый разработчик делает что-то по своему, так что по крайней мере мы должны попытаться что-то делать по общим стандартам: если вы решили использовать 4 пробела или два таба для отступа(пожалуйста, никогда не используйте два таба), сделайте это на каждой строчке вашего HTML кода, хотя бы для понимания другими.

23 — нижний регистр, Заглавный Регистр, ГорбатыйРегистр и КАПС

ГорбатыйРегистр используется в JavaScript и это визуально понятное форматирование в JS. По-этому, лучше всего не использовать его в отрезках кода, которые не в JS.

Заглавный Регистр — только для текста, строк, контента. Хоть это и не является технически неправильным — называть классы или ID заглавным регистром, это всё равно сильно влияет на читабельность.

КАПС — снова, технически всё верно, кроме того, что так принято описывать крик и вообще это визуально неприятно.

нижний регистр — наиболее используемый подход.

24 — Кавычки

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

Хотя одно замечание: HTML допускает одинарные кавычки и это очень удобно при генерации HTML из PHP. Однако, если HTML написан вручную, то это реально вопрос предпочтений. Главное, чтобы вы были последовательны (!)

Так что этот код отформатируется с пустой строки. Используйте элементы

26 — Мнемоники

Используйте мнемоники с

F) Валидация и минифицирование

29 — Валидация

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

Вы также можете получить исходный код их Nu валидатора.

30 — Минифицирование и комбинирование CSS и JS файлов

У современного сайта обычно больше одного CSS файла. Главные стили, bootstrap или любые другие стили сеток, может быть ещё несколько стилей для плагинов, тем, ну и т.п. Каждый CSS файл делает отдельный HTTP запрос, тормозя загрузку вашего сайта.

Это рекомендуемая практика, в финальном продукте минифицировать и комбинировать все ваши CSS’ки для улучшения времени загрузки. Также вполне обычной является практика хранения неминифицированных файлов, к примеру в папке “css/src”, потому что редактирование и дебагинг минифицированных файлов — ну очень сложное занятие.

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

10 полезных тегов и атрибутов HTML5, которые Вы должны знать!

Здравствуйте, уважаемые читатели XoZbloga! HTML5 в настоящее время уже достаточно активно используется при разработке веб интерфейсов и приложений. Мы все знаем, что HTML5 привнес много новых тегов, атрибутов и элементов. Некоторые из них действительно полезны для наших сайтов. Таким образом, в этой статье, я кратко расскажу о нескольких полезных и важных HTML5 тегах и атрибутах, которые вы должны знать и использовать на практике!

Структурная разметка HTML5

В HTML5 появилось несколько новых тегов, которые призваны заменить уже прижившиеся блоки div (не все конечно �� ). Внешне, так сказать, ничего не изменилось, но в сущности новые теги несут в себе смысловую (семантическую) нагрузку, и строго определяют для каждого блока его место и роль:

  • — Определяет область «шапки» сайта с логотипом, первичной навигацией и тд.;
  • — Определяет «подвал», колонтитул веб страницы сайта или раздела, в котом обычно размещается дополнительная информация;
  • — Определяет блок, который служит для группировки однотипных объектов, или для разделения текста на разделы;
  • — Определяет автономную часть страницы, это может быть сообщение форума, журнала или газетную статью, запись в блоге и тд.;
  • — Определяет область навигации, как правило список ссылок;

Форма

Новые типы input полей

HTML5 введены новые типы input полей. Они позволяют писать более семантически правильный код, адаптированный для мобильных устройствах. Например при использовании типа email происходит автоматическая валидация введенного текста, на предмет идентичности адресу электронной почты и тд.

Регулярные выражения для валидации

До появления HTML5, при использовании формы на вашем сайте, вы должны были пропускать введенный текст через JavaScript для проверки. Теперь с HTML5 и атрибутом pattern , вы можете определить шаблон регулярного выражения для проверки данных.

input type = «text» title = «электронный адрес» required pattern = «[^@]+@[^@]+\.[a-zA-Z]<2,6>» / >

input type = «text» title = «по крайней мере восемь символов, содержащих хотя бы одну цифру, один символ нижнего и верхнего регистра» required pattern = «(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).<8,>» / >

input type = «text» required pattern = «(\+?\d[- .]*)<7,13>» title = «интернациональный, национальный или местный номер телефона» / >


Автозаполнение с HTML5 datalist

Использование dataList элемента HTML5, позволяет создавать список данных для автозаполнения полей ввода. Супер полезно!

input name = «frameworks» list = «frameworks» / >

id = «frameworks» >
option value = «MooTools» >
option value = «Moobile» >
option value = «Dojo Toolkit» >
option value = «jQuery» >
option value = «YUI» >
/ datalist>

Автофокус полей формы

Атрибут autofocus позволит вам установить фокус на любой элемент формы (в том числе кнопку).

Замещающий текст поля

Это тот самый (серенький) текст который находится к примеру в поле поиска и призывает ввести искомое слово и нажать Enter. В HTML5 замещающий текст реализуется вот-так:

Скрытые элементы с помощью HTML5

В HTML5 введен атрибут hidden , который позволяет скрыть определенный элемент, на подобии того как это применяется в CSS с использованием dispaly: none

HTML5 prefetching — предварительная загрузка

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

HTML5 и теги

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

Атрибут download

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

Чтобы оставаться в курсе свежих статей и уроков следите за XoZblog в Facebook или добавляйте в круги на Google+. Не забывайте оставлять комментарии к статьям и урокам. Спасибо!

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

Где то ли читал то ли смотрел и осталось в голове что html5 не обязательно писать тэги: html, head, body

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

Комментарий модератора
Создавайте темы с осмысленными и понятными названиями — это серьезно повышает шансы, что на ваш вопрос ответят.
18.10.2020, 04:57

Семантические теги html5
Стоит ли использовать новые теги html5(article,nav,header и т.д.) в новом проекте? Вроде бы Html5.

Не работают теги html5
Прочитал на сайте хмлбука пример http://htmlbook.ru/l. vigatsiya-sleva У меня 2 файла Файл.

Теги html5 и колонки bootstrap
Здравствуйте. Правильно ли задавать для html5-тегов классы колонок bootstrap?

Зачем в html5 новые теги?
Кто может в краце пояснить смысл внедрения тегов футер, секшион и подобных. Они как-то.

Семантические теги HTML5 и кроссбраузерность
Кто-нибудь использует семантические теги? Что используете для IE? html5shiv? А как решаете вопрос с.

Основные теги HTML

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

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

— заголовки в контенте
7. — выравнивание по центру
8. — подстрочный шрифт
9. — надстрочный шрифт
10. , — уменьшить/увеличить размер шрифта
11.

На изображении выше простой шаблон, мы видим сверху страницы и в самом низу. Это то, как выглядит типичная страница, которую вы привыкли видеть, с логотипом вверху страницы и подвалом с несколькими ссылками, а также копирайтами в самом низу. Пользователи WordPress возможно привыкли называть их “masthead” и “colophon”, соответственно.