Теги разметки страницы

Типы макетов

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

• фиксированные (статические, имеющие фиксированную ширину),
• резиновые (проценты),
• эластичные (em),
• адаптивные,
• комбинированные.

Адаптивный

Адаптивная вёрстка/тип макета — дизайн, который подстраивается (адаптируется) под размер экрана, в том числе может происходить перестройка блоков с одного места на другое, или их замена блоками отображаемыми только при определённом разрешении. Адаптивная вёрстка пришла на смену идеи создания специальных мобильных версий сайта, «живущих» на отдельных поддоменах (например, m.wikipedia.org).

Адаптивная вёрстка

Преимущества:

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

Недостатки:

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

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

Разметка страницы

По принципам использования средств разметки HTML различают логическую разметку и презентационную (физическую).

Например, курсивный текст можно получить как с помощью тега <i>, так и с помощью тега <em>.

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

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

Преимуществом второго подхода является независимость вёрстки от используемого типа устройств и дизайна веб-страниц.

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

Открытие ссылок в новом окне

Чтобы создать ссылку, открывающую страницу в новом окне браузера, вы можете воспользоваться атрибутом target открывающего тега элемента <a>. Значение этого атрибута должно быть установлено _blank. Чаще всего ссылки данного вида ставятся, если они перебрасывают посетителя на сторонний сайт. В этом случае создатели сайтов надеются, что посетитель вернется на их сайт по завершении просмотра открывшейся страницы, так как в этом случае ваш сайт остается открытым в исходном окне посетителя и не дает ему забыть о вас. Одни пользователи любят средство отображения в отдельном окне, а у других новые окна могут вызывать скорее чувство раздражения, чем комфорта. Поэтому пользуйтесь этим приемом экономно, лишь к некоторым ссылкам и, при этом, будет не лишним заранее предупредить посетителя, что страница откроется в новом окне.

В следующем примере показано как создать ссылку, открывающую страницу в новом окне браузера:

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

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

Атрибут target может принимать следующие значения:

Значение	Описание
_blank	Открыть страницу в новом окне или вкладке.
_self	Открыть страницу в том же окне (это значение задается по умолчанию).
_parent	Используется при работе с фреймами и позволяет открыть страницу в родительском фрейме; если на текущей странице нет фреймов, то это значение работает как _self.
_top	Применяется при работе с фреймами и позволяет открыть страницу в полном окне браузера, заменяя собой все фреймы, которые были на странице; если на текущей странице нет фреймов, то это значение работает как _self.
framename	Открыть страницу в новом окне с именем framename.

Semantic Elements in HTML

Below is a list of some of the semantic elements in HTML.

Tag	Description
<article>	Defines independent, self-contained content
<aside>	Defines content aside from the page content
<details>	Defines additional details that the user can view or hide
<figcaption>	Defines a caption for a <figure> element
<figure>	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>	Defines a footer for a document or section
<header>	Specifies a header for a document or section
<main>	Specifies the main content of a document
<mark>	Defines marked/highlighted text
<nav>	Defines navigation links
<section>	Defines a section in a document
<summary>	Defines a visible heading for a <details> element
<time>	Defines a date/time

For a complete list of all available HTML tags, visit our HTML Tag Reference.

❮ Previous
Next ❯

WAI-ARIA

WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications) является спецификацией, которая помогает сделать веб-страницы и приложения более доступными для людей с ограниченными возможностями. В частности, WAI-ARIA помогает определить роли (что блоки содержимого делают), состояния (как блоки содержимого настроены), а также дополнительные свойства для поддержки вспомогательных технологий.

Роли

Установка ролей WAI-ARIA осуществляется с помощью атрибута role. Эти роли затем указывают, что определённые элементы и блоки содержимого делают на странице.

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

Роли структуры документа

• article
• columnheader
• definition
• directory
• document
• group
• heading
• img
• list
• listitem
• math
• note
• presentation
• region
• row
• rowheader
• separator
• toolbar

Ориентиры

• application
• banner
• complementary
• contentinfo
• form
• main
• navigation
• search

HTML5 представил несколько новых структурных элементов, которые обычно соответствуют ролям структуры документа и ориентирам. Как именно эти роли совпадают в отношении конкретных элементов можно увидеть ниже

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

Элемент	Предполагаемая роль	Допустимые роли
<article>	article	application, article, document или main
<aside>	complementary	complementary, note или search
<footer>	—	contentinfo (один раз на страницу)
<header>	—	banner (один раз на страницу)
<nav>	navigation	navigation
<section>	region	alert, alertdialog, application,contentinfo, dialog, document, log, main,marquee, region, search или status

Комбинация элементов с их согласованными ролями в HTML5 будет выглядеть как в следующем фрагменте кода.

Состояния и свойства

В сочетании с ролями WAI-ARIA существуют также состояния и свойства, которые помогают информировать вспомогательные технологии, как настроено содержимое. Подобно ролям, состояния и свойства разбиты на четыре категории, в том числе атрибуты виджета, атрибуты живого региона, атрибуты drag-and-drop и атрибуты отношений.

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

HTML5 и СЕО

Одно из ключевых особенностей HTML5 и на мой взгляд самое важное — это разделение поисковым роботом всех блоков по их значимости, т.е. сегментация веб-страниц

В html4 сделать это  было невозможно, т.к. стандартный тег div не добавляет смысловой значимости элементу, который находится внутри данного тега. С использованием новых элементов header, article, aside, footer все меняется. Т.е. грубо говоря, они «говорят» поисковым роботам каким элементам придавать значение, а какие пропускать. Например, поисковый бот легко поймет, что информация, заключенная между тегами является копирайтом и подобной информацией для посетителя.

Элементы, влияющие на индексацию в поисковых системах

<article>

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

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

<section>

Элемент section разбивает всю разметку на различные секции. Что это дает? Поисковые роботы хорошо ориентируются на веб-странице, которая хорошо структурирована. Если правильно использовать тег <section>, то можно с легкостью построить информационную иерархию документа, а это в свою очередь улучшает индексацию сайта в целом.

<header>

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

<nav>

Данный тег определяет навигационную структуру на сайте.

Ссылки

В отличии от HTML4 в HTML5 ссылки имеют больше значимых атрибутов.

Вот основные атрибуты ссылок в HTML5:

alternate — ссылки на альтернативные адреса одной и той же страницы

author — ссылки, имеющие отношение к автору веб-страницы

external — ссылки, указывающие на внешние ресурсы

help — ссылки, ведущие на страницы помощи

next — ссылка ведущая на следующую часть страницы

nofollow — ссылка не подтверждается данным сайтом

prev — ссылка ведущая на предыдущую часть страницы

Остальные атрибуты можете посмотреть .

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

На этом все. Всем пока. Увидимся в следующих постах.

А вы уже перешли на HTML5?

The декларация

HTML документ должен содержать объявление <!DOCTYPE> на самой первой строчке. Объявление <!DOCTYPE> это — инструкция для веб-браузера о том, на какой версии HTML написана страница. Это непарный тег, то есть у него нет закрывающего тега. Текущая версия HTML 5 использует следующую декларацию:

<!DOCTYPE html>

Cуществует несколько видов DOCTYPE. Есть строгие виды (strict), которые работают на основе только определенных тегов, есть переходные (transitional), которые допускают возможность включения дополнительных тегов, есть такие, которые работают с фреймами (frameset).

В HTML 4.01 doctype ссылается на Document Type Definition (DTD описывает схему документа для конкретного языка разметки посредством набора объявлений), который основан на SGML. Есть 3 разных типа doctype в версии HTML 4.01.

HTML 4.01 Strict

Этот DTD содержит все элементы HTML и аттрибуты, но ИСКЛЮЧАЕТ устаревшие или стилевые элементы (например, тег font). Также в strict не допускается использование frameset (фреймов).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

Этот DTD содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. Frameset (фреймы) не допускаются.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

Этот DTD тоже содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. В отличие от HTML 4.01 Transitional, но он допускает использование frameset (фреймов).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

В версии HTML5 есть только один doctype и определяется он следующим образом:

<!DOCTYPE html>

Правила DOCTYPE HTML5 являются универсальными, включают в себя правила предыдущей версии, а также возможность работы с HTML 4 тегами и в какой-то степени с XHTML, и объединяют в себе возможности всех своих предшественников, адаптируя их для работы в новых браузерах.

По сравнению с прежними своими собратьями, DOCTYPE HTML5 не основан на SGML (стандартном обобщённом языке разметки), поэтому там нет тех данных, которые указывались до этого, а следовательно — в нем присутствует только короткая команда. И дальше уже идет сам документ.

При отсутствии тега <!DOCTYPE> разные Web-браузеры мо
гут по-разному отображать веб-страницу.

Весь текст HTML-документа расположен между тегами <html> и </html>. HTML-документ состоит из двух разделов — заголовка (между тегами <head> и </head> ) и содержательной части (между тегами <body> и </body> ).

Резюме

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

Ещё раз, в этом уроке мы рассмотрели следующее:

• Что такое семантика и почему она важна.
• Элементы <div> и <span> и разница между блочными и строчными элементами.
• Какие текстовые элементы лучше представляют содержимое страницы.
• Структурные элементы HTML5 и как определить структуру и организацию нашего содержимого и страницы.
• Как использовать гиперссылки для навигации между страницами или сайтами.

Надеюсь, вы начинаете чувствовать себя довольно уверенно с HTML. Осталось немного, что нам ещё следует изучить, но основа уже на месте. Далее мы глубже взглянем на CSS.

Структурная семантика

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

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

Скрытие содержимого

Время от времени вы пожелаете скрыть блок содержимого на странице, возможно, показывая или скрывая элемент в зависимости от статуса пользователя. К примеру, сообщение об успешном выполнении скрывается от пользователя, пока он не выполнит желаемое действие. Чаще всего это делается с помощью записи display: none. Хотя это действительно работает, но семантически некорректно.

Лучшим вариантом является применение логического атрибута hidden, который является глобальным атрибутом, доступным для всех элементов. Функционально он выполняется так же, как декларация CSS, но семантически представляет собой элемент, который должен быть скрыт или до поры до времени проигнорирован. Экранные читалки и другие устройства распознают атрибут, временно пропуская элемент, чего они не могут сделать с декларацией CSS.

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

HTML Element

The element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to
distribute it independently from the rest of the web site.

Examples of where an element can be used:

• Forum post
• Blog post
• Newspaper article

Example

Three articles with independent, self-contained content:

<article><h2>Google Chrome</h2><p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world’s most popular
web browser today!</p></article><article><h2>Mozilla
Firefox</h2><p>Mozilla Firefox is an open-source web browser developed
by Mozilla. Firefox has been the second most popular web browser since
January, 2018.</p></article><article><h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p></article>

Example 2

Use CSS to style the <article> element:

<html><head><style>.all-browsers {  margin: 0; 
padding: 5px;  background-color: lightgray;}.all-browsers
> h1, .browser {  margin: 10px;  padding: 5px;}
.browser {  background: white;}.browser > h2,
p {  margin: 4px;  font-size: 90%;}</style>
</head><body><article class=»all-browsers»>  <h1>Most
Popular Browsers</h1>  <article class=»browser»>   
<h2>Google Chrome</h2>    <p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world’s most popular web
browser today!</p>  </article>  <article class=»browser»>   
<h2>Mozilla Firefox</h2>    <p>Mozilla Firefox is an
open-source web browser developed by Mozilla. Firefox has been the second most
popular web browser since January, 2018.</p>  </article> 
<article class=»browser»>    <h2>Microsoft Edge</h2>   
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>  </article>
</article></body></html>

Как вырезать часть текста из строки функцией ЛЕВСИМВ в Excel?

Обзор семантики

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

Двигаясь вперед и представив новые элементы, мы поговорим о том, что эти элементы на самом деле означают и тип контента, который они представляют лучше. Прежде, чем мы это сделаем давайте рассмотрим два элемента — <div> и <span>, которые на деле не несут никакого семантического смысла. Они существуют только в целях стилизации.

История развития верстки веб-страниц

Тим Бернерс-Ли, работая в Европейском институте физики частиц придумал язык, который концентрировался не на средствах оформления, а на логике разметки текста. Некоторое время страницы оформлялись в так называемом «академическом дизайне», например, lib.ru.

С появлением браузера Netscape ситуация изменилась. Разработчики да браузера внедряли нестандартные для html теги, призванные улучшить внешний вид документа. Браузер был настолько распространённым, что нестандартные теги не вызывали беспокойств: нет смысла беспокоиться о том, что другие браузеры не поддерживают эти теги, когда только 10 % посетителей пользуется другими браузерами. Сайты перестали разрабатываться в «академическом» стиле. Над дизайном стали задумываться, а значит, потребовалась более сложная верстка.

С середины 1990-х MS Internet Explorer захватывал всё большую часть потребителей. Подходы разработчиков браузеров различались, отличался и набор поддерживаемых технологий. Всё это лишь добавляло неудобств для разработчиков сайтов — увеличивая время разработки сайта.

Во время борьбы за рынок на смену устаревающим и плохо поддерживающим стандарты Netscape 4 и Internet Explorer 4 (IE 4) пришли пятые версии браузеров. IE 5 должна была не просто исправить ошибки предшественника, а улучшить поддержку стандартов CSS. На этот шаг Майкрософт была обречена хотя бы потому, что вошла в группу W3C. В процессе разработки разница в отображении сайтов стала настолько значительной (а часть сайтов вовсе не работали), что разработчикам пришлось создать специальный «режим совместимости». В таком режиме браузер работал «по старинке». Для того, чтобы использовать режим поддержки стандартов необходимо было в html-код добавить элемент <!DOCTYPE>. Идея с режимом совместимости позднее перешла в остальные браузеры (например, Mozilla, Safari, Opera и т. д.). С развитием технологий разновидностей doctype оказалось слишком много, только к пятой версии html W3C предложили использовать короткую запись унифицировав стандарт.

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

В 1998 году появляется спецификация Cascading Style Sheets Level 2 (CSS2), а потом и CSS2.1, что позволило выносить код оформления блоков в отдельные файлы и использовать на всех страницах сайта и даже кэшировать этот файл, а значит ускорять загрузку страниц. Развитие этой технологии и поддержка со стороны браузеров привела к использованию блочной вёрстки, вместо таблиц.

Использование текстовых элементов

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

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

Заголовки

Заголовки являются блочными элементами и у них есть шесть разных рангов от <h1> до <h6>. Заголовки помогают быстро разбить содержимое и установить иерархию и они являются ключевыми идентификаторами для пользователей, читающих страницу. Заголовки также помогают поисковым системам индексировать и определять содержание на странице.

Заголовки должны быть использованы в порядке, соответствующему содержанию страницы. Основной заголовок страницы или раздела должен быть размечен с помощью элемента <h1>, а последующие заголовки должны использовать элементы <h2>, <h3>, <h4>, <h5> и <h6>, при необходимости.

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

Вот пример HTML для всех разных заголовков и результат отображения на веб-странице.

Абзацы

За заголовками часто следуют абзацы. Они определяются с помощью блочного элемента <p>. Абзацы могут следовать один за другим, добавляя информацию на страницу по необходимости. Вот пример того, как настроить абзацы.

Жирный текст

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

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

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

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

Вот два варианта HTML создания жирного текста в действии:

Курсивный текст

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

Элемент <em> применяется семантически чтобы сделать акцент на тексте, это наиболее популярный вариант для курсива. Другой вариант — это элемент <i>, он применяется семантически для передачи текста другим голосом или тоном, почти как если бы оно было заключено в кавычки. Опять же, нам нужно будет оценить значение текста, который мы хотим выделить курсивом, и выбрать соответствующий элемент.

Вот код HTML для курсива:

Демонстрация акцента и курсивного текста

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

Еще примеры

Пример

Используйте CSS для стилизации элемента <main>:

<html><head><style>main {  margin: 0; 
padding: 5px;  background-color: lightgray;}main
> h1, p, .browser {  margin: 10px;  padding: 5px;}
.browser {  background: white;}.browser > h2,
p {  margin: 4px;  font-size: 90%;}</style>
</head><body><main>  <h1>Самые популярные браузеры</h1>
  <p>Chrome, Firefox и Edge сегодня являются наиболее часто используемыми браузерами.</p>
  <article class=»browser»>    <h2>Google Chrome</h2>
    <p>Google Chrome — браузер, разработанный компанией Google и выпущенный в 2008 году.
Chrome — самый популярный браузер в мире на сегодняшний день!</p>  </article>
  <article class=»browser»>    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox — браузер с открытым исходным кодом, разработанный компанией Mozilla.
Firefox стал вторым по популярности браузером с января 2018 года.</p>
  </article>  <article class=»browser»>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge — браузер, разработанный компанией Microsoft и выпущенный в 2015 году.
Microsoft Edge заменил Internet Explorer.</p>  </article>
</main></body></html>

Save 30% on WPvivid

На практике

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

1. Мы начнём с превращения текста «Styles Conference» внутри <h1> в нашем элементе <header> в ссылку на страницу index.html. Поскольку мы уже на странице index.html это может показаться немного странным, что справедливо, но так как заголовок повторяется на других страницах, обратная ссылка на главную страницу будет иметь смысл.

2. Чтобы перемещаться по всем другим страницам мы собираемся добавить меню навигации с помощью элемента <nav> внутрь элемента <header>. Мы создадим страницы Спикеры, Расписание, Место проведения и Регистрация; чтобы переходить с нашей главной страницы, соответственно, должны сделать ссылки для всех них.

3. Давайте также для удобства добавим это же навигационное меню из элемента <header> в элемент <footer>.

4. Внутри элемента <section>, который описывает нашу конференцию, чуть ниже заголовка мы должны также включить ссылку для регистрации на конференцию. Размещение ссылки ниже абзаца будет работать отлично.

5. Мы не должны забыть добавить ссылки на другие страницы во все разделы с тизерами. Внутри каждого раздела, давайте обернём оба элемента <h3> и <h5> ссылкой, ведущей на соответствующую страницу.

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

6. Теперь нам нужно создать несколько новых страниц. Давайте сделаем файлы speakers.html, schedule.html, venue.html и register.html. Эти файлы должны располагаться в той же папке, что и файл index.html и поскольку мы держим их в той же папке, все наши ссылки должны работать, как и ожидалось.

   Чтобы гарантировать, что все наши страницы выглядят одинаково, убедитесь, что все эти новые файлы содержат такую же структуру документа что и файл index.html.

Официально мы больше не работаем с одной страницы, а работаем в действительности с полноценным сайтом.

Рис. 2.03. Наша страница после всех добавленных разных ссылок и навигации

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Просмотр сайта Styles Conference или Скачать исходный код