HTML5 is the fifth and most recent version of the Hypertext Markup Language (HTML). HTML5 has become a crucial technology for web development, offering new features such as audio and video embedding, canvas drawing, geolocation, and drag-and-drop functions.
It also boasts improved cross-browser compatibility and simplified coding syntax. In addition to its already impressive capabilities, HTML5 also supports the emerging field of web applications. For example, HTML5 can be used to develop advanced games and apps that work across multiple devices without needing additional downloads or plug-ins.
In this blog post, we’ll explore new HTML5 tags that can be used.
Table of Contents
New HTML5 Structural/Semantic Tags
<article>– Represents a self-contained piece of content that could stand alone, such as a blog post or news article. It is typically used in conjunction with other HTML elements to create a complete and well-structured document.<aside>– Represents content that is tangentially related to the main content of the page. This content is typically placed in a sidebar or other similar area of the page and is usually smaller in size compared to the main content<bdi>– Represents bi-directional isolation, providing an easy way to embed text with unknown directional formatting into a webpage without altering the direction of the surrounding text. The purpose of the bdi tag is to help embed user-generated content, such as text with unknown directional formatting, into a webpage without disrupting the formatting of the surrounding text. This is particularly useful when displaying text in languages with right-to-left writing, such as Arabic or Hebrew.<canvas>– A drawing surface for rendering dynamic graphics, such as charts or games. It also offers an API for programming dynamic drawings that respond to user input or data changes.
<canvas width="200" height="200">
An alternative text describing what your canvas displays.
</canvas>
<script type="text/javascript">
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 200, 200);
ctx.fillStyle = '#000000';
ctx.font = 'bold 16px sans-serif';
ctx.fillText('Hello World', 10, 10);
ctx.fillStyle = '#0000FF';
ctx.fillRect(100, 100, 200, 200);
</script><data>– Represents a particular kind of data, such as a measurement or numerical value. This tag is used in conjunction with the meter and progress tags to provide more detail about the data being displayed.
<details>– Allows the user to view or hide additional details or content, such as a summary or explanation. The element creates an expandable section within its containing elements that can be opened or closed by users with a single click or tap action depending on their device type (desktop/mobile). When expanded it reveals further details about whatever content has been placed inside its body which could include form fields, images/videos embedded from other websites or even entire tables of information relevant to that first section’s topic matter – perfect for adding structured sections onto webpages quickly and efficiently!
Details
More content goes here
<details>
<summary>Details</summary>
<p>More content goes here</p>
</details><dialog>– Represents a dialog box or window, such as a modal or popup. It allow users to interact with content in a more intuitive way than with plain web forms or dialog boxes from third-party libraries. The dialog element allows developers to add confirmation dialogs, alerts, or custom modal windows that can be triggered by clicking a particular element on the page.<figcaption>– A semantically meaningful element used to add caption information to figures. It supports both audio and visual content, allowing users to easily interpret the data displayed in their webpage. The figcaption tag should always be placed immediately after the figure element and its content should be related to the figure.<figure>– Represents a self-contained piece of content, such as an image or video, that is typically referenced in the main content.<footer>– Represents the footer of a section or page. It typically contains copyright information, links to related sites, and other miscellaneous information about the site or current page.<header>– Represents the header of a section or page. It is commonly used to contain essential information such as the page or section title, logo, navigation, search bar, and other useful elements. The header tag is an important element that helps visitors quickly understand what a page or section is all about. It also helps search engines to better understand the structure of a website and rank pages accordingly.<main>– Represents the main content of a webpage. It is intended to be unique to the document, meaning that there should only be one main element in a single HTML page. The tag is used to wrap the main content of a webpage, and it is usually used to define the content that is unique to that page, as opposed to content that is shared across multiple pages (such as headers, footers, and sidebars).<mark>– Represents text that is highlighted for reference or emphasis. It is used to draw attention to a specific portion of text, and is often used to highlight search terms or passages that have been referenced or quoted.<menuitem>-Define a menu item. This tag defines an action or command that can be performed from a drop-down menu or context menu. The menuitem tag should include an id attribute, which identifies the menu item, as well as a label attribute that provides the text for the item displayed in the menu. It can<meter>– Represents a measurement, such as a progress bar or gauge. It is typically used to display a gauge or a progress bar, and is often used to represent a quantity that is changing over time.<nav>– Represents a section of the webpage that contains navigation links. It is used to wrap a set of links that are used to navigate to different pages or sections within the current webpage or to other webpages.<picture>– Allows the author to specify multiple sources for an image, allowing the browser to choose the best option based on the device and screen size.<progress>– Represents the progress of a task, such as a download or file upload. It is a block-level element, which means that it creates a rectangular box on the page that takes up a specific amount of space.
<progress id="file" max="100" value="60">60%</progress><ruby>– Represents a ruby annotation, which is used in some languages to indicate pronunciation of characters.<rp>– Represents a fallback or “parentheses” annotation for the ruby element.<rt>– Represents the text of a ruby annotation.<section> – Represents a section of a document, such as a chapter or an article. It is used to group related content together, and can be nested inside other section elements to create more complex structures.<summary>– Represents a summary or caption for the associated element. The tag is used to provide a brief summary or overview of the content within the associated element and is typically displayed as a heading or title for the content. It is often used in conjunction with thedetailselement, which allows users to toggle the visibility of the content.<section>– Represents a standalone section of content, such as a chapter or subsection. It is used to group related content together and can be used to divide a web page into logical sections.<template>– Represents a reusable template for content, such as a layout or pattern. It is usually used in conjunction with JavaScript to create dynamic content on the page.<time>– Represents a specific point or period of time, such as a date or time of day. It can be used to provide machine-readable information about dates and times that can be parsed and processed by scripts or other programs.<wbr>– Represents a line break opportunity within text. It is used to indicate where the browser can insert a line break in order to make long words or URLs easier to read.
New HTML5 Form Tags
<datalist>– Provides a list of options for input controls, such as a drop-down menu or autocomplete input. This tag allows users to enter data into a form field while providing auto-complete suggestions based on pre-defined values in its list attribute. This makes entering information into forms quicker and more efficient while reducing errors due to typos or misspellings of data entries. The datalist element works best when combined with other inputs such as text fields or radio buttons so that users have an easier time selecting data from the list attribute rather than typing it manually over again each time they need it entered into the form field.
<datalist id="languages">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
<option value="PHP">
<option value="jQuery">
<option value="Bootstrap">
<option value="XML">
</datalist>
<input list="languages" name="language"><output>– Represents the result of a calculation or user action. It can be used in a variety of contexts, such as displaying the result of a form submission, or the result of a mathematical calculation.
New HTML5 Media Tags
<audio>– Used to embed audio content, such as music or sound effects, on a webpage. It can be used to embed both pre-recorded audio files as well as streaming audio. It can be used to play audio files in a variety of formats, including MP3, WAV, and OGG. The<audio>element also supports features such as playback controls, audio synchronization, and audio description for users with visual impairments.<embed>– Is used to embed external content, such as a video or audio file, on a web page. It has several attributes that can be used to specify the source of the embedded content, as well as its dimensions and other properties. Theembedelement is often used to embed multimedia content, such as videos, audio files, and interactive media, on a web page. It is supported by most modern web browsers and is an easy way to add multimedia content to a web page.<svg>– The tag stands for Scalable Vector Graphics allowing developers to create scalable vector graphics directly within HTML pages, without the need for external image files. This can be useful for creating responsive graphics that are not pixelated when resized or zoomed. In addition, since SVGs are created using XML, they can be easily manipulated with JavaScript for animations and transitions, giving developers more control over how the graphics appear compared to using rasterized alternatives such as JPEGs or PNGs.<video>– Used to embed video content on a webpage without using third-party plugins like Flash or Silverlight. This tag can be used with multiple sources and formats such as MP4, WebM, and Ogg Theora. It also supports captions, subtitles, audio tracks and other features like full-screen mode and looping of videos.
