13
HTML5 Tags and Global Attributes
In this blog, I will be covering HTML5 tags and attributes which are most commonly used.
<article> </article>
It is used to describe an article on the webpage, like a Blog post or a News story.
<aside> </aside>
It is used to place some content aside from the main content, mostly used to place content in the sidebar of the webpage.
<details> </details>
It is used to add additional details/content which the user can view(open) or hide(close) on demand.
<dialog> </dialog>
It is used to create a dialog box on a webpage.
<figure> </figure>
It is used to add figures like illustrations, diagrams and photos to a webpage.
<figcaption> </figcaption>
It is used to add captions to the figures.
<footer> </footer>
It is used to define the footer of the webpage.
<header> </header>
It is used to define the header of the webpage. You can define multiple
<header> elements in a webpage but it should not be placed inside a <footer>, <address> or any other <header> element.<main> </main>
It is used to specify the main content of a webpage and you can only define one
<main> element in a document.<meter> </meter>
It is used to measure data within a known range or a fractional value.
<nav> </nav>
It is used to define a set of navigation links in a webpage.
<progress> </progress>
It is used to represent the progress of a task.
<section> </section>
It is used to define a section on the webpage.
<summary> </summary>
It is used to define a heading for the
<details> element.<time> </time>
It is used to define a specific time.
<wbr>
It is used to add a line break when a particular text or word is too long.
Below are examples for a better understanding of the above-defined tags. You can navigate to the HTML tab to see the code snippet.
The HTML global attributes are attributes that can be used in all HTML elements.
<element accesskey="character">
It is used to specify a shortcut key to activate or focus an element. The attribute value should be a single character.
<element class="classname">
It is used to specify one or more class names for an element. It is mostly used to point a class in a stylesheet.
<element contenteditable="true|false">
It is used to specify whether the content of an element is editable or not. If the attribute value is
"true" then it specifies that the content is editable. If it is "false" then it specifies that content is not editable.<element dir="ltr|rtl|auto">
It is used to specify the direction of the text in an element. If the attribute value is
"ltr" then it specifies that the direction of text is left-to-right. If it is "rtl" then the direction of text is right-to-left and if it is "auto" then the browser will figure out the text direction.<element draggable="true|false|auto">
It is used to specify whether an element is draggable or not. If the attribute value is
"true" then it specifies that the element is draggable. If it is "false" then the element is not draggable and if it is "auto" then it is based on the default behaviour of the browser.<element hidden>
It is used to specify that an element is no longer relevant. The browsers will not display elements that have a hidden attribute.
<element id="unique_id">
It is used to specify a unique id for an element. It is mostly used to point to a style in a stylesheet.
<element lang="language_code">
It is used to specify the language of the element's content.
<element spellcheck="true|false">
It is used to specify whether the element is to have its spelling and grammar checked or not. If the attribute value is
"true" then that element is to have its spelling and grammar checked. If it is "false" then it is not to be checked. <element style="style_definitions">
It is used to specify an inline CSS style for an element and will override any style set in the
<style> tag or in an external style sheet.<element tabindex="number">
It is used to specify the tabbing order of an element when the
"tab" button is used for navigation.<element title="text">
It is used to specify extra information about an element. The extra information will be displayed when the mouse hovers over the element.
Below are examples for a better understanding of the above-defined attributes. You can navigate to the HTML tab to see the code snippet.
I hope this article gave you some basic knowledge about HTML5 Tags, global attributes and how they work. Feel free to put up any queries that you may have.
In my upcoming blogs, I will be covering more about HTML forms tags and some simple projects.
13