Structural elements in html

HTML5 Introduction: New Semantic/Structural Elements

This blog will briefly discuss HTML, HTML5, and the new HTML5 Semantic/Structural Elements, as well as why you should use HTML5, and how one could migrate an HTML4 formatted document to an HTML5 format.

What is HTML?

HTML is the standard markup language for creating Web pages 1 .

• HTML stands for Hyper Text Markup Language
• HTML describes the structure of Web pages using markup
• HTML elements are the building blocks of HTML pages
• HTML elements are represented by tags
• HTML tags label pieces of content such as “heading,” “paragraph,” “table,” and so on
• Browsers do not display the HTML tags, but use them to render the content of the page

Brief History of HTML

The following table illustrates the version history of HTML 2 .

For reference, HTML5 was introduced in 2014.

Version	Year
HTML	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2014

HTML 5

HTML5 is a markup language used for structuring and presenting content on the internet. It is the fifth and current major version of the HTML standard.

It was published in October 2014 by the World Wide Web Consortium (W3C) to improve the language with support for the latest multimedia, while keeping it both easily readable by humans and consistently understood by computers and devices such as web browsers, parsers, etc. HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML 3 .

New HTML 5 Semantic/Structural Elements

HTML5 4 offers new elements for better document structure:

Tag	Description
	Defines an article in a document
	Defines content aside from the page content
	Isolates a part of text that might be formatted in a different direction from other text outside it
	Defines additional details that the user can view or hide
	Defines a dialog box or window
	Defines a caption for a element
	Defines self-contained content
	Defines a footer for a document or section
	Defines a header for a document or section
	Defines the main content of a document
	Defines marked/highlighted text
	Defines a command/menu item that the user can invoke from a popup menu
	Defines a scalar measurement within a known range (a gauge)
	Defines navigation links
	Represents the progress of a task
	Defines what to show in browsers that do not support ruby annotations
	Defines an explanation/pronunciation of characters (for East Asian typography)
	Defines a ruby annotation (for East Asian typography)
	Defines a section in a document
	Defines a visible heading for a element
	Defines a date/time
	Defines a possible line-break

HTML5 offers new semantic elements to define different parts of a web page. The following figure illustrates how a page may be structured using HTML 5.

Why Use HTML5

HTML5 is the latest iteration of HTML that addresses modern needs and expectations of websites. It deals with things such as semantic markup and providing information about content it describes. It is becoming the new standard for good web development, and browser vendors love it as it works across all desktop and mobile devices. Below are 5 reasons why HTML5 matters 5 :

HTML5 is Becoming a New Standard

But why is it so good? What does it all mean? More importantly, why does it matter? There are a couple of factors that explain this. First of all, HTML5 is very rapidly becoming a standard. Developers want to use HTML5, which in turn makes it all the more popular and likely to stick around. Modern browsers all support HTML5 allowing developers to use all the new and exciting features it offers in order to create more dynamic end results. It doesn’t matter if you create a new plugin, a UI mobile framework, or a new fancy carousel, your developer wants to do it all in HTML5. And if you are a developer, you want to, or should want to, do it in HTML5.

HTML5 is Faster and Cheaper

What’s the main reason the industry wants to support HTML5? It reduces development time. By focusing on the latest browsers only, while providing graceful content degradation, developers can focus on writing functionalities that work and look good while using the latest tools. This makes the whole process quick and very rewarding for the developers themselves.

HTML5 is Modern

Next to HTML5 stands another awesome new technology: CSS3. Often, when using the term HTML5, it is assumed that CSS3 is included in the definition. What’s so awesome about CSS3? Well, like HTML5, it is a new iteration of CSS specification including modern browser support for visual styling. This allows achieving great looking effects like rounded corners, shadows or animations within a couple lines of code, rather than using laborious image slicing techniques. This both increases the fun factor of developing such features, and reduces development time significantly, allowing developers to focus their efforts on things that matter. As a bonus you get lightweight websites with a reduced number of files and images that need to be downloaded for the site to look good. All this makes sites load faster, increasing responsivity and enhancing user experience.

HTML5 Lets You Do Things Previously Impossible

With new functionalities that an awesome combination of CSS3 and HTML5 give us, we can do things that were never possible to achieve in pure HTML. Things that would previously require external plugins such as Adobe Flash or Microsoft Silverlight are now achievable in a browser through HTML5. Heavy support for animations and transition allows the possibility to create complicated dynamic visual effects through CSS3 rather than flash. Modern JavaScript API support for things like application storage, geolocation allow developers to create complete web based applications through native HTML and CSS. All that is very cool, for one, but also it allows developers the ability to create both web sites and web applications using the same technology.

HTML5 Supports Mobile Devices

With all that in mind, we come to a conclusion, the final reason why HTML5 matters: it is mobile friendly. With all that was mentioned earlier, the lightweight visual effects, the support from industry, and the support from browser vendors, it is now easier than ever to develop a web site or a web application in HTML5—one that can be deployed on both desktop and mobile devices. Content was never closer to the end user and it doesn’t matter if you are browsing on your desktop, on your laptop or on your smartphone. While the smartphone market is diverging with different supported operating systems and native applications, HTML5 is supported throughout the whole spectrum of mobile vendors thus allowing businesses the ability to deliver content—your product and/or your service—to a wide array of customers. And that is what matters.

HTML5 is here to stay. It has support from the community, devices and browser vendors, and is a great way to put content out there closer to the user. Working with the latest technologies is always fun and with a rapidly growing mobile market, it is a new and exciting place to be. HTML5 helps with all that. So, to conclude, HTML5 does matter, and it should matter to you!

Migrate from HTML4 to HTML5

The following table illustrates how you would migrate from a HTML4 to a HTML5 document.

Summary

This blog briefly discussed HTML, HTML5, and the new HTML5 Semantic/Structural Elements, as well as why you should use HTML5, and how one could migrate an HTML4 formatted document to an HTML5 format.

Источник