Всем привет! В этой статье мы рассмотрим, как правильно использовать теги div, section и article в HTML5 .
Помимо всем известного и очень часто используемого тега div , в HTML5 появились новые, семантические теги, которые позволяют более четко разделить контент на вашем сайте и тем самым помочь поисковым роботам в их нелегкой работе. Однако, к сожалению, многие верстальщики еще не научились их использовать правильно, особенно те, которые обозначены в начале статьи. Надеюсь, что после прочтения данной статьи вопросы по этому поводу, если и не пропадут совсем, то их станет, как минимум, меньше. Итак, приступим.
Div
Если вы откроете сайт W3C , то можете найти там рекомендацию, смысл которой заключается в том, что использовать данный тег нужно для семантически несвязанного между собой контента. Очень часто div используют для того, чтобы сгруппировать какой-нибудь контент, который затем нужно спозиционировать или как-то оформить с помощью css .
Section
Данный элемент используется, наоборот, для семантически связанного между собой контента. Содержимое такого тега должно обладать общей темой. К примеру, новости на новостном сайте:
Последние новости
...
Article
Этот элемент также должен обладать общей темой и содержать семантически связанный между собой контент, однако этот самый контент должен быть автономен, т.е. вы можете взять отдельный article , убрать его со страницы, но при этом смысл содержимого внутри него не потеряется. Все на том же примере новостного сайта можно сказать, что каждая отдельная новость будет выделена тегом article , т.к., если изолировать ее со страницы, она не потеряет смысл, но все новости вместе будут обрамлены тегом section , т.к. это отдельный большой блок с общей темой, и он не может быть изолирован. Согласитесь, если мы оставим на странице просто блок с новостями, он будет "не к месту", а если оставим одну конкретную новость, то все будет вполне логично.
Конечно, все зависит от конкретной ситуации, но чаще всего вы можете разметить свою страницу правильно, используя следующее правило: если контент семантически связан между собой и может быть изолирован со страницы без потери смысла, то используйте article . Если не может быть изолирован со страницы без потери смысла, используйте section . В остальных случаях – div .
Итак, на этом все. Надеюсь, что данная тема вам ясна и теперь вы будете размечать ваши интернет-странички грамотно. Спасибо за внимание и удачи!
Сколько бы мы не использовали PHP, всё равно всплывают некоторые функции, о которых мы даже не слышали. Некоторые из них были бы нам очень полезны. Я создал небольшой список полезных функций, которые должны быть в арсенале каждого PHP программиста.
1. Создание функций с переменным числом аргументов
Скорее всего, вы уже знаете, что PHP позволяет нам создавать функции с необязательными аргументами. Сейчас я покажу функцию, в которой число аргументов может меняться от случая к случаю.
Но для начала, вспомним как мы создаём функции обычным образом:
// функция с двумя необязательными параметрами function foo($arg1 = "", $arg2 = "") { echo "arg1: $arg1\n"; echo "arg2: $arg2\n"; } foo("hello","world"); /* выведет: arg1: hello arg2: world */ foo(); /* выведет: arg1: arg2: */
Теперь посмотрим на то, как можно написать функцию с неограниченным количеством аргументов. Для этого будет использовать метод func_get_args() :
// не указываем аргументы function foo() { // возвращает массив, переданных аргументов $args = func_get_args(); foreach ($args as $k => $v) { echo "arg".($k+1).": $v\n"; } } foo(); /* ничего не выведет */ foo("hello"); /* выведет arg1: hello */ foo("hello", "world", "again"); /* выведет arg1: hello arg2: world arg3: again */
2. Используем Glob() для поиска файлов
Часто названия функций говорят сами за себя. Такого нельзя сказать о функции glob() .
Если не вдаваться в подробности, её функциональность схожа с методом scandir() . Она позволяет найти необходимый файл по шаблону:
// найти все php файлы $files = glob("*.php"); print_r($files); /* выведет: Array ( => phptest.php => pi.php => post_output.php => test.php) */
Для нахождения файлов нескольких типов надо писать так:
// найти все php и txt файлы $files = glob("*.{php,txt}", GLOB_BRACE); print_r($files); /* на выходе: Array ( => phptest.php => pi.php => post_output.php => test.php => log.txt => test.txt) */
Так же можно в шаблоне указать путь:
$files = glob("../images/a*.jpg"); print_r($files); /* на выходе: Array ( => ../images/apple.jpg => ../images/art.jpg) */
Для того чтобы получить полный путь к документу используйте метод realpath() :
$files = glob("../images/a*.jpg"); // Применить функцию "realpath" к каждому элементу массива $files = array_map("realpath",$files); print_r($files); /* выведет: Array ( => C:\wamp\www\images\apple.jpg => C:\wamp\www\images\art.jpg) */
3. Информация об используемой памяти
Если вы будете отслеживать количество памяти, которое съедается на работу ваших скриптов то, наверное, чаще будете их оптимизировать.
В PHP существует мощный инструмент отслеживания используемой памяти. В разных частях скрипта нагрузки могут быть разные. Для того чтобы получить значение используемой памяти в данный момент, нам следует использовать метод memory_get_usage() . Для фиксации максимального количества используемой памяти используем memory_get_peak_usage()
Echo "Initial: ".memory_get_usage()." bytes \n"; /* Initial: 361400 bytes */ // дадим небольшую нагрузку for ($i = 0; $i < 100000; $i++) { $array = md5($i); } // и ещё for ($i = 0; $i < 100000; $i++) { unset($array[$i]); } echo "Final: ".memory_get_usage()." bytes \n"; /* Final: 885912 bytes */ echo "Peak: ".memory_get_peak_usage()." bytes \n"; /* Peak: 13687072 bytes */
4. Информация о процессоре
Для этого необходимо использовать метод getrusage() . Но учтите, что на Windows эта функция работать не будет.
Print_r(getrusage()); /* prints Array ( => 0 => 0 => 2 => 3 => 12692 => 764 => 3864 => 94 => 0 => 1 => 67 => 4 => 0 => 0 => 0 => 6269 => 0) */
Картина, изложенная выше, будет понятно тем, у кого есть опыт в системном администрировании. Для всех остальных предлагаем расшифровку:
- ru_oublock: количество операций блочной записи
- ru_inblock: количество операций блочного чтения
- ru_msgsnd: количество отправленных сообщений
- ru_msgrcv: количество принятых сообщений
- ru_maxrss: максимальный размер невыгружаемого набора
- ru_ixrss: общий объем разделяемой памяти
- ru_idrss: общий объем неразделяемых данных
- ru_minflt: количество используемых страниц памяти
- ru_majflt: количество ошибок отсутствия страниц
- ru_nsignals: количество принятых сигналов
- ru_nvcsw: количество переключений контекста процессом
- ru_nivcsw: количество принудительных переключений контекста
- ru_nswap: количество обращений к диску при подкачке страниц
- ru_utime.tv_usec: время работы в пользовательском режиме (микросекунды)
- ru_utime.tv_sec: время работы в пользовательском режиме (секунды)
- ru_stime.tv_usec: время работы в привилегированном режиме (микросекунды)
- ru_stime.tv_sec: время работы в привилегированном режиме (секунды)
Для того чтобы узнать какие ресурсы вашего процессора используются скриптом, вам необходимо значение ‘user time’ (время работы в пользовательском режиме) и ’system time’ (время работы в привилегированном режиме). Вы можете получить результат как в секундах, так и в микросекундах. Для того чтобы превратить общее количество секунд в десятичное число, вам необходимо разделить значение микросекунд на 1 миллион и добавить к значению секунд.
Запутанно как-то. Вот пример:
// отдыхаем 3 секунды sleep(3); $data = getrusage(); echo "User time: ". ($data["ru_utime.tv_sec"] + $data["ru_utime.tv_usec"] / 1000000); echo "System time: ". ($data["ru_stime.tv_sec"] + $data["ru_stime.tv_usec"] / 1000000); /* выводит User time: 0.011552 System time: 0 */
Хотя выполнение скрипта заняло около 3-х секунд, процессор не был сильно нагружен. Дело в том, что при вызове (sleep) скрипт практически не потребляет ресурсов процессора. Вообще существует множество задач, которые занимают значительное время, но при этом не используют процессор. К примеру, ожидание операций связанных с диском. Так что вы не всегда используете процессорное время в своих скриптах.
Вот ещё пример:
// пройтись 10 миллионов раз for($i=0;$i<10000000;$i++) { } $data = getrusage(); echo "User time: ". ($data["ru_utime.tv_sec"] + $data["ru_utime.tv_usec"] / 1000000); echo "System time: ". ($data["ru_stime.tv_sec"] + $data["ru_stime.tv_usec"] / 1000000); /* выводит User time: 1.424592 System time: 0.004204 */
Работа скрипта заняла 1.4 секунды процессорного времени. В данном случае, время системных вызовов вообще низкое.
Время работы в привилегированном режиме (System Time) - это время, которое процессор затрачивает на выполнение системных запросов к ядру от имени программы. Пример:
$start = microtime(true); // вызываем microtime каждые 3 секунды while(microtime(true) - $start < 3) { } $data = getrusage(); echo "User time: ". ($data["ru_utime.tv_sec"] + $data["ru_utime.tv_usec"] / 1000000); echo "System time: ". ($data["ru_stime.tv_sec"] + $data["ru_stime.tv_usec"] / 1000000); /* выводит User time: 1.088171 System time: 1.675315 */
Теперь системного времени затратилось намного больше, чем в прошлом примере. Всё благодаря методу microtime(), который использует ресурсы системы.
Однако следует отметить, что выведенное время может быть не точным, т.к. в данный момент времени ресурсы процессора используются и другими программами, что в результате может дать небольшую погрешность.
5. Магические константы
В PHP существует множество магических констант, таких как номер текущей строки (__LINE__), путь к файлу (__FILE__), путь к каталогу (__DIR__), имя функции (__FUNCTION__), имя класса (__CLASS__), имя метода (__METHOD__) и пространства имён (__NAMESPACE__).
Все мы их рассматривать не будем. Посмотрим только лишь парочку:
// этот скрипт зависит от текущего расположения файла и // может вызвать проблемы, если его использовать из разных дирректорий require_once("config/database.php"); // этот скрипт не вызовет проблем require_once(dirname(__FILE__) . "/config/database.php");
Используйте __LINE__ при отладке скриптов:
// код // ... my_debug("some debug message", __LINE__); /* выведет Line 4: some debug message */ // ещё код // ... my_debug("another debug message", __LINE__); /* выведет Line 11: another debug message */ function my_debug($msg, $line) { echo "Line $line: $msg\n"; }
6. Генерирование уникальных ID
Бывают такие моменты, когда вам надо сгенерировать уникальную строку. Множество раз я видел, что для решения этой задачи используют функцию md5():
// генерируем случайную строку echo md5(time() . mt_rand(1,1000000));
Но на самом деле для этих целей в PHP есть специальная функция uniqid()
// генерируем случайную строку echo uniqid(); /* выведет 4bd67c947233e */ // ещё разок echo uniqid(); /* выведет 4bd67c9472340 */
Невооружённым взглядом можно заметить, что первые символы мягко говоря схожи… Так происходит из-за того, что данный метод использует время сервера для генерации символов. Это даже полезно, т.к. все сгенерированные значения получаются в алфавитном порядке, что даёт возможность быстро их сортировать.
Для того чтобы уменьшить шансы получения дубликата, мы можем добавить префикс или использовать второй параметр (увеличит количество символов):
// с префиксом echo uniqid("foo_"); /* выведет foo_4bd67d6cd8b8f */ // со вторым параметром echo uniqid("",true); /* выведет 4bd67d6cd8b926.12135106 */ // оба echo uniqid("bar_",true); /* выведет bar_4bd67da367b650.43684647 */
Этот метод генерирует строки размером меньше, чем md5, тем самым вы сможете сэкономить место.
7. Сериализация
Вам когда-нибудь приходилось хранить комплексные данные в базе или в файле? Для того чтобы сконвертировать объект в строку в PHP предусмотрена специальная функция.
Вообще говоря, этих методов 2: serialize() и unserialize()
// сложный массив $myvar = array("hello", 42, array(1,"two"), "apple"); // конвертируем в строку $string = serialize($myvar); echo $string; /* выведет a:4:{i:0;s:5:"hello";i:1;i:42;i:2;a:2:{i:0;i:1;i:1;s:3:"two";}i:3;s:5:"apple";} */ // получаем исходное значение $newvar = unserialize($string); print_r($newvar); /* выведет Array ( => hello => 42 => Array ( => 1 => two) => apple) */
Вот так вот работают эти функции. Однако из-за бурного роста популярности JSON, в PHP 5.2 были добавлены 2 метода json_encode() и json_decode(). Их работа схожа с serialize():
// сложные массив $myvar = array("hello", 42, array(1,"two"), "apple"); // конвертируем в строку $string = json_encode($myvar); echo $string; /* выведет ["hello",42,,"apple"] */ // восстанавливаем исходное значение $newvar = json_decode($string); print_r($newvar); /* prints Array ( => hello => 42 => Array ( => 1 => two) => apple) */
Этот вариант более компактный и совместимый с другими языками, такими как JavaScript. Однако при работе с очень навороченными объектами может возникнуть потеря данных.
8. Сжатие строк
Кода мы говорим о сжатии, то на ум сразу же приходят архивные файлы в формате ZIP. PHP предоставляет возможность сжатия длинных строк без всяких файлов.
В следующем примере продемонстрируем работу функций gzcompress() и gzuncompress() :
$string = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut elit id mi ultricies adipiscing. Nulla facilisi. Praesent pulvinar, sapien vel feugiat vestibulum, nulla dui pretium orci, non ultricies elit lacus quis ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium ullamcorper urna quis iaculis. Etiam ac massa sed turpis tempor luctus. Curabitur sed nibh eu elit mollis congue. Praesent ipsum diam, consectetur vitae ornare a, aliquam a nunc. In id magna pellentesque tellus posuere adipiscing. Sed non mi metus, at lacinia augue. Sed magna nisi, ornare in mollis in, mollis sed nunc. Etiam at justo in leo congue mollis. Nullam in neque eget metus hendrerit scelerisque eu non enim. Ut malesuada lacus eu nulla bibendum id euismod urna sodales. "; $compressed = gzcompress($string); echo "Original size: ". strlen($string)."\n"; /* выведет Original size: 800 */ echo "Compressed size: ". strlen($compressed)."\n"; /* выведет Compressed size: 418 */ // возвращаем $original = gzuncompress($compressed);
В наших силах уменьшить объём текста на 50%. В этих же целях можно использовать методы gzencode() и gzdecode(), которые используют другой алгоритм сжатия.
9. Выполнить перед завершением
В PHP существует функция register_shutdown_function() , которая позволит вам выполнить какой-то код перед завершением работы скрипта.
Допустим, вы хотите узнать какую-то информацию… Время работы скрипта:
// получаем время начала $start_time = microtime(true); // какие-то операции // ... // выводим время работы echo "execution took: ". (microtime(true) - $start_time). " seconds.";
На первый взгляд это может показаться тривиальной задачей. Для этих целей, вы можете поместить код в конце файла. Однако если перед этим где-то сработает функция exit(), этот код никогда не сработает. Так же, он не сработает если на странице будет ошибка или пользователь прервёт загрузку страницы (нажав на соответствующую кнопку в своём браузере);
При использовании метода register_shutdown_function() код выполнится в любом случае:
$start_time = microtime(true); register_shutdown_function("my_shutdown"); function my_shutdown() { global $start_time; echo "execution took: ". (microtime(true) - $start_time). " seconds."; }
Вывод
PHP это целая планета, которая не перестаёт нас удивлять своим содержимым. А что думаете вы о данных функциях?
Статья, в которой рассматривается HTML-элемент section из категории sectioning.
Назначение элемента section
Элемент section используется для создания секции в документе, которая группирует некоторый тематический контент вместе. Для каждой секции в документе следует указывать её название (тему). Это, как правило, осуществляется с помощью заголовков (элементов h1 - h6).
Содержимое секции…Заголовок секции
Элементы section , обычно применяются в следующих случаях:
- для разметки разделов внутри секции. Например, для разметки глав в статье, вкладок в диалоговом окне, разделов в диссертации и т.п.
- для группировки нескольких секций в одну тематическую группу. Например, для группировки последних новостей на сайте, комментариев к статье и т.п.
Таким образом, элемент section стоит применять для некоторого контента только в том случае, если он имеет заголовок и является частью чего-то другого.
Применение элемента section
Например, рассмотрим фрагмент кода страницы, содержащий статью с комментариями. Каждый из комментариев, оставленных пользователем на странице, содержит некоторый завершенный контент и, следовательно, может рассматриваться как элемент article . Но, в тоже время все комментарии представляют некоторую тематическую группу, и следовательно их можно поместить в элемент section , т.е. данный элемент сгруппирует все эти комментарии на странице вместе.
Название статьи
Комментарии
Заголовок комментария
Заголовок комментария
Название статьи Комментарии Заголовок комментария Заголовок комментария
Например, рассмотрим применение элементов section для создания разделов внутри элемента article:
Название книги
Первая глава
Вторая глава
Третья глава
Приложение A
Приложение B
Вышеприведенный пример будет иметь следующую структуру (outline):
Название книги Первая глава Вторая глава Третья глава Приложение A Приложение B
Ограничения при использовании элемента section
Элемент section в HTML 5 не является универсальным элементом для группировки содержимого, т.е. его не следует использовать для оборачивания любого понравившегося контента. Его основное назначение это добавление семантики в документ и создание его структуры (outline).
Когда автору необходимо сгруппировать контент, только для того, чтобы применить к нему стили или поработать с ним в сценарии JavaScript, ему в этом случае лучше всего будет воспользоваться элементом div . Элемент div в отличие от элемента section , не добавляет семантики в документ и не участвует в создании его структуры (outline).
Отличие между элементами section и article
Элементы section и article хоть и кажутся на первый взгляд очень похожими, но имеют различное семантическое значение. Элемент article предназначен для группирования контента, который представляет собой нечто завершённое, самостоятельное и которое может рассматриваться отдельно от остального содержимого страницы. А элемент section несёт в себе другой семантический смысл, он предназначен для группировки контента, который является составной частью чего-то другого.
Но как автору узнать, что собой представляет некоторый контент на странице? Давайте рассмотрим это на примере фрагмента статьи. Фрагмент - это часть статьи и, следовательно, для группировки его контента необходимо применять элемент section . Но этот же фрагмент, уже оставленный в качестве комментария, будет представлять собой нечто целое, завершенное. Следовательно, в этом контексте для его группировки можно использовать элемент article . Но рассуждать, конечно, можно и наоборот. Поэтому, какой элемент использовать для группировки контента, в большинстве случаев зависит от вашего субъективного мнения как автора. Но самое главное в этом подходе поддерживаться выбранной позиции. Поэтому чем автор будет более последовательным в создании структуры, тем он сможет больше смысла в неё вложить.
). Каждый тэг {section} должен иметь пару {/section} . Обязательными параметрами являются name и loop . Имя цикла {section} может быть любым, состоящим из букв, цифр и знаков подчеркивания. Циклы {section} могут быть вложенными и имена вложенных {section} должны быть уникакльными между собой. Переменная loop (обычно - массив значений) определяет количество итераций цикла. При печати переменных внутри секции, имя секции должно быть указано рядом с именем переменной внутри квадратных скобок . {sectionelse} выполняется в том случае, если параметр loop не содержит значений.
| Имя атрибута | Тип | Обязателен | По умолчанию | Описание |
|---|---|---|---|---|
| name | string | Да | n/a | Название секции |
| loop | mixed | Да | n/a | Значение, определяющее количество итераций цикла. |
| start | integer | Нет | 0 | Индекс позиции, с которой будет начинаться цикл. Если значение отрицательное, то начальная позиция вычисляется от конца массива. Например, если в переменной цикла 7 элементов и значение атрибута start равно -2, то начальный индекс будет 5. Неверные значения (значения, вне массива) автоматически обрезаются до ближайшего верного значения. |
| step | integer | Нет | 1 | Значение шага, которое используется для прохода по массиву. Например, step=2 указывает обход массива по элементам 0,2,4... Если шаг отрицателен, то обход массива будет производится в обратном направлении. |
| max | integer | Нет | 1 | Максимальное количество итераций цикла. |
| show | boolean | Нет | true | Указывает, показывать или нет эту секцию |
Note
Начиная с версии Smarty 1.5.0, синтаксис переменных свойств сессий был изменен с {%sectionname.varname%} на {$smarty.section.sectionname.varname}. Старый синтаксис всё ещё поддерживается, но вы увидите лишь примеры нового синтаксиса.
index используется для отображения текущего индекса массива, начиная с нуля (или с атрибута start, если он был указан) и увеличиваясь на единицу (или на значение атрибута step, если он был указан).
Техническое Замечание
Если атрибуты step и start не указаны, то index аналогичен атрибуту секции iteration, кроме того, что начинается с 0, а не с 1.
iteration используется для отображения текущего номера итерации цикла.
Note
Это значение не зависит от свойств start, step и max, в отличие от свойства index . Кроме того, итерации начинаются с единицы, а не с нуля, как индексы. rownum - это синоним к свойству iteration, они работают одинаково.
Example 7.38. свойство {section} iteration
assign("custid",$id);
?>
{section name=cu loop=$custid start=5 step=2}
iteration={$smarty.section.cu.iteration}
index={$smarty.section.cu.index}
id={$custid}
{/section}
Результат выполнения данного примера:
Iteration=1 index=5 id=3005
iteration=2 index=7 id=3007
iteration=3 index=9 id=3009
iteration=4 index=11 id=3011
iteration=5 index=13 id=3013
iteration=6 index=15 id=3015
Этот пример использует свойство iteration для вывода заголовка таблицы через каждые пять строчек (использует {if} с оператором mod - остаток от деления).
| Name> | Home | Cell | ||
|---|---|---|---|---|
| view | {$contacts.name} | {$contacts.home} | {$contacts.cell} | {$contacts.email} |
HTML5 предлагает набор секционных элементов, используя которые в своей разметке вы добавляете смысловую или семантическую нагрузку своим страницам, тем самым позволяя компьютерным программам лучше понимать их содержание.
Прочитав этот пост, вы научитесь применять секционные элементы на ваших веб-сайтах. Я постараюсь объяснить, в каких случаях лучше использовать тот или иной элемент и когда лучше прибегнуть к старому доброму.
Давайте начнем.
Элемент main
Элемент должен содержать главный контент вашей вебстраницы. Причем, все содержимое должно быть уникально на странице и не должно отображаться где-либо еще на сайте.Повторяющийся на нескольких страницах контент (логотип, окно поиска, ссылки в футере и т.д.) не следует помещать внутри элемента.
Ниже приводится пример представления главного содержимого страницы.
Гитары
Величайшие гитары современности
Gibson SG
Fender Telecaster
Примечание: Мы использовали атрибут роли ARIA role=”main”, здесь он указывает на важность этого элемента тем программам, которые еще не поддерживают элемент (например, некоторые скринридеры).
Можно использовать только один элемент на странице, который нельзя помещать внутри элементов, или.
Элемент article
Элемент должен содержать часть самодостаточной информации, которая может быть вырвана из контекста всей страницы без потери смысла. Это могут быть: новость, статья в блоге, комментарии пользователя.
Название статьи
Вы можете вкладывать элементы один в другой. Это будет означать, что вложенные элементы связаны с внешним элементом.
Это была интересная статья Как ты связываешь это с мировым превосходством? Название статьи
Комментарии
В этом примере мы использовали элемент, чтобы выделить саму статью и каждый комментарий к ней. Такая схема вложенности позволяет отнести комментарии к тексту статьи.
Элемент section
Элемент используется для представления секции (группы) связанного контента. Его применение похоже на с главным отличием, что допускается отсутствие смысла содержимого внутри элемента вне контекста самой страницы.Рекомендуется использовать теги (
– )
для обозначения темы секции.
В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег.
Как использовать секционные элементы HTML5
Элемент main
Элемент article
Элемент section
...
Если вы хотите сгруппировать контент для последующей стилизации, в этом случае нужно использовать элемент вместо.
Элемент nav
Элемент используется для разметки группы ссылок на внешние страницы или разделы внутри текущей страницы. Он хорошо подходит как для основной навигации по сайту, так и по оглавлению или постам.
Разметка ссылок как списка упрощает навигацию, хотя и не требуется при использовании элемента.
Элемент aside
Элемент используется для выделения содержания, непосредственно связанного с окружающим контентом, но которое может рассматриваться и отдельно. Это могут быть боковые сноски (как в книгах), группы элементов, цифры или цитаты.
Компания Google покупает Nest
В этом примере мы использовали элемент, чтобы выделить информацию о компании Google в новостной статье. Эта информация может быть полезна читателю, но не связана напрямую с новостью.
Элемент header
Элемент используется для представления вводной части к статье или веб-странице. Обычно он содержит заглавие или какие-либо метаданные, относящиеся к данному контенту, например, дата публикации статьи или оглавление (внутри элемента) для более длинного документа.Элемент будет связан с ближайшим секционным элементом, обычно это прямой родитель в структуре страницы.
Компания Google покупает Nest
В этом примере элемент содержит заголовок и дату публикации новостной статьи.
Элемент footer
Элемент используется для представления такой информации о разделе, как автор, авторские права, ссылки на связанные веб-страницы.
Так же как, элемент связан с ближайшим секционным элементом.
Элемент address
Элемент один из самых неправильно используемых элементов в HTML. Этот элемент предназначен не для разметки почтового адреса, а для представления контактной информации по статье или веб-странице. Это могут быть ссылки на сайт автора или его электронный адрес.Контакты Matt West
Этот элемент часто используется внутри элемента, который в свою очередь располагается внутри элемента.
Компания Google покупает Nest
Заключение
В этом посте вы узнали как использовать секционные элементы HTML5 для разметки веб-страниц. Использование таких элементов имеет ряд преимуществ.Одно из самых больших – это придание семантического значения определенным областям вашей веб-страницы, позволяющего компьютерным программам (скринридерам) идентифицировать ключевые элементы содержания и навигации.
Примечание: Пока еще не все скринридеры имеют поддержку семантических элементов. Чтобы обезопасить себя, вы можете продолжать использовать роли