Clear, practical technology insights BSOD Code Lookup · Windows Error Code Lookup · Wi-Fi Troubleshooting · PC Troubleshooting Checklist

Semantic Elements in Html5: Semantic Element in HTML5

Understand Semantic Elements in Html5: Semantic Element in HTML5 with clear explanations, practical examples, and useful tips. This updated guide covers the...

Table of Contents

Semantic Elements in Html5: Semantic Element in HTML5 is easier to understand when the core ideas are paired with practical examples. The sections below explain the topic clearly, highlight useful steps, and point out details that can prevent common errors.

What is the semantic element?

In linguistics, semantics is the study of the meaning of words and phrases in language.

Each semantic element has its own meaning. So in HTML, every Semantic Element describes the structural significance of that element to browsers and developers / developers.

Examples of non-semantic elements (elements without semantics):

and - There is no clear description of its content.

Examples of semantic elements ( semantic elements): ,, and Semantic Elements in Html5: Semantic Element in HTML5 example image 1 - Provide clear descriptions of the content within the element.

Browser support

Semantic Elements in Html5: Semantic Element in HTML5 example image 2

Semantic Elements in Html5: Semantic Element in HTML5 example image 3 Semantic Elements in Html5: Semantic Element in HTML5 example image 4 Semantic Elements in Html5: Semantic Element in HTML5 example image 5 Semantic Elements in Html5: Semantic Element in HTML5 example image 6 Google Chrome Mozilla Firefox Internet Explorer Opera Safari

Semantic elements in HTML5 are supported in all modern browsers.

In addition, you can "teach" older browsers how to handle new HTML5 elements.

New Semantic elements in HTML5

Many websites are still designing based on HTML code like

to create navigation, header (header) and footer (footer) interfaces.

Below, HTML5 provides new semantic elements to identify different parts of a web page:

Semantic Elements in Html5: Semantic Element in HTML5 example image 7

Element in HTML5

Elements that represent a common part are in documents or applications.

More specifically, a section is a group of content with the same topic.

As an example, , the home page of a website can be divided into sections such as referrals, content, contact information, suggestions.

Introducing Webside Tipsmake

Tipsmake is webside specializing in phone, computer, network tips, programming, fixing computer errors, using software, specialized software, scientific technology.

The main topic in Tipsmake

Tipsmake has topics close to life that are updated regularly and continuously, such as: Technology Village, Technology, Science, Life, Video, Application, IPhone / IPad, Android, Programming.

Results:

Semantic Elements in Html5: Semantic Element in HTML5 example image 8

Element in HTML5

The element is used for independent content and contains its own content.

The content inside is separate and can be independent of other content of the site.

As an example,, some places you can use :

  • Posts on a Forum.
  • Posts on a Blog.
  • Articles in a newspaper.

About TipsMake.com

Starting from a website that provides knowledge about networking, servers, network devices, computer tricks. Currently, TipsMake.com has become a social science and technology network, expanding its content to meet the needs of its members in many more technological areas such as phones, smart devices, and electronics. computer security,.

Results:

Semantic Elements in Html5: Semantic Element in HTML5 example image 9

The inner element or vice versa?

In HTML5, define a block of complete content of many related elements linked together.

The element helps create a group of interrelated elements.

So do we need to rely on the function of the factors to decide which element must be within the factor? The answer is: No!

Today on the Internet, you can find many websites where the element contains elements or elements that contain elements . Besides, you also see many web use and storage . Therefore, it is not necessary to determine which element is in which element.

Example of a web page: In the sports area, there are many sports articles, in each sports article there is a technical area.

Element

in HTML5

Element

Define the beginning of a document page or the beginning of a paragraph.

Element

should be used as an introductory content container.

You can use one or more

in a document.

As an example,, we use a card

inside an article:

What is TipsMake.com's goal?

Lead duties:

We expect our members to always grasp the latest information, knowledge, technology trends, and troubleshoot technology issues encountered by members when using computers, phones, other common electronic devices.

Results:

Semantic Elements in Html5: Semantic Element in HTML5 example image 10

Element in HTML5

The element determines the end of a document page or the end of a paragraph.

The element typically contains author information of documents, copyright information, links to terms of use, contact information.

You can use one or more in a document.

As an example,:

Contact us: TipsMake.com

Address: No. 56, Pho Duy Tan, Dich Vong Hau, Cau Giay

Service time: From 8:00 - 17:30 hours (Monday to Friday); From 8:00 - 12:00 (Saturday)

Hotline: 024 2242 6188

Email:

 info@tipsmake.com. 
 

Results:

Semantic Elements in Html5: Semantic Element in HTML5 example image 11

Element

Element

Identify an area containing navigation links.

However, not all navigation links in a document need to be placed in

As an example,:

 Làng Công ngh? | 
 Khoa h?c | 
 Cu?c s?ng | 
 ?ng d?ng 
 

Results:

Semantic Elements in Html5: Semantic Element in HTML5 example image 12

Element in HTML5

The content definition element is located next to the content of the page.

Internal content relates to the main content.

As an example,:

Tipsmake meets the needs of members in many different fields such as Technology, Life, Applications.

Technology

Latest trends and discoveries in science and technology will be updated here by TipsMake.com.

Life

Life skills, job skills, leadership skills, life tips, things you may not know, good sayings about life, famous quotes of Jack Ma, Bill Gate, Steve Jobs,..

Results:

Semantic Elements in Html5: Semantic Element in HTML5 example image 13

Element

and
in HTML5

The purpose of the element is to explain more clearly the added picture, similar to the captions / notes below the pictures in the articles and story books.

In HTML5, images and notes inside can be put together inside the element

.

As an example,:

About TipsMake.com

Starting from a website that provides knowledge about networking, servers, network devices, computer tricks. Currently, TipsMake.com has become a social science and technology network, expanding its content to meet the needs of its members in many more technological areas such as phones, smart devices, and electronics. computer security,.

Semantic Elements in Html5: Semantic Element in HTML5 example image 14
Home Tipsmake at TipsMake.com

Results:

Semantic Elements in Html5: Semantic Element in HTML5 example image 15

Why use Semantic elements in HTML5?

In HTML4, developers often have to create their own properties to design sections such as header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav.

This makes the search appliance unable to determine what content is contained within the site correctly.

In HTML5, elements like:

Make everything a lot easier.

Semantic factor in HTML5

Here is a list of new semantic elements in HTML5:

Meaning Define an article / article Define the content located next to the content of the page
Identify details that users can view or hide Tags for
Mark image content in a document Specify the end of a document page or a paragraph

FAQ

What is the semantic element?

In linguistics, semantics is the study of the meaning of words and phrases in language.

What should you know about new Semantic elements in HTML5?

Many websites are still designing based on HTML code like.

What should you know about element in HTML5?

Elements that represent a common part are in documents or applications.

Discussion

Reader Comments 0

Sign in with email or Google to join the discussion.