Теги
Команды
для браузера, говорящие, как отображать
текст, вставлять таблицы, изображения
и другие объекты, называются тегами
(от
англ.
tag
- ярлык, признак
).
Сами теги (команды) не отображаются
на экране.
Имя
тега пишется в треугольных скобках,
например,
- тег, говорящий браузеру записывать
весь последующий текст жирным шрифтом.
Имя тега можно записывать на любом
регистре (прописными или строчными
буквами), то есть
будет воспринято браузером так же, как
и .
Теги
бывают парные
и непарные
.
Например, тег
говорит браузеру записывать жирным
шрифтом весь последующий текст до
команды .
В таком случае тег, дающий команду,
называют открывающим
,
а тег, отменяющий команду, закрывающим
.
Теги
могут иметь параметры
(или атрибуты).
Например, чтобы задать
цвет шрифта, используется тег font
с параметром color:
- это открывающий тег, который командует
браузеру с этого момента отображать
шрифт зеленым (в данном примере) цветом
до закрывающего тега .
Некоторые
параметры требуют обязательного указания
их значений. Для некоторых параметров
браузер использует значения по умолчанию,
если другие значения не заданы.
Если
тег имеет несколько параметров, то они
прописываются через пробел в любой
последовательности. Например:
- две аналогичные записи открывающего
тега font
с параметрами color
и size.
Структура
HTML страниц
Любая
html-страница должна содержать следующие
обязательные теги:
html
- сообщает браузеру, что страника
написана на языке HTML и строчки до
закрывающего тега представляют собой
единый документ;
head
- между открывающим и закрывающим тегами
помещается важная информация, описывающая
этот документ;
body
- между открывающим и закрывающим тегами
помещается само содержание страницы.
Таким
образом HTML-документ имеет следующую
структуру:
Описание
документа (не отображается на самой
страничке)
Содержание
(отображается на страничке с учетом
заданной разметки)
Сам
раздел не является обязательным и служит
для размещения описания документа.
Если он есть, то обязательным тегом
является только TITLE
,
содержание которого задает название
документа, показываемое обычно в
заголовке окна браузера.
Например,
такая строчка
1_HTML
задаст название документа "1_HTML",
которое в Mozilla Firefox будет отражаться в
заголовке окна и на закладках (когда
открыто несколько страничек):
2. Форматирование текста
Шрифты:
гарнитура, размер, цвет
Оформление
текста
Заголовки
Теги
переноса строки и форматирования абзаца
Выравнивание
текста
Упражнение
Шрифты: гарнитура, размер, цвет
При
помощи HTML-разметки можно написать текст
разного начертания (гарнитуры), размера
и цвета. Для этого используется тег
,
имеющий несколько параметров:
face
– для задания гарнитуры,
size
– для задания размера,
color
– для задания цвета.
Чтобы
задать нужный шрифт, размер или цвет,
необходимо соответствующему параметру
присвоить нужное значение:
параметр="значение"
Гарнитура
Например,
чтобы написать текст шрифтом Times
New Roman
,
необходимо вставить перед нужным текстом
тег
и присвоить его параметру face
значение Times
New Roman
, а т.к.
тег
– парный, то после необходимого текста
обязательно нужно вставить закрывающий
тег:
Текст
с
начертанием
Times New Roman
Текст
с начертанием Times New Roman
Параметру
face можно присвоить несколько значений
через запятую:
face="Times
New Roman, Times, serif"
В
таком случае, браузер сначала попытается
отобразить текст шрифтом Times
New Roman
. Если
такой шрифт отсутствует на компьютере
пользователя, то браузер попытается
отобразить текст шрифтом Times
и т.д.
Размер
Чтобы
написать текст размером 4, необходимо
вставить перед нужным текстом тег и
присвоить его параметру size значение 4:
Текст размера 4
В
результате браузер отобразит эту строчку
так:
Текст
размера 4
Что
же означает эта загадочная цифра 4?
Параметр size
может принимать значения от 1
до 7
.
Это условные единицы. Средний размер,
используемый по умолчанию, соответствует
size="3"
.
Следовательно,
размер текста 4 – это средний размер,
увеличенный на 1 условную единицу, а
размер 2 - это средний размер, уменьшенный
на 1 условную единицу и т.д. Величина
текста, заданная таким способом,
называется абсолютной
.
Но
есть и другой способ уменьшить или
увеличить размер текста относительно
размера по умолчанию. Для этого нужно
присвоить параметру size
значение "-1"
или "+1"
соответственно. При таком способе
задания размера величина текста
называется относительной
.
Итак,
чтобы получить размер текста 5, можно
воспользоваться двумя способами:
Текст размера 5 или
Текст размера 5
Помимо
перечисленных существует еще несколько
способов задать размер текста.
Увеличить
текст можно с помощью тега
:
Увеличенный
текст
В
результате браузер отобразит эту строчку
так:
Увеличенный
текст
Уменьшить
текст можно с помощью тега
:
Уменьшенный
текст
В
результате браузер отобразит эту строчку
так:
Уменьшенный
текст
Теги
и
можно повторить несколько раз для
усиления эффекта. Например, если в
результате строки:
Большой
текст
текст
недостаточно велик:
Большой
текст
можно
написать так:
Большой
текст
И
в результате получится больший текст:
Большой
текст
Цвет
Теперь
о задании цвета текста. Чтобы написать
текст красным цветом, необходимо вставить
перед нужным текстом тег
и присвоить его параметру color
значение red
:
Красный текст
В
результате браузер отобразит эту строчку
так:
Красный
текст
Но
цвет можно задать не только по названию,
но и по цифровому значению в шестнадцатеричном
формате, который выглядит как знак #
и 6 символов (цифры 0-9
и буквы латинского алфавита A-F
)
после него. Например, красному цвету
соответствует шестнадцатеричное
значение #FF0000
.
Т.е. написать текст красным цветом можно
двумя способами:
Красный текст или
Красный текст
Здесьможно скачать таблицу цветов, в которой
приведены основные цвета, их названия
и соответствующие им шестнадцатеричные
значения.
Сегодня мы поговорим о семантике в HTML5. Я уже писал небольшой обзорный пост про . Рекомендую с ней предварительно ознакомиться, перед прочтением этой статьи. Сейчас мы разберемся с этим вопросом более подробно, о том как правильно и грамотно составлять семантическую структуру HTML5 документа.
В этой статье мы будем постепенно создавать html страницу, и оформлять ее семантическими HTML5 тегами.
Рисунок - Семантическая структура для HTML5 страницы.
DOCTYPE и meta теги в заголовке страницы
Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head:
Заголовок страницы
Я добавил тег который отвечает за ключевые слова. И тег который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега
. Title страницы должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.</p><p>Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные <div> теги, то есть это блочные элементы. Но если <div> не имеет семантической нагрузки, то header, nav, main и другие — уже нужно использовать только осмысленно.</p><h3>Заголовок страницы</h3><p>Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.</p><p> <!-- Header страницы -->
<header>
<h1>Site title</h1>
</header>
</p><p>Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.</p><p> <!-- Header страницы -->
<header>
<h1>Site title</h1>
<p>site slogan</p>
</header>
</p><p><b>Замечание по поводу тега H1
</b></p><p>Следует заметить что в HTML5 тег H1 используется для указания заголовка контейнера в котором он находится (это может быть header, section, article и т.д.)</p><p>До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок H1! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи. H3 для под разделов и так далее.</p><h3>Навигация на странице</h3><p>Оформление главной навигации по сайту должно заключаться в тег nav. Также следует помнить что хорошей практикой считается оформлять навигацию элементами списка.</p><p> <!-- Главная Навигация по сайту -->
<nav>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
</nav>
</p><h3>Контент на странице</h3><p>Основное содержимое страницы оформляется в тег main. Это может быть одна статья, или несколько превью статей если речь идет о странице блога с несколькими записями. Нельзя помещать сайдбар, хедер страницы, футер или главную навигацию в тег main!</p><p> <!-- Основное содержимое страниц -->
<main>
...основной контент страницы...
</main>
</p><h3>Оформление статьи</h3><p>Тег article — служит для обертки статей. В общем этот тег содержит в себе блок контента, который может быть вынут из контекста страницы, и использован отдельно в другом месте. Это может быть статья (полный тескт статьи или превью), пост на форуме, и т.п.</p><p>На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime="2015-09-30" или с указанием часов минут и секунд datetime="2015-09-30T15:25:55" . Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.</p><p> <main>
...
<!-- Статья -->
<article>
<!-- Шапка статьи если в шапке у нас больше чем заголовок -->
<header>
<!-- Заголовок статьи -->
<h1>Article title</h1>
<!-- Дата публикации статьи -->
<time datetime="2015-09-30T15:25:55" pubdate>30 Сентября</time>
</header>
<!-- Подзаголовок страницы -->
<h2>Article sub-title</h2>
<p>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?</p><p>Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.</p><h3>Сайдбар или колонка с виджетами</h3><p>Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:</p><p> <!-- Сайдбар -->
<div class="sidebar">
<!-- Виджет в сайдбаре -->
<aside>
<h1>Widget title</h1>
...
</aside>
<!-- Виджет в сайдбаре -->
<aside>
<h1>Последние записи</h1>
...
</aside>
<!-- Виджет в сайдбаре -->
<aside>
<h1>Популярные комментарии</h1>
...
</aside>
</div>
</p><h3>Тег section</h3><p>Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента <section> вне контекста самой страницы. Рекомендуется использовать теги (<h1> – <h6>) для обозначения темы секции.</p><p>В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег <section> . Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section , наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section , но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»</p><p>Пример использования тега section в списке с перечислением городов:</p><p> <h1>An Event Apart</h1>
<section>
<header>
<h2>Cities</h2>
</header>
<p>Join us in these cities in 2010.</p>
<section>
<header>
<h3>Seattle</h3>
</header>
<p>Follow the yellow brick road.</p>
<section>
<header>
<h3>Boston</h3>
</header>
<p>That"s Beantown to its friends.</p>
<section>
<header>
<h3>Minneapolis</h3>
</header>
<p>It"s so <em>nice</em>.</p>
<small>Accommodation not provided.</small>
</p><h3>Подвал сайта — Footer</h3><p>Подвал сайта оформляется тегом <footer></p><p> <!-- Подвал сайта -->
<footer>
<p class="copyright">© 2015 сайт Copyright</p>
</footer>
</p><h3>Заключение</h3><p>Для проверки структуры страницы можно использовать инструмент HTML5 outliner . Он показывает структуру страницы блокам и заголовкам.</p><p>Семантика в HTML5 не ограничивается приведенными выше в статье тегами. Но используя приведенные примеры вы можете освежить свою разметку, и сделать сайт более дружелюбным к поисковым системам, что скажется на более высоком рейтинге сайта в поисковой выдаче.</p><p>В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org</p><p><b>Важное замечание по использованию HTML5 тегов.
</b> В спецификации не указаны жесткие правила по использованию семантических тегов, указаны лишь рекомендации п их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег использовать, лучше используйте div — чтобы не навредить и не нарушить структуру документа.</p><p><b>Статьи и материалы</b></p>
<p>Здравствуйте! В этом уроке вы НЕ найдете для себя ничего полезного, если УЖЕ знакомы с формированием структуры HTML документа. Для тех, кто НЕ знаком, я покажу правильную (валидную) структуру HTML веб-документа, в том числе для сайта WordPress.</p>
<h2>Общая правильная структура HTML документа</h2>
<p>В первую очередь, без долгих предисловий – общая структура любого HTML документа должна быть такой:</p>
<!DOCTYPE html> /*Указывает тип текущего документа DTD*/
<html> /*Показывает начало документа*/
<head>/*Показывает начало заголовка (шапки)*/
<title>Test/*Показывает заголовок*/
/*Показывает начало заголовка*/
/*Показывает начало основной части документа (тело)*/
/*Содержательная часть документа*/
/*Показывает конец основной части документа*/
/*Показывает конец документа*/
Если убрать пояснения, которые я показывал после каждого тега, то простая структура HTML документа выглядит так
Test
Тип текущего документа DTD
Тип текущего документа (Document Type Definition, DTD
) необходим, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь язык HTML существует в нескольких версиях.
Кроме этого есть другие языки разметки отличные от HTML, например XHTML.
Примечание:
XHTML это EXtensible HyperText Markup Language, что переводим, как расширенный язык разметки гипертекста.
XHTML похож на HTML, но отличается синтаксисом. Чтобы браузер не путался языки и нужно показать ему в первой строке кода, тип текущего документа DOCTYPE .
Понятие тега в HTML
Вы обратили внимание, что вся структура HTML документа задается определенными тегами – некими словами, заключенными в угловые скобки.
Слово, заключенное в угловые скобки HTML документа называется тегом. Каждый тег имеет свой смысл, определенный правилами разметки.
- Тег означает заголовок html документа. В тегах head хранится информация для браузеров и поисковых систем. В том числе в виде мета-тегов;
- Тег означает основное содержание html документа. Именно текст, изображения, скрипты Java Script и т.д.;
- Тег [p] это блочный элемент, всегда начинается с новой строки. Он означает абзац основного содержания html документа.
Важно!
Все теги html разметки должны быть парными. То есть, открывающий тег <тег> , должен быть закрыт закрывающим тегом, с косой чертой .
Теги заголовков и подзаголовков h1-h6
Для улучшения структурирования текста документа, а также улучшения SEO веб-страниц, существуют дополнительные теги основного содержания. Они называются теги заголовков и подзаголовков от h1 до h6, всего 6 штук.
Они так же как теги [p] -обзаца, который, позволяет выделить смысловые участки текста, позволяют поделить текст на смысловые участи, дав каждому участку свой заголовок.
Теги h1
—h6
имеют подчиненную зависимость, нижний уровень этой подчинённости абзац.
Важно отметить, что нарушение подчиненной зависимости тегов h1
—h6
—p
не нарушит отображение и валидность документа, а лишь ухудшит его оптимизацию для поисковых систем.
Пример развитой структуры HTML документа
Приведу академический пример более развитой структуры HTML документа:
Test
Основной заголовок
Основной заголовок
Первый подзаголовок
Основной заголовок
Второй подзаголовок
Первый второстепенный подзаголовок
Структура HTML 5
В версии HTML 5 должна быть такая структура документа:
Это декларация которая показывает, что этот документ в HTML5
;
это корневой элемент HTML страницы;
Элемент, с мета-тегами о документе;
Этот элемент определяет заголовок для документа;</p>
<p><body> Этот элемент содержит видимое содержимое страницы;</p>
<p><h1> Элемент определяет большой заголовок</p>
<p><p>Элемент определяет абзац.</p>
<p>Работают в html5 теги h2 — h6</p>
<p><i>Все теги двойные. Начальный тег называется открывающим тегом, а конечный тег — закрывающим тегом.
</i></p>
<h2>HTML разметка на сайте WordPress</h2>
<p>Несмотря на то, что скрипт WordPress написан на php, все файлы сайта, а вернее все файлы рабочего шаблона сайта, имеют html разметку. Смотрим пример, на файле header.php шаблона <b>Twenty Seventeen
</b>:</p><p>
<?php
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo("charset"); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<?php _e("Skip to content", "twentyseventeen"); ?>
<header id="masthead" class="site-header" role="banner">
<?php get_template_part("template-parts/header/header", "image"); ?>
<?php if (has_nav_menu("top")) : ?>
<div class="navigation-top">
<div class="wrap">
<?php get_template_part("template-parts/navigation/navigation", "top"); ?>
</div><!-- .wrap -->
</div><!-- .navigation-top -->
<?php endif; ?>
</header><!-- #masthead -->
<?php
if ((is_single() || (is_page() && ! twentyseventeen_is_frontpage()))
&& has_post_thumbnail(get_queried_object_id())) :
echo "<div class="single-featured-image-header">";
echo get_the_post_thumbnail(get_queried_object_id(), "twentyseventeen-featured-image");
echo "</div><!-- .single-featured-image-header -->";
endif;
?>
<div class="site-content-contain">
<div id="content" class="site-content">
</p><p>Вы можете видеть, что если все функции WordPress размещены в классической HTML разметке. Есть тип документа: <!DOCTYPE html></p>
<p>Парные теги , </p>
<p>Открывающий тег .</p>
<p>Закрывающий тег можно найти в файле footer.php .</p>
<h2>Как посмотреть HTML код страницы сайта WordPress</h2>
<p>То, что вы пишите в редакторе сайта, создавая статьи или страницы, это лишь часть HTML страницы сайта. Это даже не всё тело (body) страницы.</p>
<p>Чтобы посмотреть HTML код страницы сайта WordPress, а это нужно очень часто, нужно:</p>
<p>Открыть страницу в браузере;</p>
<p>Перейти в английский шрифт клавиатуры;</p>
<p>Нажать следующие кнопки:</p>
<ul><li>Chrome: Ctrl+U</li>
<li>Opera: Ctrl+U</li>
<li>Mozilla: Ctrl+U</li>
</ul><p>Может быть, вы пока не знаете, зачем это нужно. Поверьте, это будет нужно не раз, для анализа своего сайта и возможно сайтов конкурентов.</p>
<h2>Вывод</h2>
<p>В заключении хотелось сделать вывод, но на ум приходит только мысль, что статья получилось, совсем для начинающих. Между примером кода статьи и примерами из реальных сайтов, на первый, взгляд большая разница. Однако у всех файлов одинаковая структура HTML документа и крайне важно эту структуру не нарушать при работе с сайтом.</p>
<i>
</i><p>Настало время рассмотреть на примере простейший HTML-документ. Мы напишем код, результатом работы которого является вывод в окне браузера фразы «Hello, world!» (в дословном переводе с англ. - «Здравствуй, мир!»). Обычно такая практика написания кода является первым опытом при изучении нового языка. Такая постановка задачи обращает внимание учащегося сразу на несколько ключевых моментов языка программирования (в нашем случае языка разметки), главным из которых является базовая структура программы (в нашем случае веб-страницы).</p>
<h2>doctype</h2>
<!DOCTYPE html>
<html>
</html>
<p>Это элемент также называют корневым, потому что все остальные элементы документа располагаются в нем. Корневой элемент может иметь только два дочерних элемента: <head> и <body>.</p>
<h2>Элемент head</h2>
<p>Элемент <head> является контейнером для других элементов, которые предоставляют информацию о документе, известную как метаданные. Эти метаданные сообщают браузеру о местонахождении внешних скриптов и таблиц стилей, устанавливая отношение между текущим документом и другими ресурсами, и могут предоставлять дополнительные данные, предназначенные для браузеров. Помимо обязательного элемента <title>, рассматриваемого далее в этой главе, браузеры не отображают никакие метаданные, находящиеся внутри элемента <head>.</p>
<p>Элемент <head> должен быть первым дочерним элементом <html>, никакое содержимое или элементы не должны располагаться перед ним:</p><p>
<!DOCTYPE html>
<html>
<head>
</head>
</html>
</p><h2>Элемент title</h2>
<p>Элемент <title> предоставляет текстовый заголовок для документа. Каждый HTML-документ должен иметь ровно один элемент <title>, который должен располагаться внутри элемента <head>:</p><p>
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна
Браузеры отображают содержимое элемента
как заголовок (имя) документа, который обычно отображается вверху окна браузера или в названии вкладки:</p>
<h2>Элемент body</h2>
<p>Элемент <body> является контейнером для всего содержимого веб-страницы. Все, что отображается в окне браузера и видит пользователь, содержится в нем (у каждого HTML-документа может быть только один элемент <body>). Его основная цель - отделить содержимое документа от метаданных:</p><p>
<!DOCTYPE html>
<html>
<head>
<title>Заголовок окна
