HTML5 tags
Tag Importance
<!DOCTYPE Declares the document type and version of HTML,
html> ensuring proper rendering by browsers.
Root element that encapsulates all other elements in
<html>
the document.
Contains metadata, links to stylesheets, scripts, and
<head>
other information not displayed on the page.
Sets the title of the document, displayed in the
<title>
browser tab and used by search engines.
Provides metadata about the HTML document (e.g.,
<meta>
character set, author, viewport settings).
<link> Links to external resources like stylesheets.
Embeds CSS styles directly within the HTML
<style>
document.
<script> Includes JavaScript code or links to external scripts.
Contains the content that is displayed to users,
<body>
including text, images, links, etc.
Represents introductory content, typically containing
<header>
navigation or heading elements.
<nav> Defines a section of navigation links.
Tag Importance
Represents a thematic grouping of content, typically
<section>
with a heading.
Self-contained content that could be independently
<article> distributed or reused, such as a blog post or news
article.
Contains content tangentially related to the main
<aside>
content, often used for sidebars.
Represents the footer of a document or section,
<footer> usually containing copyright information, links, and
contact details.
Headings that define the structure and hierarchy of
<h1> to <h6> content, with <h1> being the highest level and <h6>
the lowest.
Defines a paragraph of text, helping to structure
<p>
written content for readability.
<br> Inserts a line break within text, useful for formatting.
Creates a thematic break or horizontal line, often used
<hr>
to separate content.
Defines a hyperlink that links to other documents or
<a>
sections within the same document.
Embeds images in the document, with attributes for
<img>
source and alternative text for accessibility.
Defines an image map, allowing for clickable areas on
<map>
images.
Tag Importance
<area> Defines clickable areas within an image map.
<table> Represents tabular data.
<tr> Defines a table row within a <table>.
Specifies a header cell in a table, typically displayed in
<th>
bold and centered.
<td> Defines a standard cell in a table.
<caption> Provides a title or description for a table.
<ul> Creates an unordered (bulleted) list.
<ol> Creates an ordered (numbered) list.
<li> Defines an item in a list (either ordered or unordered).
<form> Collects user input, containing various input elements.
Represents an input field for user interaction (e.g.,
<input>
text, checkbox, radio button).
<textarea> Creates a multi-line text input area for user input.
Generates a dropdown list for selecting from multiple
<select>
options.
<option> Defines an option within a <select> dropdown list.
Represents a clickable button for submitting forms or
<button>
executing actions.
Associates a text label with a form element, improving
<label>
accessibility.
Tag Importance
Groups related form elements, typically with a border
<fieldset>
around them.
<legend> Provides a caption for a <fieldset>.
Embeds audio content, allowing for playback directly
<audio>
on the webpage.
Embeds video content, providing playback controls for
<video>
user interaction.
Specifies multiple media resources for <audio> and
<source>
<video>, allowing for different formats.
Provides text tracks (like subtitles or captions) for
<track>
<video> and <audio> elements.
Embeds another HTML page within the current
<iframe> document, useful for displaying content from external
sources.
Provides a drawing surface for rendering graphics via
<canvas>
JavaScript, enabling dynamic graphics.
Embeds Scalable Vector Graphics, allowing for the
<svg>
inclusion of vector images.
<math> Embeds mathematical expressions using MathML.
Creates a disclosure widget from which the user can
<details>
obtain additional information or controls.
Provides a summary or heading for the content of a
<summary>
<details> element.
Tag Importance
Represents a dialog box or other interactive
<dialog>
component, which can be used for popups.
Displays progress of a task, typically with a visual
<progress>
indicator.
Represents a scalar measurement within a known
<meter>
range, like a gauge or thermometer.
Defines a section that is quoted from another source,
<blockquote>
typically styled differently.
<cite> Represents the title of a work or a citation.
Indicates a short inline quotation, automatically
<q>
adding quotation marks.
Displays a single line of code or a technical term,
<code>
typically rendered in a monospace font.
Represents preformatted text, preserving whitespace
<pre>
and line breaks.
Indicates that the text is of strong importance,
<strong>
typically rendered in bold.
<em> Indicates emphasized text, usually rendered in italics.
A generic inline container for text and other elements,
<span>
often used for styling.
A generic block-level container for grouping elements,
<div>
often used for layout purposes.
Tag Importance
Defines client-side JavaScript, allowing for interactivity
<script>
and dynamic behavior on the webpage.
Holds client-side content that will be instantiated later
<template>
during runtime, not rendered when the page loads.
a placeholder inside a Web Component where users
<slot>
can insert their own markup.
Embeds CSS styles directly within the HTML
<style>
document, enabling specific styling