• All
  • Important
  • HTML5
  • Avoid
  • Singleton
  • a
    Anchor tag or hyperlink. Link to external URLs or sections on the page.
    External link in a paragraph 
    <p>Just a simple <a href="http://wwweeebbb.com/">link</a> in a paragraph.</p>

    Just a simple link in a paragraph.

    Relative to a page on the same site 
    Check out <a href="/css/editor/">this page</a> on our website!
    Check out this page on our website!
    An English link opening in new tag, setting search engines not to follow. 
    <a href="http://wwweeebbb.com/" target="_blank" rel="nofollow" hreflang="en">Click here!</a>
    Click here!
  • abbr
    Abbreviation or an acronym.
    Underlines the text and explains the text on hover.
    Use <abbr title="Hypertext Markup Language ">HTML</abbr>, 
<abbr title="Cascading Style Sheets">CSS</abbr> and 
<abbr title="JavaScript">JS</abbr> 
to create stunning web pages!
    Use HTML, CSS and JS to create stunning web pages!
  • acronym
    Acronym or abbreviation.
    Use <abbr> instead!
    Acronyms are not supported in <acronym title="Hypertext Markup Language">HTML</acronym>5!
  • address
    Wraps the contact information of the page.
    <address>
    By <a href="mailto:john@html6.com">John</a>.<br>
    Visit us at: html6.com<br>
    Milky Way 10, Chicago IL<br>
</address>
    By John.
    Visit us at: html6.com
    Milky Way 10, Chicago IL
  • applet
    Embedded applet.
    Use <embed> or <object> instead!
    <applet code="demo.class" width="100" height="100" alt="Cool demo">
    Embedded Java applet.
</applet>
  • area
    A clickable area inside an image-map.
    <img id="My-Image-Map" src="https://html-css-js.com/images/demo2x2.jpg" border="0" width="130" height="135" orgWidth="130" orgHeight="135" usemap="#wwweeebbbImgMap" alt="cube" />
<map name="wwweeebbbImgMap" id="wwweeebbbImgMap">
    <area  alt="top" title="Top face" href="/html/" shape="poly" coords="14,41,63,11,112,36,72,66" style="outline:none;" target="_blank" />
    <area  alt="left" title="Left face" href="/css/" shape="poly" coords="13,47,17,92,62,127,64,74" style="outline:none;" target="_self" />
    <area  alt="front" title="Front face" href="/js/" shape="poly" coords="77,79,73,124,112,93,121,42" style="outline:none;" target="_self" />
</map>
    cube top left front
    The three faces of the cube link to different pages. Hover your mouse to see the tooltips!
  • article
    Wraps the article, the content of the page.
    <header>
    <div id="logo">Logo</div>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/link">Page</a></li>
        </ul>
    </nav>
</header>
<article>
    <h2>Title 1</h2>
    <p>Content 1</p>
</article>
<article>
    <h2>Title 2</h2>
    <p>Content 2</p>
</article>
<section>Just a section</section>
<aside>Sidebar</aside>
<footer>
    <p>&copy; HTML-CSS-JS.com</p>
    <address>Contact <a href="mailto:me@ HTML-CSS-JS.com">email</a></address>
</footer>
  • aside
    The section aside from the page which should be related to the surrounding content.
    <header>
    <div id="logo">Logo</div>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/link">Page</a></li>
        </ul>
    </nav>
</header>
<article>
    <h2>Title 1</h2>
    <p>Content 1</p>
</article>
<article>
    <h2>Title 2</h2>
    <p>Content 2</p>
</article>
<section>Just a section</section>
<aside>Sidebar</aside>
<footer>
    <p>&copy; HTML-CSS-JS.com</p>
    <address>Contact <a href="mailto:me@ HTML-CSS-JS.com">email</a></address>
</footer>
  • audio
    Audio content for playing MP3, Waw or Ogg files on the page.
    <audio controls>
    <source src="sound.ogg" type="audio/ogg">
    <source src="sound.mp3" type="audio/mpeg">
    Audio not supported.
</audio>
  • b
    Bold text that stands out.
    Normal text, <b>bold text</b> 
and <strong>strong text</strong>.
    Normal text, bold text and strong text.
  • base
    Specifies the base URL and/or target for the relative URLs on the page.
    <head>
  <base href="https://html-css-js.com/images/" target="_blank">
</head>
<p>
    <img src="demo2x2.jpg" width="100" height="104" alt="puzzle cube"><br />
    <a href="/html/">HTML Code</a>
</p>

    puzzle cube
    HTML Code

  • basefont
    Defines the default color, size, and text font.
    Use CSS instead!
    <head>
    <basefont color="blue" size="12">
</head>
<body>
    <h1>Heading</h1>
    <p>Paragraph.</p>
</body>
  • bdi
    Bidirectional isolation for a span of text that might be formatted in a different direction from other text outside of it.
    <p dir="ltr">The <bdi>رمز هتمل</bdi> arabic word <br />
is displayed right-to-left.</p>

    The رمز هتمل arabic word
    is displayed right-to-left.

  • bdo
    Define right-to-left text.
    <p>This text goes left to right and <br />
<bdo dir="rtl">this goes right to left.</bdo></p>

    This text goes left to right and
    this goes right to left.

  • big
    Big text
    Use CSS or headers instead!
    <p>Let's try <big>the big tag</big>.</p>
<p>Use <span style="font-size: 1.3em;">CSS instead</span>.</p>

    Let's try the big tag.

    Use CSS instead.

  • blockquote
    A section that is quoted from another source. It needs to be styled with CSS to make it look like the demo below.
    Use q for short quotation. 
    <blockquote cite="http://wwweeebbb.com/">
    <em>I never said half the shit attributed to me on the Internet!</em><br />
    - Albert Einstein
</blockquote>
    I never said half the shit attributed to me on the Internet!
    - Albert Einstein
  • body
    The document's body is required.
    <!DOCTYPE HTML>
<html>
    <head>
        <title>Document Title</title>
    </head>
    <body>
        Content comes here
    </body>
</html>
  • br
    Single line text break.
    <p>Let's<br />
break 
this<br /> 
line 
twice!</p>

    Let's
    break this
    line twice!

  • button
    Clickable button.
    <button type="button" onclick="alert('Peace!')">Click Here!</button>
  • canvas
    Draw HTML5 graphics with JavaScript.
    <canvas id="demoCanvas" height="200" width="200"></canvas>
<script>
	function drawCircle() {
		  var canvas = document.getElementById('demoCanvas');
		  var context = canvas.getContext('2d');
		  var centerX = canvas.width / 2;
		  var centerY = canvas.height / 2;
		  var radius = 60;
		  context.beginPath();
		  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
		  context.fillStyle = '#CE5937';
		  context.fill();
		  context.lineWidth = 10;
		  context.strokeStyle = '#000000';
		  context.stroke();
	}
</script>
  • caption
    Caption at the top of a table.
    <table>
    <caption>Big Companies</caption>
    <tbody>
        <tr>
            <td>Microsoft</td>
            <td>USA</td>
            <td>Redmond, WA</td>
        </tr>
        <tr>
            <td>Sony</td>
            <td colspan="2">Tokyo Japan</td>
        </tr>
        <tr>
            <td>Samsung</td>
            <td>South Korea</td>
            <td>Suwon</td>
        </tr>
    </tbody>
</table>
    Big Companies
    Microsoft USA Redmond, WA
    Sony Tokyo Japan
    Samsung South Korea Suwon
  • center
    Centered text
    Use CSS instead!
    <p>Aligned to the left by default.</p>
<center>Center-aligned text.</center>
<p style="text-align: center;">You should use CSS instead!</p>

    Aligned to the left by default.

    Center-aligned text.

    You should use CSS instead!

  • cite
    Title of a book, song or movie etc.
    <p>
    Part of <cite>Game of Thrones</cite>’s pilot 
    was shot in one of the castles used for 
    <cite>Monty Python and the Holy Grail</cite>.
</p>

    Part of Game of Thrones’s pilot was shot in one of the castles used for Monty Python and the Holy Grail.

  • code
    Computer code to be formatted differently. 
    <p>jQuery click event:</p>
<p>
  <code> 
    $("#demo").click(function(){<br />
    &nbsp;&nbsp;$(this).hide(200);<br /> 
    }); 
  </code>
</p>

    jQuery click event:

    $("#demo").click(function(){
      $(this).hide(200);
    });

  • col
    A column within a <colgroup> element .
    <table>
    <caption>Big Companies</caption>
    <colgroup>
        <col style="background: #EFA692;" />
        <col style="background: #D0E0D2;" span="2" />
    </colgroup>
    <tbody>
        <tr>
            <td>Microsoft</td>
            <td>USA</td>
            <td>Redmond, WA</td>
        </tr>
        <tr>
            <td>Sony</td>
            <td colspan="2">Tokyo Japan</td>
        </tr>
        <tr>
            <td>Samsung</td>
            <td>South Korea</td>
            <td>Suwon</td>
        </tr>
    </tbody>
</table>
    Big Companies
    Microsoft USA Redmond, WA
    Sony Tokyo Japan
    Samsung South Korea Suwon
  • colgroup
    Specifies a group columns in a table for formatting.
    <table>
    <caption>Big Companies</caption>
    <colgroup>
        <col style="background: #EFA692;" />
        <col style="background: #D0E0D2;" span="2" />
    </colgroup>
    <tbody>
        <tr>
            <td>Microsoft</td>
            <td>USA</td>
            <td>Redmond, WA</td>
        </tr>
        <tr>
            <td>Sony</td>
            <td colspan="2">Tokyo Japan</td>
        </tr>
        <tr>
            <td>Samsung</td>
            <td>South Korea</td>
            <td>Suwon</td>
        </tr>
    </tbody>
</table>
    Big Companies
    Microsoft USA Redmond, WA
    Sony Tokyo Japan
    Samsung South Korea Suwon
  • datalist
    A list of options for an input field. It shows a dropdown below the input field while the user is typing.
    <label>The best continent: 
<input list="continents" name="continentList" /></label>
<datalist id="continents">
    <option value="Africa">
    <option value="America">
    <option value="Asia">
    <option value="Australia">
    <option value="Europe">
</datalist>
  • dd
    Description in a <dl> description list
    <dl>
  <dt>Rubik's Cube</dt>
  <dd>3D twisty puzzle</dd>
  <dt>Dog</dt>
  <dd>Animal with four legs</dd>
</dl>
    Rubik's Cube
    3D twisty puzzle
    Dog
    Animal with four legs
  • del
    Text that has been deleted.
    <p>The <a href="https://ruwix.com/" target="_blank">Rubik's Cube World Record</a> is <del>4.90</del> <ins>4.73</ins> seconds.</p>

    The Rubik's Cube World Record is 4.90 4.73 seconds.

  • details
    Specifies additional details that can be hidden or revealed.
    Not supported in Internet Explorer.
    Use jQuery toggle() instead!
    <details>
    <summary>Click this summary to reveal more details.</summary>
    <h3>The title</h3>
    <p>You can add here more content.</p>
</details>
    Click this summary to reveal more details.

    The title

    You can add here more content.

  • dfn
    Specifies the defining instance of a term.
    <p><dfn>Rubik's Cube</dfn> is a 3D twisty puzzle.</p>

    Rubik's Cube is a 3D twisty puzzle.

  • dialog
    A dialog box, window or other interactive component.
    Supported in Chrome 37+, Safari 6+ and Opera 24+ so it's not recommended to use it yet.
    Use a div tag and CSS instead!
    <p>
    The content in a dialog tag shows centered on the page in Chrome... 
    <dialog open>Text inside the dialog window. </dialog> 
    ...but it shows inline in Mozzilla and older browsers so you should avoid using it.
</p>

    The content in a dialog tag shows centered on the page in Chrome...

    Text inside the dialog window. ...but it shows inline in Mozzilla and older browsers so you should avoid using it.

  • dir
    Directory list.
    Use <ul> instead!
    <dir>
  <li>html</li>
  <li>css</li>
  <li>js</li>
</dir>
  • div
    A block in a document used mainly to layout sections in the design of the page.
    <div style="background-color: grey; color: #fff; min-height: 100px; padding: 10px; text-align: center;">
    <div style="background-color: green;float: left;min-width: 150px;">
        Green div
    </div>
    <div style="background-color: blue;float: right;padding: 15px;">
        Blue div
    </div>
    Container div
</div>
    Green div
    Blue div
    Container div
  • dl
    Description list.
    <dl>
  <dt>Rubik's Cube</dt>
  <dd>3D twisty puzzle</dd>
  <dt>Dog</dt>
  <dd>Animal with four legs</dd>
</dl>
    Rubik's Cube
    3D twisty puzzle
    Dog
    Animal with four legs
  • dt
    A term/name in a <dl> description list.
    <dl>
  <dt>Rubik's Cube</dt>
  <dd>3D twisty puzzle</dd>
  <dt>Dog</dt>
  <dd>Animal with four legs</dd>
</dl>
    Rubik's Cube
    3D twisty puzzle
    Dog
    Animal with four legs
  • em
    Emphasized text 
    <p><em>Emphasized text</em> in the sentence.</p>

    Emphasized text in the sentence.

  • embed
    Container for a flash or other external non-HTML application.
    Flash is not supported on mobile devices so it's recommended to avoid using it.
    Use the object element instead which is supported by all browsers!
    <embed src="demo.swf">
  • fieldset
    Wraps related elements in a form.
    <form>
    <fieldset>
        <legend>Personal details:</legend>
        Name: <input type="text"><br />
        Email: <input type="text"><br />
    </fieldset>
    Order no: <input type="text">
</form>
    Personal details: Name:
    Email:
    Order no:
  • figcaption
    Caption for a <figure> element. A description below images.
    <figure>
    <img src="/images/demo2x2.jpg" alt="2x2 cube" width="130" height="135">
    <figcaption>Pocket Cube - 2x2x2 Rubik's Cube</figcaption>
</figure>
    2x2 cube
    Pocket Cube - 2x2x2 Rubik's Cube
  • figure
    Wraps an image.
    <figure>
    <img src="/images/demo2x2.jpg" alt="2x2 cube" width="130" height="135">
    <figcaption>Pocket Cube - 2x2x2 Rubik's Cube</figcaption>
</figure>
    2x2 cube
    Pocket Cube - 2x2x2 Rubik's Cube
  • font
    Defines font, color, and size for text.
    Use CSS instead!
    <p>
    You can style fonts 
    <font size="4" color="blue">like this</font>, 
    but it's recommended to 
    <span style="font-size: 14px; color: blue;">use CSS instead</span>.
</p>

    You can style fonts like this, but it's recommended to use CSS instead.

  • footer
    The footer of the document or section.
    <header>
    <div id="logo">Logo</div>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/link">Page</a></li>
        </ul>
    </nav>
</header>
<article>
    <h2>Title 1</h2>
    <p>Content 1</p>
</article>
<article>
    <h2>Title 2</h2>
    <p>Content 2</p>
</article>
<section>Just a section</section>
<aside>Sidebar</aside>
<footer>
    <p>&copy; HTML-CSS-JS.com</p>
    <address>Contact <a href="mailto:me@ HTML-CSS-JS.com">email</a></address>
</footer>
  • form
    Form for user input which wraps the input fields.
    <form action="/action.php" method="post">
    Name: <input name="name" type="text" /> <br /> 
    Age: <input max="99" min="1" name="age" step="1" type="number" value="18" /> <br />
    <input type="submit" value="Submit" />
</form>
    Name:
    Age:
  • frame
    Window or frame in a frameset.
    Use <div> or <iframe> instead!
    <frameset cols="20%,*,20%">
    <frame src="frame1.html">
    <frame src="frame2.html">
    <frame src="frame3.html">
</frameset>
  • frameset
    Wraps a set of frames.
    Use <div> or <iframe> instead!
    <frameset cols="20%,*,20%">
    <frame src="frame1.html">
    <frame src="frame2.html">
    <frame src="frame3.html">
</frameset>
  • h1-h2-h3-h4
    HTML headings. H1 is the main heading of the page.
    <h1>HTML Tag List</h1>
<h2>Subtitle</h2>
<h3>Third Heading</h3>
<h4>Fourth One</h4>
<h5>Fifth-Order</h5>
<h6>Sixth is rarely used</h6>

    HTML Tag List

    Subtitle

    Third Heading

    Fourth One

    Fifth-Order
    Sixth is rarely used
  • head
    Information about the document. It contains meta tags, and other decalarations.
    <!DOCTYPE HTML>
<html>
    <head>
        <title>Document Title</title>
    </head>
    <body>
        Content comes here
    </body>
</html>
  • header
    Header of the document or section.
    <header>
    <div id="logo">Logo</div>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/link">Page</a></li>
        </ul>
    </nav>
</header>
<article>
    <h2>Title 1</h2>
    <p>Content 1</p>
</article>
<article>
    <h2>Title 2</h2>
    <p>Content 2</p>
</article>
<section>Just a section</section>
<aside>Sidebar</aside>
<footer>
    <p>&copy; HTML-CSS-JS.com</p>
    <address>Contact <a href="mailto:me@ HTML-CSS-JS.com">email</a></address>
</footer>
  • hr
    Horizontal line to split the page.
    <p>Above the horizontal line.</p>
<hr />
<p>HTML tags are awesome!</p>
<hr />

    Above the horizontal line.

    HTML tags are awesome!

  • html
    The root of the document.
    <!DOCTYPE HTML>
<html>
    <head>
        <title>Document Title</title>
    </head>
    <body>
        Content comes here
    </body>
</html>
  • i
    Part of text in an alternate voice or mood. It's styled as italic by default.
    <p>He said this was <i>the best movie ever</i>.</p>

    He said this was the best movie ever.

  • iframe
    Load external URLs in a frame on the page.
    <iframe style="overflow: hidden;" src="http://badhtml.com" width="300" height="250"></iframe>
  • img
    Image on the page.
    <img src="/images/demo2x2.jpg" alt="2x2 cube" height="120" width="130" />
    2x2 cube
  • input
    Input field.
    There are many input field types and options which are covered in the examples below.
    Types: text, number, checkbox, radio, radio, email, password, color, date, time, datetime-local, week, month, range, search, tel, url, submit, reset 
    <form action="/action.php" method="post">
    text: <input type="text" name="yourname" maxlength="10" size="12" required /> <br /> 
    number: <input type="number" name="no" min="0" max="100" step="10" value="30"> <br /> 
    checkbox: <input type="checkbox" name="terms" value="tandc"> I accpept the terms <br />
    radio:  <input type="radio" name="gender" value="male" checked>Male 
            <input type="radio" name="gender" value="female">Female<br>
    email: <input type="email" name="yourmail"> <br /> 
    password: <input type="password" name="passw"> <br />
    color: <input type="color" name="yourcolor"> <br /> 
    date: <input type="date" name="birthday" min="1900-01-01" max="2010-01-01"> <br /> 
    time: <input type="time" name="mytime"> <br /> 
    date and time:<input type="datetime-local" name="time"> <br /> 
    week: <input type="week" name="yourweek"> <br /> 
    month: <input type="month" name="yourmonth"> <br /> 
    range: <input type="range" name="myrange" min="0" max="100"> <br /> 
    search: <input type="search" name="mysearch"> <br /> 
    tel: <input type="tel" name="myphone"> <br /> 
    url: <input type="url" name="website"> <br /> 
    <input type="submit" value="Submit" /> <input type="reset">
</form>
    text:
    number:
    checkbox: I accpept the terms
    radio: Male Female
    email:
    password:
    color:
    date:
    time:
    date and time:
    week:
    month:
    range:
    search:
    tel:
    url:
  • ins
    Text that has been inserted. 
    <p>The Rubik's Cube World Record is 
<del>4.90</del> <ins>4.73</ins> seconds.</p>

    The Rubik's Cube World Record is 4.90 4.73 seconds.

  • kbd
    Keyboard input. 
    <p>Normal text and <kbd>Keyboard input</kbd></p>

    Normal text and Keyboard input

  • keygen
    Key-pair generator field for forms.
    Not recommended to use because it's not supported in IE/Edge.
     
    <form action="/action.php" method="post">
    Name: <input type="text" name="name">
    Encryption: <keygen name="encript">
    <input type="submit">
</form>
  • label
    Label for an <input> element.
    <form action="/action.php" method="post">
    Name: <input name="name" type="text" /> <br /> 
    <label>
        <input name="terms" type="checkbox" value="tnc" />Accept terms
    </label> <br />
    <input type="submit" value="Submit" />
</form>
    Name:

  • legend
    Caption for a <fieldset> element
    <form>
    <fieldset>
        <legend>Personal details:</legend>
        Name: <input type="text"><br />
        Email: <input type="text"><br />
    </fieldset>
    Order no: <input type="text">
</form>
    Personal details: Name:
    Email:
    Order no:
  • li
    List item in a list (ul or ol tag).
    Ordered list:
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ol>
Unordered bullet list:
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>
    Ordered list:
    1. HTML
    2. CSS
    3. JS
    Unordered bullet list:
    • HTML
    • CSS
    • JS
  • link
    Links an external file.
    The example below includes an external CSS file and sets the favicon.
    <head>
    <link rel="stylesheet" type="text/css" href="tags.css">
    <link rel="icon" type="image/png" href="/favicon.ico" />
</head>
  • main
    Wraps the main content.
    <header>
    <div id="logo">Logo</div>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/link">Page</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h2>Title 1</h2>
        <p>Content 1</p>
    </article>
    <article>
        <h2>Title 2</h2>
        <p>Content 2</p>
    </article>
    <section>Just a section</section>
</main>
<aside>Sidebar</aside>
<footer>
    &copy; HTML-CSS-JS.com
</footer>
  • map
    Image-map with clickable areas.
    <img id="My-Image-Map" src="https://html-css-js.com/images/demo2x2.jpg" border="0" width="130" height="135" orgWidth="130" orgHeight="135" usemap="#wwweeebbbImageMap" alt="cube" />
<map name="wwweeebbbImageMap" id="wwweeebbbImageMap">
    <area  alt="top" title="Top face" href="/html/" shape="poly" coords="14,41,63,11,112,36,72,66" style="outline:none;" target="_blank" />
    <area  alt="left" title="Left face" href="/css/" shape="poly" coords="13,47,17,92,62,127,64,74" style="outline:none;" target="_self" />
    <area  alt="front" title="Front face" href="/js/" shape="poly" coords="77,79,73,124,112,93,121,42" style="outline:none;" target="_self" />
</map>
    cube top left front
    The three faces of the cube link to different pages. Hover your mouse to see the tooltips!
  • mark
    Marked/highlighted text.
    <p>Make sure to <mark>check the inbox</mark> tomorrow!</p>

    Make sure to check the inbox tomorrow!

  • menu
    A list/menu of menu items/commands.
    Not all browsers support this this so it's not recommended to use menus.
    Right-click the demo below to see if you browser supports the menu tag. You should see My Menu Item!!!! on the top of the option list. 
    <div contextmenu="my-context-menu">
    Right click here!
</div>
<menu id="my-context-menu" type="context">
    <menuitem onclick="alert('Menu item pressed')">
        My Menu Item!!!!
    </menuitem>
</menu>
    Sorry no preview for this one because it's not supported in all browsers.
  • menuitem
    A command/menu item that the user can invoke from a popup menu.
    Not all browsers support this so it's not recommended to use menus.
    Explainded in menu section.
    <div contextmenu="my-context-menu">
    Right click here!
</div>
<menu id="my-context-menu" type="context">
    <menuitem onclick="alert('Menu item pressed')">
        My Menu Item!!!!
    </menuitem>
</menu>
    Sorry, no demo for this one.
  • meta
    Metadata in the header for viewport, SEO description, keywords etc.
    <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn everything about HTML Tags">
    <meta name="keywords" content="html,tags" />
    <meta property="fb:admins" content="PippideePete" />
    <meta property="og:title" content="HTML Tags" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://html-css-js.com/html/tags/" />
    <meta property="og:image" content="https://html-css-js.com/images/og.jpg" />
    <meta property="og:description" content="Learn everything about HTML Tags" />
</head>
  • meter
    Progress bar.
    A value within a given range.
    Similar effect can be reached with the progress tag.
    <meter value="25" min="0" max="100">25%</meter><br />
<meter value="0.55">55%</meter>
    25%
    55%
  • nav
    Wraps the navigation links.
    By default it doesn't affect the look of the page but screen readers for disabled persons might omit the rendering of its content.
    <header>
    <div id="logo">Logo</div>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/link">Page</a></li>
        </ul>
    </nav>
</header>
<article>
    <h2>Title 1</h2>
    <p>Content 1</p>
</article>
<article>
    <h2>Title 2</h2>
    <p>Content 2</p>
</article>
<section>Just a section</section>
<aside>Sidebar</aside>
<footer>
    <p>&copy; HTML-CSS-JS.com</p>
    <address>Contact <a href="mailto:me@ HTML-CSS-JS.com">email</a></address>
</footer>
  • noframes
    Display a message if your browser doesn't support frames.
    Not supported in HTML5!
    Use <div> instead!
    <frameset cols="20%,*,20%">
    <frame src="frame1.html">
    <frame src="frame2.html">
    <frame src="frame3.html">
    <noframes>Frames not supported!</noframes>
</frameset>
  • noscript
    Defines an alternate content or warning for browsers that do not support client-side scripts.
    <script>
    document.write("JavaScript is working!")
</script>
<noscript>
    JavaScript not supported.
</noscript>
  • object
    Embed a flash file.
    This tag is supported by most browsers but try to avoid it because mobile devices don't support flash animation.
    Use canvas instead. 
    <object width="200" height="200" data="demo.swf"></object>
  • ol
    Ordered list.
    The reversed HTML5 attribute indicates descending order.
    List types: 1 – default decimal, a – alphabetical, A – alphabetical uppercase, i – lowercase Roman numbers, I – uppercase Roman numbers.
    <ol start="10" type="I" reversed>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ol>
    1. HTML
    2. CSS
    3. JS
  • optgroup
    Groups related options in a drop-down list.
    <select>
    <optgroup label="Client Side">
        <option value="js">JavaScript</option>
        <option value="jq">jQuery</option>
    </optgroup>
    <optgroup label="Server Side">
        <option value="php">PHP</option>
        <option value="asp">ASP</option>
    </optgroup>
</select>
  • option
    An option in a drop-down list.
    <form action="/action.php" method="post">
    Name: <input name="name" type="text" /> <br /> 
    <select name="gender">
        <option selected="selected" value="male">Male</option>
        <option value="female">Female</option>
        <option value="undefined">Undefined</option>
    </select><br /> 
    <input type="submit" value="Submit" />
</form>
    Name:

  • output
    The result of a calculation.
    <form oninput="result.value=parseInt(x.value)+parseInt(y.value)">
    <input type="range" name="x" value="25" min="0" max="100" /> +
    <input type="number" name="y" value="75" /> =
    <output name="result">100</output>
</form>
    + = 100
  • p
    Paragraph.
    <p>A short demo paragraph.</p>
<p style="text-align: center;">The <strong>align</strong> attribute is not supported anymore so make sure to use CSS to position the text.</p>

    A short demo paragraph.

    The align attribute is not supported anymore so make sure to use CSS to position the text.

  • param
    Parameter for an object element.
    <object data="sound.mp3">
    <param name="autoplay" value="true">
</object>
  • picture
    Specify multiple image resources depending on the screen size.
    Resize your browser window to see the image changing.
    <picture>
    <source media="(min-width: 900px)" srcset="/images/og-250.jpg">
    <source media="(min-width: 600px)" srcset="/images/og-125.jpg">
    <img src="/demo.png" alt="logo">
</picture>
    logo
  • pre
    Preformatted text.
    <pre>
Add     repeated    spaces and 
line 
breaks 
without using 
    <strong>&amp;nbsp;</strong> 
    and <span style="color: blue;">&lt;br /&gt;</span>
</pre>

    Add     repeated    spaces and 
line 
breaks 
without using 
	&nbsp; 
	and <br />
  • progress
    Defines a progress bar. Similar to the meter tag.
    <div class="preview">
    progress tag: <progress value="55" max="100"></progress><br />
    meter tag: <meter value="0.55">55%</meter>
</div>
    progress tag:
    meter tag: 55%
  • q
    Short quotation that adds the qoutation marks to the inline text.
    Use blockquote for quotation blocks.
    <p>Their mission is to <q>make all athletes better</q>.</p>

    Their mission is to make all athletes better.

  • rp
    Specifies what to show in browsers that don't support ruby annotations.
    Gives pronunciation guidance in a phonetic script for kanji in Chinese, Japanese, and Korean languages. See ruby for more details.
    <ruby>東<rb>京<rt>とう<rt>きょう</ruby>
<ruby>東<rb>京<rp>(<rt>とう<rt>きょう<rp>)</ruby>
    東京とうきょう 東京(とうきょう)
  • rt
    Explanation/pronunciation of characters for East Asian typography. See ruby for more details.
    <ruby>東<rb>京<rt>とう<rt>きょう</ruby>
<ruby>東<rb>京<rp>(<rt>とう<rt>きょう<rp>)</ruby>
    東京とうきょう 東京(とうきょう)
  • ruby
    Ruby annotations give pronunciation guidance in a phonetic script for kanji in Chinese, Japanese, and Korean languages. See rp, rt tags
    <ruby>東<rb>京<rt>とう<rt>きょう</ruby>
<ruby>東<rb>京<rp>(<rt>とう<rt>きょう<rp>)</ruby>
    東京とうきょう 東京(とうきょう)
  • s
    A piece of text that is no longer correct (strike through).
    <p>The Rubik's Cube World Record is <s>4.90</s> 4.73 seconds.</p>

    The Rubik's Cube World Record is 4.90 4.73 seconds.

  • samp
    Sample output from a computer program.
    <p>My first C++ program displayed <samp>Hello World</samp>.</p>

    My first C++ program displayed Hello World.

  • script
    Client-side script.
    Include external script in the head section: 
    <head>
    <script type="text/javascript" src="tags.js"></script>
</head>
    Execute script in the body: 
    <script>
    document.write('This text has been added with JavaScript');
</script>
  • section
    HTML5 element to define a section in the document.
    <header>
    <div id="logo">Logo</div>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/link">Page</a></li>
        </ul>
    </nav>
</header>
<article>
    <h2>Title 1</h2>
    <p>Content 1</p>
</article>
<article>
    <h2>Title 2</h2>
    <p>Content 2</p>
</article>
<section>Just a section</section>
<aside>Sidebar</aside>
<footer>
    <p>&copy; HTML-CSS-JS.com</p>
    <address>Contact <a href="mailto:me@ HTML-CSS-JS.com">email</a></address>
</footer>
  • select
    Drop-down list.
    <form action="/action.php" method="post">
    Name: <input name="name" type="text" /> <br /> 
    <select name="gender">
        <option selected="selected" value="male">Male</option>
        <option value="female">Female</option>
    </select><br /> 
    <input type="submit" value="Submit" />
</form>
    Name:

  • small
    Smaller text.
    <p>Normal size, and <small>this is a small text</small>.</p>

    Normal size, and this is a small text.

  • source
    Multiple media resources for media elements (<video>, <picture> and <audio>)
    <picture>
    <source media="(min-width: 900px)" srcset="/images/og-250.jpg">
    <source media="(min-width: 600px)" srcset="/images/og-125.jpg">
    <img src="/demo.png" alt="logo">
</picture>
    logo
  • span
    An inline section in the text. The span tag doesn't provide any visual change by itself, it needs to be styled 
    She dyed her hair <span style="color: blue;">blue</span> 
for a <span style="font-size: 1.2em;">role</span>. <br />
<span onclick="alert('Hello');">Click here</span> 
to trigger a JS event.
    She dyed her hair blue for a role.
    Click here to trigger a JS event.
  • strike
    Strikethrough text. Not supported in HTML5!
    Use <del> or <s> instead!
    <p>The strike tag is <strike>supported</strike> in HTML5!</p>

    The strike tag is supported in HTML5!

  • strong
    Bold text.
    Use strong to <strong>write bold text</strong>. <br />
The same effect 
<span style="font-weight: bold;">with CSS font-weight</span>.
    Use strong to write bold text.
    The same effect with CSS font-weight.
  • style
    Wraps or icludes CSS code.
    <p>Let's test this!</p>
<style>
    p { 
        font-size: 30px;    
    }
</style>
<style media="print" type="text/css">
    body {  
        color: black;
        background: white;  
    }
</style>
  • sub
    Subscript small text, slightly below the normal line.
    Equivalent to CSS: 
    sub { 
    font-size: smaller;
    vertical-align: sub;
}

    Water &ndash; H<sub>2</sub>O <br />
12<sub>dec</sub> = 14<sub>oct</sub>
    Water – H2O
    12dec = 14oct
  • summary
    A visible heading in a <details> element.
    <details>
    <summary>Click this summary to reveal more details.</summary>
    <h3>The title</h3>
    <p>You can add here more content.</p>
</details>
    Click this summary to reveal more details.

    The title

    You can add here more content.

  • sup
    Superscript small text, slightly above the normal line.
    <p>1<sup>st</sup>, 2<sup>nd</sup>, 3<sup>rd</sup> </p>
<p>WWWEEEBBB<sup>TM</sup></p>

    1st, 2nd, 3rd

    WWWEEEBBBTM

  • table
    Table tag.
    Related tags: caption, colgroup, tbody, td, tfoot, th, thead, tr
    <table>
    <caption>Big Companies</caption>
    <colgroup>
        <col style="background: #EFA692;" />
        <col style="background: #D0E0D2;" span="2" />
    </colgroup>
    <thead>
        <tr>
            <th>Company</th>
            <th>Country</th>
            <th>Headquarters</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Microsoft</td>
            <td>USA</td>
            <td>Redmond, WA</td>
        </tr>
        <tr>
            <td>Sony</td>
            <td colspan="2">Tokyo Japan</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Name</td>
            <td colspan="2">Address</td>
        </tr>
    </tfoot>
</table>
    Big Companies
    Company Country Headquarters
    Microsoft USA Redmond, WA
    Sony Tokyo Japan
    Name Address
  • tbody
    Wraps the body content of the table.
    <table>
    <thead>
        <tr>
            <th>Company</th>
            <th>Country</th>
            <th>Headquarters</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Microsoft</td>
            <td>USA</td>
            <td>Redmond, WA</td>
        </tr>
        <tr>
            <td>Sony</td>
            <td colspan="2">Tokyo Japan</td>
        </tr>
        <tr>
            <td>Samsung</td>
            <td>South Korea</td>
            <td>Suwon</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Name</td>
            <td colspan="2">Address</td>
        </tr>
    </tfoot>
</table>
    Company Country Headquarters
    Microsoft USA Redmond, WA
    Sony Tokyo Japan
    Samsung South Korea Suwon
    Name Address
  • td
    Table cell inside of a table row.
    <table>
    <thead>
        <tr>
            <th>Company</th>
            <th>Country</th>
            <th>Headquarters</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Microsoft</td>
            <td>USA</td>
            <td>Redmond, WA</td>
        </tr>
        <tr>
            <td>Sony</td>
            <td colspan="2">Tokyo Japan</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Name</td>
            <td colspan="2">Address</td>
        </tr>
    </tfoot>
</table>
    Company Country Headquarters
    Microsoft USA Redmond, WA
    Sony Tokyo Japan
    Name Address
  • textarea
    Multiline input field.
    <form action="/action.php" method="post">
    Name: <input name="name" type="text" /> <br /> 
    <textarea cols="20" name="comments" rows="5">Comment</textarea><br />
    <input type="submit" value="Submit" />
</form>
    Name:

  • tfoot
    Table footer.
    <table>
    <tbody>
        <tr>
            <td>Microsoft</td>
            <td>USA</td>
            <td>Redmond, WA</td>
        </tr>
        <tr>
            <td>Sony</td>
            <td colspan="2">Tokyo Japan</td>
        </tr>
        <tr>
            <td>Samsung</td>
            <td>South Korea</td>
            <td>Suwon</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Company</td>
            <td colspan="2">Headquarters</td>
        </tr>
    </tfoot>
</table>
    Microsoft USA Redmond, WA
    Sony Tokyo Japan
    Samsung South Korea Suwon
    Company Headquarters
  • th
    Table header cell.
    <table>
    <thead>
        <tr>
            <th>Company</th>
            <th>Country</th>
            <th>Headquarters</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Sony</td>
            <td colspan="2">Tokyo Japan</td>
        </tr>
        <tr>
            <td>Samsung</td>
            <td>South Korea</td>
            <td>Suwon</td>
        </tr>
    </tbody>
</table>
    Company Country Headquarters
    Sony Tokyo Japan
    Samsung South Korea Suwon
  • thead
    Table header section.
    <table>
    <thead>
        <tr>
            <th>Company</th>
            <th>Country</th>
            <th>Headquarters</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Sony</td>
            <td colspan="2">Tokyo Japan</td>
        </tr>
        <tr>
            <td>Samsung</td>
            <td>South Korea</td>
            <td>Suwon</td>
        </tr>
    </tbody>
</table>
    Company Country Headquarters
    Sony Tokyo Japan
    Samsung South Korea Suwon
  • time
    HTML5 element to mark date or time.
    It renders as normal text. Not supported in IE8.
    <p>The party starts at <time>22:00</time>. </p>
<p>Deadline: <time datetime="2018-12-24 12:00">Christmas</time>.</p>

    The party starts at .

    Deadline: .

  • title
    Requred tag to define the title of the page. This text is displayed in the browser tab and as the Google search result title. 
    <!DOCTYPE HTML>
<html>
    <head>
        <title>Document Title</title>
    </head>
    <body>
        Content comes here
    </body>
</html>
  • tr
    Table row.
    <table>
    <thead>
        <tr>
            <th>Company</th>
            <th>Country</th>
            <th>Headquarters</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Sony</td>
            <td colspan="2">Tokyo Japan</td>
        </tr>
        <tr>
            <td>Samsung</td>
            <td>South Korea</td>
            <td>Suwon</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Name</td>
            <td colspan="2">Address</td>
        </tr>
    </tfoot>
</table>
    Company Country Headquarters
    Sony Tokyo Japan
    Samsung South Korea Suwon
    Name Address
  • track
    Text tracks for <video> and <audio> media elements.
    <video width="320" height="240" controls>
    <source src="flubber.mp4" type="video/mp4">
    <source src="flubber.ogg" type="video/ogg">
    <track src="srt_en.vtt" kind="subtitles" srclang="en" label="English">
    <track src="srt_hu.vtt" kind="subtitles" srclang="hu" label="Hungarian">
</video>
  • tt
    Teletype text.
    Use CSS instead!
    <p>Normal and <tt>teletype text</tt>.</p>
  • u
    Underlined or text that should be styled differently.
    <p>Normal and <u>underlined text</u>.</p>

    Normal and underlined text.

  • ul
    Unordered bullet list.
    You can specify the following types, but these are not supported in HTML5: disc, square, circle. Use CSS instead!
    <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>
    • HTML
    • CSS
    • JS
  • var
    Variable.
    <p>
    <var>Variables</var> 
    are usually displayed as 
    <em>italic text</em>.
</p>

    Variables are usually displayed as italic text.

  • video
    Embed a video (MP4, WebM, Ogg).
    Not supported in iE8 and earlier.
    <video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    Video not supported!
</video>
  • wbr
    Word break opportunity, a position within text where the browser may break a line if necessary.
    <div style="width: 80px; border: 1px solid #999;">
    You<wbr>Can<wbr>Separate
    Very<wbr>Long<wbr>Words
    With<wbr>This<wbr>Tag<wbr>If<wbr>Necessary.
</div>
    YouCanSeparate VeryLongWords WithThisTagIfNecessary.
  • <!--comment-->
    A multi line comment is hidden to the visitors.
    Comments need to be written between the <!-- beginning and --> closing tag.
    <!--
    Comments are 
    hidden in the browser.
-->

HTML Tags - List With Examples

Listing HTML tags with previews, examples and demos.
Categorized by their importance, whether they're HTML5, singleton and if it's recommended to use them.

Start typing in the search bar to narrow the list. For example if you type table then it will show only the table-related tags: caption, table cell, row, head, footer etc. Click the filters to show the tags categorized as HTML5 (newer), sigleton (the ones that don't require closing tag) and the ones that have to be avoided.

Selecting a tag opens the accordion-styled list and shows a short description and an example with the source code and preview. Hovering the source code with your mouse most tags will show a pencil icon which lets you to try the demo in the interactive editor. The name of the opened HTML tag is added to the URL of the page making it easy to save or share the link.

I tried to avoid using obsolete HTML tags in the previews so I replaced them with their recommended alternatives.

HTML
CSS
Apply CSS
WYSIWYG
➤