Important HTML Tags List

This article includes most important HTML tags for creating web pages.

 

What is HTML?

HyperText Markup Language or HTML is the standard markup language for creating Web pages.

 

A Brief History of HTML

Tim Berners-Lee, a physicist at the CERN research institute in Switzerland invented HTML in 1991. This first version consisted of 18 HTML tags. Now, there are currently about 140 HTML tags, although not all of them are supported by modern browsers.

Since then, there have been many different versions of HTML. The most widely used version throughout the 2000’s was HTML 4.01, which became an official standard in December 1999.

 

HTML Versions

1991 – Tim Berners-Lee invents HTML 1.0

1993 – HTML 1.0 is released. Not many developers are creating websites at this time.

1995 – HTML 2.0 is published. This contains the features of HTML 1.0 plus new features. This remained the standard markup language for designing and creating websites until 1997.

1997 – HTML 3.0 was invented. Here, Dave Raggett introduced a fresh draft on HTML, which improved new features of HTML and gave more powerful characteristics for webmasters in designing websites. Unfortunately, the powerful features slowed down the browser in applying further improvements.

1999 – The widely-used HTML 4.0 comes out. It is very successful.

2014 – HTML 5.0 is released and used worldwide. It is said to be the extended version of HTML 4.01 which was published in 2012.

 

 

HTML Content Version Support

Type of content

HTML 1.2

HTML 4.01

HTML5

Purpose

Heading

Yes

Yes

Yes

Organize page content by adding headings and subheadings to the top of each section of the page

Paragraph

Yes

Yes

Yes

Identify paragraphs of text

Address

Yes

Yes

Yes

Identify a block of text that contains contact information

Anchor

Yes

Yes

Yes

Link to other web content

List

Yes

Yes

Yes

Organize items into a list

Image

Yes

Yes

Yes

Embed a photograph or drawing into a web page

Table

No

Yes

Yes

Organize data into rows and columns

Style

No

Yes

Yes

Add CSS to control how objects on a web page are presented

Script

No

Yes

Yes

Add Javascript to make pages respond to user behaviors (more interactive)

Audio

No

No

Yes

Add audio to a web page with a single tag

Video

No

No

Yes

Add video to a web page with a single tag

Canvas

No

No

Yes

Add an invisible drawing pad to a web page, on which you can add drawings (animations, games, and other interactive features) using Javascript

 

 

Basic HTML Syntax

<!DOCTYPE html>
<html>
  <head>
    <title>This is a title</title>
  </head>
  <body>
    <div>
        <p>Hello world!</p>
    </div>
  </body>
</html>

 

 

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here… </tagname>

                              

 

HTML Cheat Sheet

 

BASIC HTML

 

<!DOCTYPE>   Defines the document

<html>   Defines HTML documents, it is the root element

<head>   Contains a title for the document

<meta>   Meta information of document

<body>   Defines HTML documents body

<div>    Defines a block-level container for content

<span> Defines an inline container for content

<h1>to</h6>   Defines HTML headings

<p>   Defines a paragraph

<a>   Creates a link

<br>  Insert a single line break

<hr>  Defines a thematic break in HTML page

<!– –>   Defines a comment

 

FORMS AND INPUTS

 

<form>  Defines a HTML form for user input

<input>  Defines an input control

<textarea>  Defines a multiline input control (textarea)

<button> Defines a clickable button

<select>  Defines a drop-down list

<option> Defines an option in a drop-down list

<optgroup> Defines a group of related options in a drop-down list

<label>  Defines a label for an <input> element

<fieldset>  Groups related elements in a form

<legend>  Defines a caption for a <fieldset> element

 

 

FORMATTING

<abbr>  Defines an abbreviation or an acronym

<code>  Defines a piece of computer code

<em>  Defines emphasized text

<mark>  Defines marked/highlighted text

<pre> Defines preformatted text

<small>  Defines smaller text

<progress>  Represents the progress of a task

<blockquote>  Defines a section that is quoted from another source

<b>  Defines bold text

<i>  Italic text

<u>  Underline text

<q>  Defines a short quotation

<table>   Creates a table

<tr>  Defines table row

<th>  Cell of table header

<td>  Cell of table body

<ul>  Defines a bullet list

<ol>  Defines a Ordered (Numbered) list

<li>  List item in bulleted or ordered list

 

 

 

 

 

 

 

 

 

 

IMAGES

<img>   Defines an image

<map>  Defines a client-size image map

<area>   Defines an area inside an image map

<figcaption> Defines a caption for a <figure> element

<figure> Specifies self-contained content

<svg>  Defines a container for SVG graphics

<picture>  Defines a container for multiple image resources

<canvas>  Used to draw graphics, on the fly, via scripting (usually Javascript)

 

    

 

HTML ENTITIES

<    less than    &lt;

>    greater than    &gt;

&    ampersand    &amp;

     double quotation mark    &quote;

      single quotation mark/apostrophe    &apos;

©     copyright    &copy;

®    registered trademark    &reg;


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *