Semantic tags in html

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.

Источник

Semantic HTML5 Elements Explained

Semantic HTML elements are those that clearly describe their meaning in a human- and machine-readable way.

Elements such as , and are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.

What are Semantic Elements?

HTML was originally created as a markup language to describe documents on the early internet. As the internet grew and was adopted by more people, its needs changed.

Where the internet was originally intended for sharing scientific documents, now people wanted to share other things as well. Very quickly, people started wanting to make the web look nicer.

Because the web was not initially built to be designed, programmers used different hacks to get things laid out in different ways. Rather than using the to describe information using a table, programmers would use them to position other elements on a page.

As the use of visually designed layouts progressed, programmers started to use a generic “non-semantic” tag like . They would often give these elements a class or id attribute to describe their purpose. For example, instead of this was often written as .

As HTML5 is still relatively new, this use of non-semantic elements is still very common on websites today.

List of new semantic elements

The semantic elements added in HTML5 are:

Elements such as , , , , , and act more or less like elements. They group other elements together into page sections. However where a tag could contain any type of information, it is easy to identify what sort of information would go in a semantic region.

An example of semantic element layout by w3schools

Why use semantic elements?

To look at the benefits of semantic elements, here are two pieces of HTML code. This first block of code uses semantic elements:

Whilst this second block of code uses non-semantic elements:

First, it is much easier to read. This is probably the first thing you will notice when looking at the first block of code using semantic elements. This is a small example, but as a programmer you can be reading through hundreds or thousands of lines of code. The easier it is to read and understand that code, the easier it makes your job.

It has greater accessibility. You are not the only one that finds semantic elements easier to understand. Search engines and assistive technologies (like screen readers for users with a sight impairment) are also able to better understand the context and content of your website, meaning a better experience for your users.

Overall, semantic elements also lead to more consistent code. When creating a header using non-semantic elements, different programmers might write this as , , , or simply . There are so many ways that you can create a header element, and they all depend on the personal preference of the programmer. By creating a standard semantic element, it makes it easier for everyone.

Since October 2014, HTML4 got upgraded to HTML5, along with some new “semantic” elements. To this day, some of us might still be confused as to why so many different elements that doesn’t seem to show any major changes.

and

“What’s the difference?”, you may ask. Both these elements are used for sectioning a content, and yes, they can definitely be used interchangeably. It’s a matter of in which situation. HTML4 offered only one type of container element, which is . While this is still used in HTML5, HTML5 provided us with and in a way to replace .

The and elements are conceptually similar and interchangeable. To decide which of these you should choose, take note of the following:

1. An article is intended to be independently distributable or reusable.
2. A section is a thematic grouping of content.

 
Top Stories
 
News
 
Story 1
 
Story 2
 
Story 3
 
 
Sport
 
Story 1
 
Story 2
 
Story 3
 
 

and

The element is generally found at the top of a document, a section, or an article and usually contains the main heading and some navigation and search tools.

The element should be used where you want a main heading with one or more subheadings.

 
Heading 1
 
Subheading 1
 
Subheading 2
 

REMEMBER, that the element can contain any content, but the element can only contain other headers, that is to and including .

The element is intended for content that is not part of the flow of the text in which it appears, however still related in some way. This of as a sidebar to your main content.

’s and
’s. Now, together with these, we can separate our menu items with a , for navigation between your pages. You can have any number of elements on a page, for example, its common to have global navigation across the top (in the ) and local navigation in a sidebar (in an element).

If there is a there must be a . A is generally found at the bottom of a document, a section, or an article. Just like the the content is generally metainformation, such as author details, legal information, and/or links to related information. It is also valid to include elements within a footer.

The element often appears within a or element which would usually contain copyright information or legal disclaimers, and other such fine print. However, this is not intended to make the text smaller. It is just describing its content, not prescribing presentation.

The element allows an unambiguous ISO 8601 date to be attached to a human-readable version of that date.

Why bother with ? While humans can read time that can disambiguate through context in the normal way, the computers can read the ISO 8601 date and see the date, time, and the time zone.

and

is for wrapping your image content around it, and is to caption your image.

Learn more about the new HTML5 elements:

• w3schools provides simple and clear descriptions of many of the news elements and how/where they should be used.
• MDN also provides a great reference for all HTML elements and goes deeper into each.

Источник