HTML tags handbook

Examples from w3school

abbr

defines an abbreviation or an acronym

<abbr title="Cascading Style Sheets">CSS</abbr> is awesome.

CSS is awesome.

address

defines the contact information for the author/owner of a document or an article.

<address>
  <a href="mailto:jim@rock.com">jim@rock.com</a><br />
  <a href="tel:+13115552368">(311) 555-2368</a>
</address>

jim@rock.com
(311) 555-2368

usemap attribute in image

define clickable area(map) in an image

<img
  src="workplace.jpg"
  alt="Workplace"
  usemap="#worksmap"
  width="400"
  height="379"
/>

<map name="workmap">
  <area
    shape="rect"
    coords="34,44,270,350"
    alt="Computer"
    href="computer.htm"
  />
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm" />
  <area
    shape="circle"
    coords="337,300,44"
    alt="Cup of coffee"
    href="coffee.htm"
  />
</map>

Workplace

article

specifies independent, self-contained content. suitable for forum post, blogs, news articles

<article class="browser">
  <h2>Google Chrome</h2>
  <p>
    Google Chrome is a web browser developed by Google, released in 2008. Chrome
    is the world's most popular web browser today!
  </p>
</article>

Google Chrome

Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!

header

typically contains:

one or more heading elements (h1 - h6)
logo or icon
authorship information

<article>
  <header>
    <h1>A heading here</h1>
    <p>Posted by John Doe</p>
    <p>Some additional information here</p>
  </header>
  <p>Lorem Ipsum dolor set amet....</p>
</article>

A heading here

Posted by John Doe

Some additional information here

Lorem Ipsum dolor set amet....

aside

suitable for sidebars

<body>
  <main></main>
  <aside></aside>
</body>

audio

container for music or other audio streams.

<audio controls>
  <source src="horse.ogg" type="audio/ogg" />
  <source src="horse.mp3" type="audio/mpeg" />
  Your browser does not support the audio tag.
</audio>

video

embed video content in a document, such as a movie clip or other video streams.
subtitles are formatted in WebVTT format (.vtt files).

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <!-- subtitles -->
  <track
    src="fgsubtitles_en.vtt"
    kind="subtitles"
    srclang="en"
    label="English"
  />
  <track
    src="fgsubtitles_no.vtt"
    kind="subtitles"
    srclang="no"
    label="Norwegian"
  />
  Your browser does not support the video tag.
</video>

picture

images source based on viewport width(responsive).
reduces network bandwidth

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg" />
  <source media="(min-width:465px)" srcset="img_white_flower.jpg" />
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;" />
</picture>

figure

specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
| <figcaption> is used to add a caption to the image

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%" />
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

base

specifies the base URL and/or target for all relative URLs in a document.

<head>
  <base href="domain" target="_blank" />
</head>

blockquote

specifies a section that is quoted from another source.

<blockquote cite="link to original source">
  For 50 years, WWF has been protecting the future of nature. The world's
  leading conservation organization, WWF works in 100 countries and is supported
  by 1.2 million members in the United States and close to 5 million globally.
</blockquote>

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

q

for inline (short) quotations.

<p>For 50 years,<q> WWF </q> has been protecting the future of nature.</p>

For 50 years, WWF has been protecting the future of nature.

caption

defines a table caption.

<table>
  <caption>
    Monthly savings
  </caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Monthly savings
Month	Savings
January	$100

cite

defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

code

defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).

| simialr to pre, kbd, var, samp

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

cite: The Scream by Edward Munch. Painted in 1893.

code: The Scream by Edward Munch. Painted in 1893.

pre:

The Scream

by Edward Munch. Painted in 1893.

kbd: The Scream by Edward Munch. Painted in 1893.

var: The Scream by Edward Munch. Painted in 1893.

samp: The Scream by Edward Munch. Painted in 1893.

data

to add a machine-readable translation of a given content.

<ul>
  <li><data value="21053">Cherry Tomato</data></li>
  <li><data value="21054">Beef Tomato</data></li>
  <li><data value="21055">Snack Tomato</data></li>
</ul>

Cherry Tomato
Beef Tomato
Snack Tomato

time

defines a specific time (or datetime).

datetime attribute of this element is used translate the time into a machine-readable

<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>

I have a date on Valentines day.

datalist

specifies a list of pre-defined options for an <input> element.

<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser" />

<datalist id="browsers">
  <option value="Edge"></option>
  <option value="Firefox"></option>
  <option value="Chrome"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
</datalist>

Choose your browser from the list:

fieldset

used to group related elements in a form.
| <legend> tag is used to define a caption

<form>
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname" /><br /><br />
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname" /><br /><br />
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" /><br /><br />
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday" /><br /><br />
    <input type="submit" value="Submit" />
  </fieldset>
</form>

optgroup

group related options

<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Choose a car:

dl,dt,dd

for defination list

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

Coffee: Black hot drink
Milk: White cold drink

dfn

stands for the "definition element", and it specifies a term that is going to be defined within the content.

<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>

HTML is the standard markup language for creating web pages.

del

to mark something that is irrelevant now
| similar to <s> element (strikethrough)

<p>My favorite color is <del>blue</del>!</p>

My favorite color is ~~blue~~!

ins

to mark something that is irrelevant now
| similar to <s> element (strikethrough)

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

My favorite color is ~~blue~~ red!

mark

mark or highlight

<p>Do not forget to buy <mark>milk</mark> today.</p>

Do not forget to buy milk today.

details

collapsable content

| summary is used for the visible heading

<details>
  <summary>Epcot Center</summary>
  <p>
    Epcot is a theme park at Walt Disney World Resort featuring exciting
    attractions, international pavilions, award-winning fireworks and seasonal
    special events.
  </p>
</details>

Epcot Center

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

dialog

dialog box or subwindow. used for modals and popup snackbars

<dialog open>This is an open dialog window</dialog>

meter

scalar measurement within a known range. can have min,max,high,low,optimum

represents visually

<label for="disk_c">abhi:</label>
<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br />

<label for="disk_d">niyu:</label>
<meter id="disk_d" value="0.2" low=".3" high=".6">60%</meter>

abhi:
2 out of 10

niyu:
60%

progress

display progress, max by default is 1

<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100">32%</progress>

Downloading progress:
32%