avatarSarah

Summarize

10 lesser known HTML tags

As web developers, you’ve probably come to rely on HTML tags like and But there’s so much more to HTML than the standard tags you learned when you just started out.

Let’s take a look at 10 lesser known HTML tags that could soon become your go-to tools for creating dynamic, easy-to-use web pages.

01. <details> and <summary>

The

and elements allow you to create a dropdown that shows the hidden content in the

tag.

<details>
 <summary>Click to expand</summary>
 <p>Hidden content goes here.</p>
</details>

02. <mark>

You can use to highlight text.

<p>This is some <mark>highlighted</mark> text.</p>

03. <cite>

The tag defines the name of a creative work (books, poems, songs, movies, etc.)

<blockquote>
  <p>Life is what happens when you're busy making other plans.</p>
  <cite>John Lennon</cite>
</blockquote>

04. <kbd>

Use for displaying keyboard input or user commands.

<p>To save your work, press <kbd>Ctrl + S</kbd>.</p>

05. <time>

The

<p>Her birthday is on <time datetime="1990-05-23">May 23rd</time>.</p>

06. <abbr>

The tag defines an abbreviation or an acronym.

<p><abbr title="World Wide Web">WWW</abbr> is amazing!</p>

07. <wbr>

The (Word Break Opportunity) element specifies where in a text it would be ok to add a line break.

<p>ThisIsALongWord<wbr>BrokenOverTwoLines</p>

08. <figcaption>

Pair this tag with the

tag to add captions to images or multimedia content, improving accessibility and user understanding.

<figure>
  <img src="cat.jpg" alt="An image of a cat">
  <figcaption>This is a cat on a skateboard.</figcaption>
</figure>

09. <progress>

Create dynamic progress bars with the tag. It’s especially useful when indicating the completion status of tasks or forms.

<progress value="50" max="100"></progress>

10. <samp>

The tag is used to represent sample output from a computer program. It’s particularly handy when documenting code and demonstrating expected results.

<p>The output is <samp>Hello, World!</samp></p>
HTML
Html5 Development
Html5
Web Development
Front End Development
Recommended from ReadMedium