10
HTML5 Tags and Global Attributes
In this blog, I will be covering HTML5 tags and attributes which are most commonly used.
- Article Tag:
<article> </article>
It is used to describe an article on the webpage, like a Blog post or a News story.
- Aside Tag:
<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 Tag:
<details> </details>
It is used to add additional details/content which the user can view(open) or hide(close) on demand.
- Dialog Tag:
<dialog> </dialog>
It is used to create a dialog box on a webpage.
- Figure Tag:
<figure> </figure>
It is used to add figures like illustrations, diagrams and photos to a webpage.
- FigureCaption Tag:
<figcaption> </figcaption>
It is used to add captions to the figures.
- Footer Tag:
<footer> </footer>
It is used to define the footer of the webpage.
- Header Tag:
<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 Tag:
<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 Tag:
<meter> </meter>
It is used to measure data within a known range or a fractional value.
- Nav Tag:
<nav> </nav>
It is used to define a set of navigation links in a webpage.
- Progress Tag:
<progress> </progress>
It is used to represent the progress of a task.
- Section Tag:
<section> </section>
It is used to define a section on the webpage.
- Summary Tag:
<summary> </summary>
It is used to define a heading for the <details> element.
- Time Tag:
<time> </time>
It is used to define a specific time.
- Word Break Tag:
<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.
- Access Key:
<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.
- Class :
<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.
- Content Editable :
<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.
- Dir :
<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.
- Draggable :
<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.
- Hidden :
<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.
- Id :
<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.
- Lang :
<element lang="language_code">
It is used to specify the language of the element's content.
- SpellCheck :
<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.
- Style :
<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.
- Tab Index :
<element tabindex="number">
It is used to specify the tabbing order of an element when the "tab" button is used for navigation.
- Title :
<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.
10