HTML Cheat Sheet (Ultimate List with ALL Tags)

Discover the power of HTML5 with our comprehensive HTML cheat sheet. This ultimate resource provides a complete collection of all HTML5 tags, accompanied by practical examples, to empower developers of all levels.

Is this your first time learning or using HTML?

Watch this free 4-hour YouTube course to better understand this HTML Cheat Sheet.

HTML Page Structure

<!DOCTYPE html>: Every HTML document must begin with a DOCTYPE declaration.
<html>: HTML (Hyper Text Markup Language) is a language used to define the structure of online pages. Like building blocks with semantic meaning. It represents the root of an HTML page, it is also known as the root element. All other components must be descended from this one.
<head>: It contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.
- <base>: Specifies the base URL to use for all relative URLs in a document. There can be only one base element.
- <link>: This element is most commonly used to link to CSS, favicons, or icons. Specifies relationships between the current document and an external resource.
- <meta>: This HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <title>…
- <style>: Contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing this element.
- <title>: The title of the website that will be displayed in the web browser.
<body>: It represents the content of an HTML document. There can be only one body element. It is always used after <head>.
- <header>: The website’s header usually contains the company logo, a search bar, and titles.
  - <nav>: Usually used inside the header element. It contains navigation links.
- <main>: The dominant content of the body of a document. Use only one <main> for each document.
  - <article>: It should be used for independent content with a clear topic. Like a magazine or newspaper article, or a blog entry, a forum post, a product card or a user comment.
    - <h1>-<h6>: A heading element should always be used to identify each article. Use only one h1 for each document.
- <aside>: An aside is just a sidebar or another section with complementary text indirectly related to the document’s main content.
- <footer>: Footer of the Website: Legal, Info, Address, Copyright…
  - <address>: Usually used inside the footer. Contact information may include a physical address, URL, email address, phone number, social media, and so on.

More HTML Structure Elements

<blockquote>: Indicates that the enclosed text is an extended quotation. Can be used with the “cite” attribute.
<hgroup>: Represents a group of headers with any secondary content, such as subheadings, an alternative title, or a tagline. It groups a single h1-h6 element with another.
<section>: Element used to group related content together. It helps make web pages easier to understand and navigate by dividing them into smaller parts. Sections should always contain a h1-h6 element.
<pre> Preformatted text which is to be presented exactly as written in the HTML file. For example:

<pre>
 /\_/\  
( o.o )
 > ^ <
</pre>

<dl>: Description List.
- <dt>: Description Term.
- <dd>: Description Details.

<dl>
  <dt>Cat</dt>
  <dd>A small domesticated mammal with soft fur and retractile claws.</dd>

  <dt>Dolphin</dt>
  <dd>A highly intelligent marine mammal known for its strong communication skills.</dd>

  <dt>Eagle</dt>
  <dd>A large predatory bird with excellent eyesight and powerful wings.</dd>
</dl>

<ul>: Unordered List.
<ol>: Ordered List.
- <li>: List item.
<menu>: semantic alternative to <ul>.

Unordered List Item 1
Unordered List Item 2

Unordered List Item inside a List Item

Unordered List Item inside a List Item inside a List Item

Unordered List Item 3

Ordered List Item 1
Ordered List Item 2

Ordered List Item inside a List Item

Ordered List Item inside a List Item inside a List Item

Ordered List Item 3

Ordered Lists with attributes
Ordered Lists with “Reversed” attribute

Ordered List with attribute
Ordered List with “Start” attribute with “110” value

Ordered List with attribute
Ordered List with “Type” attribute with “a” value

Ordered List with attribute
Ordered List with “Type” attribute with “A” value

Ordered List with attribute
Ordered List with “Type” attribute with “i” value

Ordered List with attribute
Ordered List with “Type” attribute with “I” value

<ul>
   <li>Unordered List Item 1</li>
   <li>Unordered List Item 2</li>
   <ul>
      <li>Unordered List Item inside a List Item</li>
            <ul>
                <li>Unordered List Item inside a List Item inside a List Item </li>
            </ul>
        </ul>
        <li>Unordered List Item 3</li>
    </ul>

    <ol>
        <li>Ordered List Item 1</li>
        <li>Ordered List Item 2</li>
        <ol>
            <li>Ordered List Item inside a List Item</li>
            <ol>
                <li>Ordered List Item inside a List Item inside a List Item </li>
            </ol>
        </ol>
        <li>Ordered List Item 3</li>
    </ol>

    <ol reversed>
        <li>Ordered Lists with attributes</li>
        <li>Ordered Lists with "Reversed" attribute</li>
    </ol>

    <ol start="110">
        <li>Ordered List with attribute</li>
        <li>Ordered List with "Start" attribute with "110" value</li>
    </ol>

    <ol type="a">
        <li>Ordered List with attribute</li>
        <li>Ordered List with "Type" attribute with "a" value</li>
    </ol>
    <ol type="A">
        <li>Ordered List with attribute</li>
        <li>Ordered List with "Type" attribute with "A" value</li>
    </ol>
    <ol type="i">
        <li>Ordered List with attribute</li>
        <li>Ordered List with "Type" attribute with "i" value</li>
    </ol>
    <ol type="I">
        <li>Ordered List with attribute</li>
        <li>Ordered List with "Type" attribute with "I" value</li>
    </ol>

HTML5 Basic Template (Copy and Paste)

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="author" content="Your Name">
      <meta name="description" content="Website Description">
      <title></title>
      <link href="yourstylesheet.css" rel="stylesheet" />
      <link rel="icon" type="image/x-icon" href="yourfavicon.png">
   </head>

   <body>
      <header>
         <nav> </nav>
      </header>
      <main>
         <article>
         <h1>Title</h1>
         </article>
      </main>
      <aside>
      </aside>
      <footer>
         <address> </address>
      </footer>
   </body>
</html>

Block Elements

<div>: It is used to create a container without semantic meaning that groups together multiple elements, such as images, text, or other HTML elements. It helps in the organization and structure of a webpage’s layout by dividing it into distinct sections or blocks. It doesn’t affect the webpage content until it is styled with CSS.
<span>: Inline text semantics. It is used to apply styles or manipulate specific parts of text within a larger block of content. It allows you to make individual words or phrases stand out or behave differently from the rest of the text on a webpage.
<p>: This is a paragraph. Every paragraph is a Line Break, because paragraphs are block elements.
<hr>: The Thematic Break (Horizontal Rule) element. Don’t use size or noshade attributes, better style with CSS. This element is now defined in semantic terms.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a span element within the div.

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <span>This is a span element within the div.</span>
  <hr>
</div>

Inline Elements: Text semantics

Hyperlinks (Anchor Element)

Using <a> together 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.

<p><a href="https://gamedevexp.com" target="_blank">Link to GameDevEXP Website</a></p>

<a> Target Attributes:

_self: the current browsing context. (Default)
_blank: usually a new tab, but users can configure browsers to open a new window instead. Using target=”_blank” without rel=”noreferrer” and rel=”noopener” makes the website vulnerable to window.opener API exploitation attacks, although note that, in newer browser versions setting target=”_blank” implicitly provides the same protection as setting rel=”noopener”.
_parent: the parent browsing context of the current one. If no parent, behaves as _self.
_top: the topmost browsing context (the “highest” context that’s an ancestor of the current one). If no ancestors, behaves as _self.

Anchor Element HTML Cheat Sheet:

<p><a href="#deprecated-tags">Jump to the #id</a></p>
<p><a href="#">Jump to the page top</a></p>
<p><a href="/">Go back to index page</a></p>
<p><a href="mailto:example@gmail.com">Send email link</a></p>
<p><a href="tel:+49.123.45678">Phone link</a></p>
<p><a href="image.png" download>Downloads the file</a></p>
<p><a href="image.png" download="new-name">Downloads and renames the file</a></p>
<p><a href="https://gamedevexp.com/es" hreflang="ES">Link to a website in spanish</a></p>

Bold and Italicized Text

Bold: <strong> vs <b>

Use <strong> for elements of “strong importance”, such as items that are extremely serious or urgent (such as warnings). Or even a sentence that is important to the web page, or you could just try to emphasize that some words are more important than others.

The <b> element is known as the “Bring Attention to Element“. Use it for instances where you would typically show text in boldface (without any indication of exceptional importance), such as keywords in a summary or product names in a review.

Italicized : <em> vs <i>

The <em> or <i> tags should not be used for styling purposes. The correct way to style text in italics is to use the CSS font-style property.

<em>: Italicized Emphasis Element. This is the right tag to use if you want to emphasize text.
<i>: This element indicates a shift in the text’s mood, tone, or quality. This includes a wide range of frequent italic use scenarios, including scientific names, terms in other languages, foreign words, ideas from fictional characters, and definitions.

Quotes and citations

<cite>: Use it to reference to a creative work, such as a book, poem, song, film, painting, article, quote or sculpture. For improved accessibility and SEO, it is typically used with <blockquote>.
<q>: use it for enclosing short inline quotations.

<blockquote>
  <p>"Even the smallest person can change the course of the future."</p>
  <cite>Galadriel</cite>
</blockquote>

<p>In the words of Gandalf, <q>All we have to decide is what to do with the time that is given to us.</q></p>

“Even the smallest person can change the course of the future.”
Galadriel

In the words of Gandalf, All we have to decide is what to do with the time that is given to us.

Other HTML Inline Elements

<abbr>: Defines an abbreviation or acronym.
- <dfn>: Defines an element. Usually combined with <abbr>. For example:

<dfn><abbr title="United States of America">USA</abbr></dfn>

USA

<br>: Line Break.
<wbr>: Line break opportunity.
<code>: Used to display code, such as the HTML examples on this website.
<data>: used to encapsulate machine-readable data within the document’s content.
<sub> and <sup>: Subscript and superscript elements. Usually rendered with a lowered or raised baseline.

<p>Your character's maximum health is <data value="100">100</data>. Use the health potion to increase your HP<sup>+10</sup> points. Defeat the Malachi<wbr>thornblood final boss to win <sub>+2500</sub> EXP.</p>

Your character’s maximum health is 100. Use the health potion to increase your HP⁺¹⁰ points. Defeat the Malachithornblood final boss to win ₊₂₅₀₀ EXP.

<del> and <ins>: the <del> element is used to indicate deleted or removed text, while the <ins> element is used to indicate inserted or added text.
<s>: The strikethrough element is suitable for marking content as no longer accurate or valid. It should not be confused with the <del> element. While they both represent strikethrough text, <del> is specifically used to indicate that content has been deleted or removed from a document, such as in a revision or an edit. It carries a stronger implication of removal.

<p>In the latest game patch, the developers <del>reduced the damage of the Sniper Rifle</del> and <ins>introduced a new character class</ins>.</p>

<p>Additionally, they <s>temporarily disabled the multiplayer mode</s> to address server issues.</p>

In the latest game patch, the developers ~~reduced the damage of the Sniper Rifle~~ and introduced a new character class.

Additionally, they ~~temporarily disabled the multiplayer mode~~ to address server issues.

<kbd>: indicates a keyboard input, mostly text or commands typed on a keyboard.
<samp>: Sample output element. Shows examples of computer code or output, like what you see on a screen, such as when you play a game or use an app. It’s like taking a picture of what the computer is showing you.
<var>: Represents a variable in a mathematical expression or a programming context.

<p>To open the game menu, press <kbd>Enter</kbd>.</p>
<p>The <samp>Score: <var>500</var></samp> will be displayed on the screen.</p>

To open the game menu, press Enter.

The Score: 500 will be displayed on the screen.

<mark>: use it to highlight or emphasize specific text within a paragraph.
<small>: side comment. Like copyright and legal info.
<time>: Use it to represent a specific date, time, or duration in a way that is both human-readable and machine-readable.
<u>: Unarticulated annotation, use it to indicate a non-textual annotation. In modern web design, its use for styling purposes is discouraged, and it is usually recommended to use CSS instead.

<p>Congratulations! You have <u>competed</u> the quest and found the <mark>legendary treasure</mark> hidden deep within the dungeon.</p>
<p><small>Disclaimer: The ownership and distribution of the legendary treasure are subject to the rules and regulations set forth by the Kingdom of Adventure. Any unauthorized use or duplication is strictly prohibited.</small></p>
<p>Quest completed on <time datetime="2023-04-10">April 10, 2023</time>.</p>

Congratulations! You have competed the quest and found the legendary treasure hidden deep within the dungeon.

Disclaimer: The ownership and distribution of the legendary treasure are subject to the rules and regulations set forth by the Kingdom of Adventure. Any unauthorized use or duplication is strictly prohibited.

Quest completed on April 10, 2023.

Language Representation in HTML

<bdi>: Bidirectional Isolate element
<bdo>: Bidirectional Text Override.

<p>
  Here is a sentence with some text in a different language: 
  <bdi lang="ar">مرحبًا بك</bdi>.
<br>
  Now let's display it in a different text direction: 
  <bdo dir="rtl"><bdi lang="ar">مرحبًا بك</bdi></bdo>.
</p>

Here is a sentence with some text in a different language: مرحبًا بك.
Now let’s display it in a different text direction: مرحبًا بك.

<ruby>: Ruby annotation element. Use it to annotate the text with pronunciation guide or furigana.
- <rp>: Ruby fallback Parenthesis. It is used to provide parentheses as fallback content for browsers that do not support ruby annotations.
- <rt>: Ruby text element. Use it for pronunciation guide.

<p>漢字
   <ruby>学
      <rt>がく</rt>
   </ruby>
習
   <ruby>楽
      <rt>たの</rt>
   </ruby>
しい。
   <rp>(</rp>
   <rt>かんじがくしゅうたのしい。)</rt>
   <rp>)</rp>
</p>

漢字学がく習楽たのしい。 ( かんじがくしゅうたのしい。) )

HTML Character Entities (Special Characters)

Character	Description	Entity Name	Entity Number
	non-breaking space
<	less than	<	<
>	greater than	>	>
&	ampersand	&	&
“	double quotation mark	"	"
‘	single quotation mark (apostrophe)	'	'
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
€	euro	€	€
©	copyright	©	©
®	registered trademark	®	®

Figures, Images and Multimedia Elements

File Paths

Absolute path: https://gamedevexp.com/images/myimage.png
Relative path: ./images/myimage.png
- Up a folder: ../images/myimage.png
- Current folder directory: ./images/myimage.png
- Go inside a folder: ./images/subfolder/myimage.png

Images

<figure>: Encapsulates a single piece of content, such as an image, illustration, or diagram, as well as its optional caption.
- <figcaption>: Caption for the <figure>.
<img>: It displays an image on a webpage.
<picture>: Use it for providing different versions of the same image to fit different devices or screen sizes. It’s like having multiple pictures of the same thing, but in different sizes or formats. The browser will choose the best version to show based on the device or screen size.

random image 300x150 — Random Image from Picsum Photos

<figure>
<img src="https://picsum.photos/300/150" alt="random image 300x150">
<figcaption>Random Image from Picsum Photos</figcaption>
</figure>

Map and Area

An image map, is just an image with predefined clickable areas. It allows geometric areas on an image to be associated with hyperlinks.

The <area> element is used only within a <map> element.

There are three possible area shapes: rect, circle, and poly. To create your own image map, visit a website like Image-Map.

Click on the dog or the cat to try it.

<img src="https://pixabay.com/photos/dog-cat-pets-mammals-animals-2606759/" usemap="#image-map-example">

<map name="image-map-example">
    <area target="_blank" alt="Cat Image" title="Cat" href="https://en.wikipedia.org/wiki/cat" coords="5,99,324,318" shape="rect">
    <area target="_blank" alt="Dog Image" title="Dog" href="https://en.wikipedia.org/wiki/dog" coords="333,242,335,308,420,306,514,428,640,310,639,101,423,116" shape="poly">
</map>

Audio

Use <audio> to embed sound content in HTML documents. It may contain one or more audio sources, represented using the src attribute or the source element: the browser will choose the most suitable one. It can also be the destination for streamed media, using the attribute MediaStream.

Listen to a Duck:

<figure>
   <figcaption>Listen to a Duck:
   </figcaption>
   <audio controls src="https://www.freesoundslibrary.com/wp-content/uploads/2017/11/duck-quack.mp3">
      <a href="https://www.freesoundslibrary.com/wp-content/uploads/2017/11/duck-quack.mp3">
      </a>
   </audio>
</figure>

Common audio attributes

Audio attributes:
autoplay
controls: If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback.
anonymous
use-credentials
loop
muted
preload

Video

Since modern browsers no longer support browser plug-ins, embedding media content using <embed> might not be the most reliable method for greater compatibility. Using the <video> element combined with the appropriate fallback settings is a more commonly accepted solution.

Use <source> to specify the video location. This element can also be used for audio and images.
Use <track> if you want to apply a subtitle file.

<video controls width="250">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
</video>

iFrame

The <iframe> element allows you to embed content from another source or website into your webpage, enabling you to display and interact with content from another website within your own document. For example a video, map, or another website.

<iframe width="250" height="160" src="https://www.youtube.com/embed/kUMe1FH4CHE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Object

The <object> element is used for embedding external resources with specific media types. Like .pdf or .docx files.

<object type="application/pdf" data="https://web.stanford.edu/group/csp/cs21/htmlcheatsheet.pdf" width="250" height="250">
</object>

Tables: HTML Cheat Sheet

<table>: Use this tag to create a table.
<caption>: defines the table’s title, caption, or topic.
<colgroup>: Group of columns within a table
<col>: Table column.
<thead>: Table head.
<tbody>: Table body element.
<tfoot>: Table foot element.
- <th>: Table header.
- <tr>: Table row.
- <td>: Table data.

Final Fantasy Games
Title	Release Year	Main Protagonist	Genre
Final Fantasy VII	1997	Cloud Strife	Role-playing
Final Fantasy X	2001	Tidus	Role-playing
Total Number of Games: 15

<table>
  <caption>Final Fantasy Games</caption>
  <colgroup>
    <col span="1" style="background-color: lightblue;">
    <col span="3" style="background-color: lightgray;">
  </colgroup>
  <thead>
    <tr>
      <th>Title</th>
      <th>Release Year</th>
      <th>Main Protagonist</th>
      <th>Genre</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Final Fantasy VII</td>
      <td>1997</td>
      <td>Cloud Strife</td>
      <td>Role-playing</td>
    </tr>
    <tr>
      <td>Final Fantasy X</td>
      <td>2001</td>
      <td>Tidus</td>
      <td>Role-playing</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">Total Number of Games: 15</td>
    </tr>
  </tfoot>
</table>

Forms: HTML Cheat Sheet

<button>: Interactive button that, when pressed, executes a certain action. Used frequently in forms.

<button type="button" onclick="alert('Hello, World!')">Click Me!</button>

<form>: creates an interactive section with input fields and other elements for collecting and submitting user data.
<fieldset>: is used to group related form elements together, creating a visual and organizational boundary for better user understanding.
- <legend>: Caption for the content of the <fieldset>.
<label>: is used to provide a descriptive name or caption for an associated form control, making it more accessible and user-friendly.
<datalist>: It provides a list of suggested options or choices for user input in a user-friendly manner. Always used in combination with <option>. The “list” attribute and the “id” of the data list should always be the same.
<select>: Menu of options.
- <optgroup>: makes a group of options inside a <select>.

<form action="" method="get" class="form-example">
<fieldset>
<legend>Choose your favorite pet</legend>
<label for="myDataList">Pet list:</label>
<input type="text" name="myDataList" id="myDataList" list="myDataListOptions">

<datalist id="myDataListOptions">
<option value="Cat"></option>
<option value="Dog"></option>
<option value="Fish"></option>
</datalist>
</fieldset>

<fieldset>
<legend>Choose a movie</legend>
<label for="films">Select a Film:</label>
<select id="films">
  <optgroup label="Action">
    <option value="avengers">Avengers: Endgame</option>
    <option value="john-wick">John Wick</option>
  </optgroup>
  <optgroup label="Comedy">
    <option value="the-hangover">The Hangover</option>
    <option value="superbad">Superbad</option>
  </optgroup>
  <optgroup label="Drama">
    <option value="forrest-gump">Forrest Gump</option>
    <option value="pulp-fiction">Pulp Fiction</option>
  </optgroup>
</select>
</fieldset>

<label for="progress">Meter: </label>
<meter id="progress"
       min="0" max="100"
       value="50">
</meter>
</form>

<textarea>: provides a multi-line text input field for users to enter and edit longer passages of text on a web page.

Leave a message:

<label for="message">Leave a message:</label>
<textarea id="message" name="message" rows="4" cols="40" placeholder="Enter your message here...">
</textarea>

<meter>: use it to represent a measurement within a known range. It is often used to display values like percentages, ratings, or any other type of measurable quantity.
<progress>: use it to show the progress or completion of a task or process.

Battery Level: 80%

File Upload Progress: 75%

<p>Battery Level: <meter value="0.8">80%</meter></p>

<p>File Upload Progress: <progress value="75" max="100">75%</progress></p>

<output>: It displays the outcome of a calculation or user action. It can be used to show the results of a calculation, a form submission, or any other dynamic output.

<form oninput="result.value = Number(x.value) + Number(y.value)">
  <label for="x">Enter a number:</label>
  <input type="number" id="x" name="x">

  <label for="y">Enter another number:</label>
  <input type="number" id="y" name="y">

  <output name="result" for="x y"></output>
</form>

Form Inputs

<input>: Use it to create interactive fields where users can enter or select data, such as text, numbers, checkboxes, or radio buttons, on a webpage.
- type=”button”
- type=”range”
- type=”reset”
- type=”search”
- type=”submit”
- type=”tel”
- type=”time”
- type=”url”
- type=”week”
- type=”color”
- type=”date”
- type=”datetime-local”
- type=”email”
- type=”file”
- type=”hidden”
- type=”image”
- type=”month”
- type=”number”
- type=”password”

type=”text”

Write something:

<label for="myEnterText">Write something:</label>
<input type="text" name="myEnterText" id="myEnterText" minlength="2" maxlength="8" placeholder="Enter text..." autocomplete="on" required>

type=”radio”: Only one radio button in a group can be selected. Group them with the name attribute.

Radio Button 1

Radio Button 2

Radio Button 3

<input type="radio" name="myRadioButtons" id="myRadioButton1" value="1" checked>
<label for="myRadioButton1">Radio Button 1</label>
<input type="radio" name="myRadioButtons" id="myRadioButton2" value="2">
<label for="myRadioButton2">Radio Button 2</label>
<input type="radio" name="myRadioButtons" id="myRadioButton3" value="3">
<label for="myRadioButton3">Radio Button 3</label>

type=”checkbox”: Checkboxes are really similar to buttons, but more than one can be selected.

Checkbox 1:

Checkbox 2:

Checkbox 3:

<input type="checkbox" name="myCheckboxes" id="myCheckbox1" value="1" checked>
<label for="myCheckbox1">Checkbox 1:</label>
<input type="checkbox" name="myCheckboxes" id="myCheckbox2" value="2">
<label for="myCheckbox2">Checkbox 2:</label>
<input type="checkbox" name="myCheckboxes" id="myCheckbox3" value="3">
<label for="myCheckbox3">Checkbox 3:</label>

Scripting & Web Component

<canvas>: Use with JavaScript. Either with the canvas scripting API or the WebGL API to draw graphics and animations.
<noscript>: Defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.
<script>: Used to embed executable code or data; this is typically used to embed or refer to JavaScript code.
<slot>: Part of the Web Components technology suite. Is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.
<template>: A mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.

Interactive HTML Elements

<details>: Closed text block that can be displayed. Used in combination with <summary>.

Open by clicking the left arrow

Keep learning HTML! 😀

<details>
   <summary>Open by clicking the left arrow 
   </summary>
   <p>Keep learning HTML! :D</p>
</details>

<dialog>: Pop-up Window.

<dialog open>
   <p>This is a dialog element!</p>
   <form method="dialog">
      <button>Close</button>
   </form>
</dialog>

Deprecated HTML Tags:

<acronym>: Don’t use this element. Use the <abbr> element instead.
<applet>: Obsolete. Embeds a Java applet into the document. Use <object> instead.
<bgsound>: Obsolete. Use <audio> instead.
<big>: Big is NOT supported in HTML5. Use the CSS “font-size” property to adjust the font size.
<blink>: Blink is NOT supported in HTML5. Use CSS instead.
<center>: Center is NOT supported in HTML5. Use CSS instead.
<dir>: Obsolete. Use <ul> instead.
<font>: Do not use this element. Use the CSS Fonts properties to style text.
<frame>: Obsolete. Use <iframe> instead.
<frameset>: Obsolete. Use <iframe> instead.
<image>: Obsolete. Use <img> instead.
<keygen>: Obsolete.
<marquee>: Obsolete.
<menuitem>: Obsolete.
<nobr>: Do not use this element. Use the CSS property “white-space”.
<noembed>: Obsolete.
<noframes>: Obsolete.
<param>: Obsolete. Use <object> instead.
<plaintext>: Obsolete.
<rb>: Ruby Base element. Obsolete.
<rtc>: Ruby Text Container element. Obsolete.
<spacer>: Obsolete.
<strike>: Obsolete. Use <del> or <s> instead.
<tt>: Teletype Text. Obsolete.
<xmp>: Obsolete.