Html header navigation footer

HTML Semantic Elements

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: and — Tells nothing about its content.

Semantic Elements in HTML

In HTML there are some semantic elements that can be used to define different parts of a web page:

HTML Element

The element defines a section in a document.

According to W3C’s HTML documentation: «A section is a thematic grouping of content, typically with a heading.»

Examples of where a element can be used:

A web page could normally be split into sections for introduction, content, and contact information.

Example

Two sections in a document:

WWF

The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.

WWF’s Panda symbol

The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.

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 the element can be used:

• Forum posts
• Blog posts
• User comments
• Product cards
• Newspaper articles

Example

Three articles with independent, self-contained content:

Google Chrome

Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world’s most popular web browser today!

Mozilla Firefox

Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.

Microsoft Edge

Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.

Example 2

Use CSS to style the element:

.all-browsers > h1, .browser margin: 10px;
padding: 5px;
>

Most Popular Browsers

Google Chrome

Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world’s most popular web browser today!

Mozilla Firefox

Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.

Microsoft Edge

Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.

Nesting in or Vice Versa?

The element specifies independent, self-contained content.

The element defines section in a document.

Can we use the definitions to decide how to nest those elements? No, we cannot!

So, you will find HTML pages with elements containing elements, and elements containing elements.

HTML Element

The element represents a container for introductory content or a set of navigational links.

A element typically contains:

• one or more heading elements ( — )
• logo or icon
• authorship information

Note: You can have several elements in one HTML document. However, cannot be placed within a , or another element.

Example

What Does WWF Do?

WWF’s mission:

WWF’s mission is to stop the degradation of our planet’s natural environment,
and build a future in which humans live in harmony with nature.

HTML Element

The element defines a footer for a document or section.

A element typically contains:

• authorship information
• copyright information
• contact information
• sitemap
• back to top links
• related documents

You can have several elements in one document.

Example

A footer section in a document:

HTML Element

The element defines a set of navigation links.

Notice that NOT all links of a document should be inside a element. The element is intended only for major blocks of navigation links.

Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

Example

A set of navigation links:

HTML Element

The element defines some content aside from the content it is placed in (like a sidebar).

The content should be indirectly related to the surrounding content.

Example

Display some content aside from the content it is placed in:

My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!

Example 2

Use CSS to style the element:

My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!

My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!

My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!

HTML and Elements

The tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

The tag defines a caption for a element. The element can be placed as the first or as the last child of a element.

The element defines the actual image/illustration.

Example

Why Semantic Elements?

According to the W3C: «A semantic Web allows data to be shared and reused across applications, enterprises, and communities.»

Semantic Elements in HTML

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

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

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

Источник

Как использовать секционные элементы HTML5

Один славный малый Matt West c туманного альбиона, промышляющий фрилансом и предпринимательством, предложил нашему вниманию пост: «Как использовать секционные элементы HTML5».
Ниже приводится его перевод.

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

. 
Давайте начнем. 
 
 
Элемент main
 
Элемент должен содержать главный контент вашей вебстраницы. Причем, все содержимое должно быть уникально на странице и не должно отображаться где-либо еще на сайте. 
Повторяющийся на нескольких страницах контент (логотип, окно поиска, ссылки в футере и т.д.) не следует помещать внутри элемента . 
Ниже приводится пример представления главного содержимого страницы. 
 
  
Журнал Rocking Stone
  
 
Гитары
 
Величайшие гитары современности
 
Gibson SG
 
.
 
 
Fender Telecaster
 
.
 
 
  

Примечание: Мы использовали атрибут роли ARIA role=”main”, здесь он указывает на важность этого элемента тем программам, которые еще не поддерживают элемент (например, некоторые скринридеры).
Можно использовать только один элемент

 на странице, который нельзя помещать внутри элементов , , , или . 
 
Элемент article
 
Элемент должен содержать часть самодостаточной информации, которая может быть вырвана из контекста всей страницы без потери смысла. Это могут быть: новость, статья в блоге, комментарии пользователя. 
 
 
 
Название статьи
 
Опубликовано: 13 февраля 2014
 
 
.
 
 

 один в другой. Это будет означать, что вложенные элементы связаны с внешним элементом . 
 
 
 
 
Название статьи
 
Опубликовано: 13 февраля 2014
 
 
.
 
.
 
.
 
Комментарии
 
  
Это была интересная статья
 
 
  
Как ты связываешь это с мировым превосходством?
 
 
 
 

. 
 
Элемент aside
 
Элемент используется для выделения содержания, непосредственно связанного с окружающим контентом, но которое может рассматриваться и отдельно. Это могут быть боковые сноски (как в книгах), группы элементов , цифры или цитаты. 
 
 
 
Компания Google покупает Nest
 
Опубликовано: 13 января 2014
 
 
.
 
.
  
 

, чтобы выделить информацию о компании Google в новостной статье. Эта информация может быть полезна читателю, но не связана напрямую с новостью. 
 
Элемент header
 
Элемент используется для представления вводной части к статье или веб-странице. Обычно он содержит заглавие или какие-либо метаданные, относящиеся к данному контенту, например, дата публикации статьи или оглавление (внутри элемента ) для более длинного документа. 
Элемент будет связан с ближайшим секционным элементом, обычно это прямой родитель в структуре страницы. 
 
 
Компания Google покупает Nest
 
Опубликовано: 13 января 2014
 
 

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

, элемент связан с ближайшим секционным элементом. 
 
Элемент address
 
Элемент один из самых неправильно используемых элементов в HTML. Этот элемент предназначен не для разметки почтового адреса, а для представления контактной информации по статье или веб-странице. Это могут быть ссылки на сайт автора или его электронный адрес. 
 
 
Контакты Matt West 
 

, который в свою очередь располагается внутри элемента . 
 
 
 
Компания Google покупает Nest
 
Опубликовано: 13 января 2014
 
 
.
 
.
  
 

Заключение

В этом посте вы узнали как использовать секционные элементы HTML5 для разметки веб-страниц. Использование таких элементов имеет ряд преимуществ.
Одно из самых больших – это придание семантического значения определенным областям вашей веб-страницы, позволяющего компьютерным программам (скринридерам) идентифицировать ключевые элементы содержания и навигации.
Примечание: Пока еще не все скринридеры имеют поддержку семантических элементов. Чтобы обезопасить себя, вы можете продолжать использовать роли ARIA. Использование секционных элементов также помогает разработчикам больше задумываться о структуре своих веб-страниц.
Хотя выбор секционного элемента и очевиден, но он порождает важные вопросы о назначении и цели контента, а также, помогает понять, а относится ли вообще содержимое к этой странице?
Это пример того, как веб-стандарты помогают не только улучшить качество разметки, но и качество веб-страницы в целом.

Источник