HTML5 Tutorial – Page structure tags

In the second session, we will design the HTML5 site design with page structure tags.

These tags, as their name suggests, are used to create a web page structure.

In HTML 4, there were two methods for naming tags.

1 Use id

2. use class

Which id was used to name unique segments and class was used for style.
For example, a website usually has a header, so we used id with header value to name it. Or, for example, for the style of the blue text, we used the site with a text-blue value class. Of course, this type of standard naming is not a rule; someone may use a class with a text-blue value for the logo, or … But usually the naming is meaningful, and each name should accurately identify the exact part that it forms.

In 2005, an investigation was made into how many web designers use the id and class attributes to label tags. The study found that more than one billion sites used these two attributes. The image below is the most commonly used names for these two attributes:

Regarding the most widely used names, W3C decided to simplify the design of the site and instead of using the id and class attributes to name the page structure, they would create tags with the same names that are known as semantic elements or semantic elements.
tip :
Some of the above names, such as biomarker or no bullet content, are automatically created by software like the front and back. And because these names are of high relevance, they have not been converted to tags for HTML.

New HTML5 tag

In HTML5, exactly 27 new tags have been added, which almost requires us to use different names for tags and also overuse of the div tag. For example, see below as part of an agency site, see the difference with html4 and html5.
As you can see, in html5 the name of the tags and their number is commensurate with the structure of the page.
But in html4 we had to use a lot of div tags,
plus we assigned each name because all the parts were just one tag and the definition of the style without the definition of the name was problematic.
Newly introduced tags for creating a page structure are:
Header: Used to create header section.
Footer: Used to create footnotes.
Nav: Used to create menus.
Aside: Used to create sidebars.
Section: To create control units.
Article: Content creation is not used (content is not just posted).
The following figure shows the placement of the above tags in the structure of a page.

The following code example shows the structure of an html5 web page:

<! doctype html>
<html lang = "en">
<title> Hello HTML5 </ title>
<meta charset = "utf-8">
<! - [if lt IE 9]>
<script src = ""> </ script>
<! [endif] ->
</ head>
<div id = "layout">
<no> </ no>
</ header>
<div id = "wrapper">
<aside> </ aside>
<article> </ article>
<article> </ article>
<article> </ article>
</ section>
</ div>
<footer> </ footer>
</ div>
</ body>
</ html> 

See the fuller code on this page along with the stylesheet and also apply to the bottom of the page without using html5shiv.

  HTML Tutorial (Part 10): Working with Forms in HTML

tip :

A point that should be considered when typing HTML5 tags in ie. This is when you define the tags using javascript. Using css, you must specify the element type to be block or inline. The tags we’ve introduced are blocked. If this property is not defined, the tags are considered inline. Check the source of the link above, to see what’s best.

(Of course, the use of this method is only for minor issues, and if you want to design with html5, you should use html5shiv.


Development of Espinas always tried to use the most up to date Tktynk and tools in the  design of the site is in Espinas technologies in the world such as CSS3 , HTML5 , Jquery , JAVASCRIPT   in web design can be used as well as languages such as PHP, ASP in the enterprise Spinal Cluster is the first letter

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top