The element with its href attribute, creates a hyperlink to web pages, files, email addresses,
locations in the same page, or anything else a URL can address.
Example
<p>This is a paragraph with a <a href="https://www.example.com">simple hyperlink</a>.</p>
<abbr> (Abbreviation)
The element is used to define abbreviations or acronyms in a document. It helps provide a full
explanation or expansion of the abbreviated text, often for the benefit of users who may not be
familiar with the abbreviation.
Example
<p>The <abbr title="World Health Organization">WHO</abbr> is a specialized agency of the United Nations.</p>
<adress> (Adress)
The element is used to provide contact information or details about the author or owner of a
document. It is often used in the footer of a webpage but can be used in other sections as well.
Example
<h1>Contact Information</h1>
<address>
<p>Written by John Doe.</p>
<p>Visit us at:<br>
123 Main Street<br>
Cityville, State, 12345<br>
<a href="mailto:john@example.com">Email: john@example.com</a>
</p>
</address>
<area> (Image Map Area)
The element is used within an <map> element to define clickable areas within an image map.
Image maps are typically used to create links or hotspots on an image where users can click to
navigate to different destinations.
Example
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="mercury.html" alt="Mercury">
<area shape="circle" coords="90,58,3" href="venus.html" alt="Venus">
<area shape="circle" coords="124,58,8" href="earth.html" alt="Earth">
<!-- Additional areas for other planets can be added here -->
</map>
<article> (Article)
The element is used to represent a self-contained piece of content within a document. It could be a
news article, blog post, forum post, or any other independent piece of content that can be
distributed and reused independently.
Example
<article>
<h2>Top Frontend Frameworks in 2023</h2>
<p>As of 2023, the most popular frontend frameworks include...</p>
<p>...</p>
<footer>
<p>Published on <time datetime="2023-11-19">November 19, 2023</time> by John Doe</p>
</footer>
</article>
<aside> (Aside)
Description: The element is used to mark content that is tangentially related to the content around
it. It is typically used for sidebars, pull quotes, advertisements, or any content that is not the
primary focus of the page but provides additional context or information.
The element is used to embed audio content, such as music or sound effects, into an HTML document. It
provides a way to play audio files directly in the browser without requiring a separate player.
Example
<h1>Listen to a Sample Track</h1>
<audio controls>
<source src="sample.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
<b> (Bold)
The element is used to apply bold formatting to the enclosed text. It doesn't carry any semantic
meaning on its own and is generally used for presentational purposes when you want to make text
visually bold.
Example
<p>This is a <b>bold</b> text example.</p>
<base> (Base)
The element is used to specify a base URL for all relative URLs within a document. It provides a way
to set a default URL for links, images, and other resources, helping to resolve relative URLs
consistently.
The element is used to override the default direction of text display in languages that are written
from right to left (RTL), such as Arabic or Hebrew, or left to right (LTR).
Example
<p>This is a normal text paragraph.</p>
<p><bdo dir="rtl">This text will be displayed from right to left.</bdo></p>
<p><bdo dir="ltr">This text will be displayed from left to right.</bdo></p>
<blockquote> (Block Quotation)
The element is used to represent a block of text that is a direct quotation from another source. It
typically indents the content to visually distinguish it from the surrounding text.
Example
<p>This is a paragraph of regular text.</p>
<blockquote>
<p>This is a blockquote, indicating a quotation from another source.</p>
</blockquote>
<p>This is another paragraph of regular text following the blockquote.</p>
<body> (Body)
The element is a fundamental part of an HTML document. It contains all the content that is visible to
the user, such as text, images, links, scripts, and more. It represents the main content of the
document.
The element is used to insert a line break in the document, forcing the content following the
<br> tag to appear on a new line. It is a void element, meaning it doesn't have a closing tag.
Example
<p>This is a paragraph of text.</p>
<p>This is another paragraph with a line break.<br>
The content following the line break appears on a new line.</p>
<button> (Button)
The element represents a clickable button, which can be used to trigger actions or submit forms. It
can contain text, images, or other HTML content. The functionality of the button is typically
defined using JavaScript or by associating it with a form.
Example
<body>
<h1>Click the Button</h1>
<button onclick="myFunction()">Click Me</button>
<script>
function myFunction()
{
alert("Button clicked!");
}
</script>
</body>
<canvas> (Canvas)
The element is used to create a drawing surface on a web page. It provides a container for graphics,
animations, and other visual content that can be manipulated using JavaScript. The element itself is
empty and requires JavaScript to draw and update its content.
Example
<body>
<h1>Canvas Example</h1>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
// Get the canvas element
var canvas = document.getElementById("myCanvas");
// Get the 2D rendering context
var context = canvas.getContext("2d");
// Draw a rectangle on the canvas
context.fillStyle = "#FF0000"; // Set fill color to red
context.fillRect(20, 20, 150, 100); // Draw a rectangle
// Draw a text on the canvas
context.font = "20px Arial";
context.fillStyle = "#000";
context.fillText("Hello, Canvas!", 30, 120);
</script>
</body>
<caption> (Table Caption)
The element is used to provide a caption or title for a table. It should be placed immediately after
the opening table tag, and it helps in providing context or a summary for the content of the table.
Example
<table>
<caption>Monthly Sales Report</caption>
<tr>
<th>Month</th>
<th>Sales</th>
</tr>
<tr>
<td>January</td>
<td>$10,000</td>
</tr>
<tr>
<td>February</td>
<td>$12,500</td>
</tr>
<!-- Additional table rows can be added here -->
</table>
<cite> (Citation)
The element is used to reference the title of a creative work (such as a book, movie, or song) or the
name of a person to be cited. It is often used within the context of citing sources in academic
writing.
Example
<p>The book <cite>The Great Gatsby</cite> by F. Scott Fitzgerald is a classic of American literature.</p>
<p>In his speech, John mentioned the famous quote from Shakespeare's play <cite>Hamlet</cite>.</p>
<code> (Code)
The element is used to define a piece of computer code within the text. It is typically used to
represent code snippets, programming instructions, or any text that should be treated as code. The
browser usually renders the text inside <code> in a monospaced (fixed-width) font.
Example
<p>This is an example of inline code: <code>var x = 10;</code></p>
<pre>
<code>
// This is a code block
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("World");
</code>
</pre>
<col> (Table Column element)
The element is used to define properties for a group of columns in a table. It is often used as a
child of the <colgroup> element, which allows applying styles and attributes to multiple
columns simultaneously.
The element is used to represent a piece of content that is intended to be machine-readable but also
human-readable. It can be used to encapsulate data values that may be used by software or scripts
while still providing meaningful content to users.
Example
<p>The average temperature is <data value="20.5" title="Average Temperature">20.5</data> degrees Celsius.</p>
<datalist> (Data List)
The element is used in conjunction with the <input> element of type text or search to provide
a set of predefined options that users can choose from. It allows you to create an autocomplete
functionality for input fields.
The element is used in conjunction with the <dl> (definition list) and <dt> (description
term) elements to define the description or definition part of a term-description pair in the list.
It typically follows the <dt> element and provides the detailed information or description
associated with the term.
Example
<body>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language is the standard markup language for creating web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets is used for styling the visual presentation of web pages.</dd>
<!-- Additional term-description pairs can be added here -->
</dl>
</body>
<del>/<ins> (Deleted Text / Inserted Tex)
The <del> element is used to represent text that has been deleted or removed from a document. It is
typically used in conjunction with the <ins> (inserted text) element to indicate changes made
to the content.
Example
<body>
<p>This is an <del>old</del> version of the document.</p>
<p>Check the <ins>latest</ins> version for updates.</p>
</body>
<details> (Details)
The element is used to create a disclosure widget from which the user can obtain additional
information or controls. It is often used in combination with the <summary> element, which
represents a summary or a heading for the content within the <details> element.
Example
<details>
<summary>Click to view details</summary>
<p>This is additional information that can be expanded or collapsed.</p>
</details>
<dfn> (Definition Term)
The element is used to represent the defining instance of a term within a document. It is often used
to highlight and semantically mark the term that is being defined. This is especially useful in
technical or academic content.
Example
<p>The <dfn title="World Wide Web">WWW</dfn> is an information space where documents and other web resources are identified by Uniform Resource Locators (URLs).</p>
<dialog> (Dialog)
The element is used to create a dialog box or modal within a web page. It is typically used to
present information, receive user input, or confirm an action. The content inside the element is
usually styled as a floating box that overlays the rest of the page.
Example
<html>
<head>
<title>Dialog Example</title>
<style>
/* Style for the dialog box */
dialog {
width: 300px;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<button onclick="openDialog()">Open Dialog</button>
<dialog id="myDialog">
<p>This is a dialog box.</p>
<button onclick="closeDialog()">Close</button>
</dialog>
<script>
function openDialog()
{
document.getElementById('myDialog').showModal();
}
function closeDialog()
{
document.getElementById('myDialog').close();
}
</script>
</body>
</html>
<div> (Division)
The element is a generic container used to group and structure content within an HTML document. It is
a block-level element that does not carry any semantic meaning on its own but can be styled using
CSS and manipulated with JavaScript. The element is commonly used to create divisions or sections
within a webpage.
Example
<!DOCTYPE html>
<html>
<head>
<title>Div Example</title>
<style>
/* Styles for demonstration purposes */
.container
{
border: 1px solid #ddd;
padding: 10px;
margin: 10px;
}
.box {
background-color: #f0f0f0;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<h2>Container Section</h2>
<p>This is a container with some content.</p>
</div>
<div class="box">
<h3>Box Section</h3>
<p>This is a box with some content.</p>
</div>
</body>
</html>
<em> (Emphasis)
The element is used to indicate emphasis, typically causing the enclosed text to be displayed in italics. It is commonly used to emphasize a portion of text, providing a way to convey importance or stress within the context of the document.
Example
<p>This is a <em>very important</em> point in the document.</p>
<embed> (Embed)
The element is used to embed external content or plugins, such as multimedia elements like audio or video players, Java applets, PDF viewers, and more, directly into an HTML document.
The element is used to group related elements within a form and provide a visual and semantic separation. It is often accompanied by the <legend> element, which serves as a caption or title for the grouped content.
The element is used to encapsulate any content that is referenced as a single unit, such as an image, a diagram, a code snippet, or a video, along with its optional caption (<figcaption>). It provides a way to semantically group and associate related content.
The element is used to represent the footer of a section or a page. It typically contains metadata, copyright information, links to related documents, authorship details, or any content that is considered as the closing part of the document or a specific section.
The element is used to create an HTML form that allows users to input data, which can be submitted to a server for processing. It serves as a container for various form elements, such as input fields, checkboxes, radio buttons, buttons, and more.
These elements represent headings with varying levels of importance, where <h1> is the highest and <h6> is the lowest. They are used to structure and organize content, providing a hierarchy of information.
<h1> : Heading 1 (Highest Level)
<h2> : Heading 2
<h3> : Heading 3
<h4> : Heading 4
<h5> : Heading 5
<h6> : Heading 6 (Lowest Level)
Example
<body>
<h1>Main Heading</h1>
<p>This is the main content...</p>
<h2>Subheading 1</h2>
<p>Additional content...</p>
<h3>Subheading 2</h3>
<p>More content...</p>
<!-- Continue with additional headings as needed -->
</body>
<head> (Head)
The element is a container for metadata and other head elements within an HTML document. It includes information about the document, such as the title, character encoding, linked stylesheets, scripts, and more. The content inside the
section is not displayed on the web page but is essential for document structure, search engine optimization, and proper rendering.
Example
<!DOCTYPE html>
<html>
<head>
<title>Head Example</title>
<meta charset="UTF-8">
<meta name="description" content="An example HTML document with metadata">
<meta name="keywords" content="HTML, metadata, example">
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>Main Content</h1>
<p>This is the main content of the document.</p>
</body>
</html>
<headre> (Header)
The element is used to define a header section for a document or a section of a document. It typically contains headings, logos, navigation menus, and other introductory content for the document or a specific section.
Example
<body>
<header>
<h1>My Website</h1>
<p>Welcome to my website. Explore and enjoy!</p>
</header>
<main>
<p>This is the main content of the website...</p>
</main>
</body>
<hr> (Horizontal Rule)
The element is used to create a horizontal rule or line, typically to visually separate content within a document. It is a self-closing tag, and it doesn't have any content. The appearance of the line may vary based on the browser's default styles or additional styles applied through CSS.
Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Rule Example</title>
<style>
/* Style for demonstration purposes */
hr {
border: 1px solid #ddd;
margin: 20px 0;
}
</style>
</head>
<body>
<p>This is some content above the horizontal rule.</p>
<hr>
<p>This is some content below the horizontal rule.</p>
</body>
</html>
<html> (Html)
The element is the root element of an HTML document. It wraps all the content on the entire page, including the <head> and <body> sections. It serves as the container for the entire document and provides information about the document's version (HTML5) through the <!DOCTYPE html> declaration.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML document.</p>
</body>
</html>
<i> (Italic Text)
The element is used to define text that is in an alternative voice or mood, such as emphasizing a word or indicating a technical term. By default, it often renders the text in italics, but its semantic meaning is to convey a change in voice rather than a specific styling.
Example
<p>This is a <i>italicized</i> word in a sentence.</p>
<iframe> (Inline Frame)
The element is used to embed an independent HTML document within the current document. It is commonly used for including external content such as maps, videos, or other web pages. The src attribute specifies the source URL of the embedded content.
The element is used to embed images in an HTML document. It is a self-closing tag that does not have a closing tag. The src attribute specifies the source URL (file path or URL) of the image, and the alt attribute provides alternative text that is displayed if the image cannot be loaded.
Example
<h2>Embedded Image</h2>
<img src="example.jpg" alt="A sample image">
<h2>Image with Width and Height</h2>
<img src="example.jpg" alt="Another image" width="300" height="200">
<input> (Input)
The element is used to create various types of form controls that allow users to enter data or make selections. The type of input control is specified by the type attribute. Common input types include text fields, checkboxes, radio buttons, and more.
The element is used to define text that represents user input from the keyboard, such as keyboard keys, key combinations, or any other kind of text entered through the keyboard.
Example
<p>To open the developer tools in most browsers, press <kbd>F12</kbd> or <kbd>Ctrl + Shift + I</kbd>.</p>
<label> (Label)
The element is used to associate a label with a form control, providing a user-friendly description or name for the control. It is beneficial for accessibility and usability, as clicking on the label can focus or activate the associated form control.
The element is used to link external resources to an HTML document. It is commonly used to link stylesheets, icons, or other external documents. The href attribute specifies the URL of the linked resource, and the rel attribute indicates the relationship between the current document and the linked resource.
Example
<!DOCTYPE html>
<html>
<head>
<title>Link Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is the main content of the website...</p>
</body>
</html>
<main> (Main)
The element is used to represent the main content of an HTML document. It typically contains the primary content of the document, excluding headers, footers, and sidebars. The element is useful for improving accessibility and allowing screen readers to navigate directly to the main content.
The element is used in conjunction with the <area> element to create an image map. An image map allows different regions of an image to be clickable, leading to different destinations or actions.
The element is used to highlight or mark portions of text within the content. It is typically rendered with a background color to distinguish the marked text. The element is often used to indicate search results, annotations, or other relevant portions of the content.
Example
<p>This is a <mark>highlighted</mark> portion of text.</p>
<p>Another example with <mark>multiple</mark> marks in a paragraph.</p>
<menu> (Menu)
The element represents a group of commands or links, providing a list of options for the user. It is typically used in conjunction with the <menuitem> element to create menus for context menus, toolbars, or other types of interactive controls.
The element is used to provide metadata about an HTML document. Metadata includes information such as the character encoding, viewport settings, keywords, and description of the document. Meta tags are placed within the <head> section of an HTML document.
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An example HTML document with metadata">
<meta name="keywords" content="HTML, metadata, example">
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML document.</p>
</body>
</html>
<meter> (Meter)
The element is used to represent a measurement within a given range. It is often used to display a gauge, progress bar, or other visual representation of a value relative to a known range. The value attribute specifies the current value of the measurement, and the min and max attributes define the minimum and maximum values of the range.
The element is used to define a navigation section within an HTML document. It typically contains navigation links, menus, or any other elements that facilitate navigating to different parts of the website or external resources.
Example
<body>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<h1>Main Content</h1>
<p>This is the main content of the website...</p>
</body>
<noscript> (Noscript)
The element is used to provide alternative content that should be displayed if a browser does not support or has disabled JavaScript. The content within the element is only rendered when JavaScript is not available or enabled in the user's browser.
Example
<body>
<h1>Website Content</h1>
<noscript>
<p>This website requires JavaScript to be enabled for full functionality.</p>
</noscript>
<!-- Content that requires JavaScript -->
<script>
document.write('<p>Dynamic content with JavaScript.</p>');
</script>
</body>
<object> (Object)
The element is used to embed external resources, such as images, videos, or other media, into an HTML document. It provides a way to include content that can be displayed by browsers that support plugins, such as Flash or Java.
Example
<body>
<h2>Embedded Video</h2>
<object width="400" height="300" data="example.mp4" type="video/mp4">
<p>Your browser does not support the video tag. You can download the video <a href="example.mp4">here</a>.</p>
</object>
<h2>Embedded Flash Animation</h2>
<object width="400" height="300" data="example.swf" type="application/x-shockwave-flash">
<p>Your browser does not support Flash content. You can download the Flash animation <a href="example.swf">here</a>.</p>
</object>
</body>
<ol> (Ordered List)
The element is used to create an ordered list in HTML. An ordered list represents a list of items where each item is preceded by a numerical or alphabetical marker. Each item in the list is represented by an <li> (list item) element.
Example
<h2>Steps to Make a Sandwich</h2>
<ol>
<li>Get the ingredients:</li>
<li>Spread condiments on the bread:</li>
<li>Add fillings:</li>
<li>Put the slices together:</li>
<li>Cut the sandwich (optional):</li>
</ol>
<optgroup> / <option> (Option Group and Option)
The <optgroup> element is used within a <select> element to group together related <option> elements. It helps organize and structure the options within a dropdown list. The <optgroup> element has a label attribute that specifies the label or title for the group of options.
The element is used to represent the result of a user's action or a calculation. It is often used in conjunction with JavaScript to display the outcome of a form submission or other interactive elements. The content of the element is typically generated dynamically.
The element is used to define a paragraph in HTML. It represents a block of text where the content is typically separated by space and newlines. Browsers typically render paragraphs with space above and below to visually separate them from surrounding content.
Example
<h2>Introduction</h2>
<p>This is the first paragraph of the document. It contains some introductory text.</p>
<h2>Main Content</h2>
<p>This is another paragraph providing additional information in the main content section.</p>
<picture> (Picture)
The element is used to provide multiple sources for an image and allows the browser to choose the most appropriate one based on factors such as the user's screen size, resolution, and other capabilities. It is commonly used in responsive web design to serve different image files for different scenarios.
The element is used to define preformatted text in HTML. Text within a element is displayed in a fixed-width font (usually Courier), and whitespace, such as spaces and line breaks, is preserved. This makes it suitable for displaying code snippets, poetry, or any text where formatting and spacing are crucial.
Example
<body>
<h2>Code Example</h2>
<pre>
function greet() {
console.log("Hello, World!");
}
greet();
</pre>
<h2>Poetry</h2>
<pre>
The woods are lovely, dark, and deep,
But I have promises to keep,
And miles to go before I sleep,
And miles to go before I sleep.
</pre>
</body>
<progress> (Progress)
The element is used to represent the completion progress of a task. It is often used in situations where the completion status is known or can be determined, such as file uploads or download progress. The value attribute specifies the current completion value, and the max attribute defines the maximum possible value.
The element is used to define a short inline quotation in HTML. It is typically used for short, inline quotations within a paragraph or other text. Browsers often add quotation marks around the text enclosed by the element.
Example
<p>Albert Einstein once said: <q>Imagination is more important than knowledge.</q></p>
<ruby>, <rp> and <rt> (Ruby Annotation, Ruby Parenthesis and Ruby Text)
The <ruby> element is used to annotate text with pronunciation or additional information about the text. It is often used in East Asian typography to provide pronunciation guides for characters. The <ruby> element is typically used in conjunction with the <rt> (ruby text) and <rp> (ruby parenthesis) elements.
Example
<body>
<p>Japanese word for cat: <ruby>猫<rp>(</rp><rt>Neko</rt><rp>)</rp></ruby></p>
<p>Chinese character for water: <ruby>水<rp>(</rp><rt>Shuǐ</rt><rp>)</rp></ruby></p>
</body>
<s> (Strikethrough)
The element is used to represent text that has been strikethrough or marked for deletion. It indicates that the text within the element is no longer accurate or should be ignored. It is often used to visually represent changes in documents, such as edited or deleted content.
Example
<p>This is <s>old</s> outdated information. Please refer to the latest version.</p>
<p>The original price was $100, but it is now on sale for <s>$120</s> $90.</p>
<samp> (Sample Output)
The element is used to define sample output or examples of computer code in HTML. It is often used to display the output of a program or script within the context of a document. The content within the element is typically displayed in a monospace font.
Example
<p>Command to display current directory: <samp>pwd</samp></p>
<p>Sample code output: <samp>Hello, World!</samp></p>
<script> (Script)
The element is used to embed or reference JavaScript code within an HTML document. JavaScript is a programming language that allows for dynamic and interactive behavior on web pages. The <script> element can be placed in the <head> or <body> of the HTML document.
The element is a container representing the parts of the document or application with form controls or other content related to performing a search or filtering operation. The element semantically identifies the purpose of the element's contents as having search or filtering capabilities. The search or filtering functionality can be for the website or application, the current web page or document, or the entire Internet or subsection thereof.
The element is used to define a section in an HTML document. It is a semantic container that helps organize the content into thematic groups. The content within a <section> typically relates to a specific theme or topic, and it is often used in conjunction with heading elements (<h1> to <h6>) to provide structure.
Example
<body>
<section>
<h2>Introduction</h2>
<p>This is the introduction section of the document.</p>
</section>
<section>
<h2>Main Content</h2>
<p>This is the main content section of the document.</p>
</section>
<section>
<h2>Conclusion</h2>
<p>This is the conclusion section of the document.</p>
</section>
</body>
<slot> (Web Component Slot)
The element is used in conjunction with the Shadow DOM to define insertion points where the content can be distributed into a web component. It allows the developer to create customizable and reusable components by providing named slots where content can be assigned.
The element is used to define smaller text within the content of an HTML document. It is often used to represent fine print, legal text, or any content that should be displayed in a smaller font size without conveying a change in importance.
Example
<p>MDN Web Docs is a learning platform for Web technologies and the software that powers the Web.</p>
<hr />
<p><small>The content is licensed under a Creative Commons Attribution-ShareAlike 2.5 Generic License.</small></p>
<source> (Media or Image Source)
The element is used within the <audio> and <video> elements to specify alternative media resources. It allows you to provide multiple sources for the same media content, ensuring compatibility across different browsers and devices. The browser will choose the first source it supports.
Example
<video width="400" height="300" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<span> (Content Span)
The element is an inline container used to group and apply styles to a specific portion of text or inline elements. It doesn't add any semantic meaning on its own but can be useful when you want to target or style a specific part of your content.
Example
<!DOCTYPE html>
<html>
<head>
<title>Span Element Example</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>This is a <span class="highlight">highlighted</span> word in a sentence.</p>
<p><span style="font-style: italic;">This is italic text.</span></p>
</body>
</html>
<strong> (Strong Importance)
The element is used to define text with strong importance or importance that is more significant than the surrounding text. By default, browsers usually render text within <strong> tags as bold, but the primary purpose is to convey importance rather than styling.
Example
<p>This is a <strong>strongly emphasized</strong> statement.</p>
<p><strong>Caution:</strong> Handle with care.</p>
<style> (Style Information)
The element is used to embed or link to styles (CSS) within an HTML document. It can be placed in the
of the document to define internal styles directly or can be used to link to an external CSS file.
Example
<!DOCTYPE html>
<html>
<head>
<title>Style Element Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
p {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text on my web page.</p>
</body>
</html>
<sub> (Subscript)
The element is used to define subscript text in HTML. Subscript text appears smaller and below the baseline of the rest of the text. It is often used for mathematical notations, chemical formulas, or any content where text needs to be displayed in a lower position.
Example
<p>The chemical formula for water is H<sub>2</sub>O.</p>
<p>E=mc<sup>2</sup> describes the equivalence of energy and mass in the theory of relativity.</p>
<summary> (Disclosure Summary)
The element is used in conjunction with the <details> element to provide a summary or caption for a disclosure widget. The <details> element represents a disclosure widget from which the user can obtain additional information or controls by interacting with it. The element provides the visible heading or summary text for the widget.
Example
<details>
<summary>Click to see more details</summary>
<p>This is the additional information that can be revealed when the user clicks on the summary.</p>
</details>
<sup> (Superscript)
The element is used to define superscript text in HTML. Superscript text appears smaller and above the baseline of the rest of the text. It is often used for notations, footnotes, or any content where text needs to be displayed in an elevated position.
Example
<p>The boiling point of water is 100<sup>o</sup>C.</p>
<p>This text contains a superscript <sup>1</sup> for a footnote.</p>
<table> (Table)
<table>: This tag defines the beginning of the table.
<thead>: This is the table header section, where you usually place column headings.
<tr>: Stands for "table row," and it defines a row in the table.
<th>: Stands for "table header," and it defines a header cell in the table.
<tbody>: This is the table body section, where the actual content of the table is placed.
<td>: Stands for "table data," and it defines a standard cell in the table.
<tfoot>: stands for "table footer" in HTML. It is used to group the footer content in a table
The element is used to declare HTML content that can be cloned and inserted into the document later using JavaScript. The content inside a <template> element is not rendered when the page loads and remains inert until activated. It is a way to define reusable content or content that should not be displayed initially.
Example
<body>
<template id="myTemplate">
<p>This is a template content.</p>
</template>
<button onclick="showTemplate()">Show Template</button>
<script>
function showTemplate() {
// Clone the template content and append it to the body
const template = document.getElementById('myTemplate');
const clone = document.importNode(template.content, true);
document.body.appendChild(clone);
}
</script>
</body>
<textarea> (Textarea)
The element is used to create a multiline text input control in HTML. It allows users to enter and edit longer blocks of text and is commonly used in forms where users need to provide comments, descriptions, or other free-form text.
<p>The conference starts at <time datetime="2023-11-20T09:00">9:00 AM</time>.</p>
<p>This document was last updated on <time datetime="2023-11-20T15:30:00+00:00">November 20, 2023, 3:30 PM UTC</time>.</p>
<title> (Document Title)
The element is used to define the title of an HTML document. It is placed within the <head> section of the document and represents the title that appears in the browser's title bar or tab. The text within the element is also used by search engines for indexing and displaying search results.
Example
<head>
<title>Document Title Example</title>
</head>
<track> (Embed Text Track)
The element is used to specify timed text tracks for media elements such as <audio> and <video>. It is commonly used for closed captions, subtitles, or other textual information that is synchronized with the media content.
Example
<video controls>
<source src="example.mp4" type="video/mp4">
<track src="captions.vtt" kind="captions" srclang="en" label="English">
Your browser does not support the video tag.
</video>
<ul> (Unordered List)
The element is used to create an unordered list in HTML. An unordered list typically consists of a series of list items <li> that are preceded by bullet points. It is commonly used to represent a list of items with no particular order or sequence.
The element is used to define the name of a variable in a mathematical expression or programming context. It is often used to represent a placeholder for a variable or to highlight a variable within a sentence or paragraph.
Example
<p>In programming, you can declare a variable like <code>var <var>myVariable</var> = 10;</code>.</p>
<video> (Video)
The element is used to embed video content in HTML documents. It supports various video formats, and it allows for controls such as play, pause, and volume. You can include one or more <source> elements within the <video> element to provide different video formats for better browser compatibility.
Example
<h2>Sample Video</h2>
<video width="640" height="360" controls>
<source src="sample.mp4" type="video/mp4">
<source src="sample.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<wbr> (Word Break Opportunity)
The element is used to suggest a possible word break in a long string of text without adding a visible character. It is particularly useful for preventing long words or strings of characters from overflowing beyond the boundaries of their container. The browser can choose an appropriate place to break the word if needed.
Example
<p>This is a longwordthatmayneedtobebroken using <wbr>the <wbr><wbr> element.</p>
