Complete HTML Tags

The Complete HTML Cheat Sheet


Contents :

  •    Document Summary

-          Document Information

·         Document Structure

-          Text Formatting

·         Links Images

·         Lists

-          Forms

-          Input Type Attributes

·         Select Attributes

-          Option Attributes

·         Table Formatting

-          Objects and iFrames

-      iFrame Attributes

·         Embed Attributes

-          HTML5 New Tags

-          Collective Character Objects

Document Summary :

Let us see how we can break the code up in different components:

 <html> ... </html>

This tag specifies that the webpage is written in HTML. It appears at the very first and last line of the webpage. It is mainly used to show that the page uses HTML5 – the latest version of the language. Also known as the root element, this tag can be thought of as a parent tag for every other tag used in the page.

<head> ... </head>

This tag is used to specify meta data about the webpage. It includes the webpage’s name, its dependencies (JS and CSS scripts), font usage etc.

<title> ... </title>

As the name suggests, this tag contains the title/name of the webpage. You can see this in your browser’s title bar for every webpage open in the browser. Search engines use this tag to extract the topic of the webpage, which is quite convenient when ranking relevant search results.

<body> ... </body>

Everything the user sees on a webpage is written inside this tag. It is a container for all the contents of the webpage.

Example :

<html>

<head>

<title>My First Website</title>

</head>

<body>

 

</body>

</html> 

Document Information :

<base/>

Used to specify the base URL of your site,t his tag makes linking to internal links on your site cleaner.

<meta/>

This is the meta data tag for the webpage.Can be useful for mentioning the page’s author, keywords, original published date etc

.<link/>

This is used to link to scripts external tothe webpage. Typically utilized for including styles heets.

<style> ... </style>

The style tag can be used as an alternative to an external style sheet, or complement it. Includes the webpage’s appearance information.

<script> ... </script>

Used to add code snippets, typically in Java Script, to make webpage dynamic. It can also be used to just link to an external script.

Example :

<html>

<head>

<meta charset="utf-8">

<base href = www.mantek.co

target="_blank" />

<title>My Beautiful Website</title>

<link rel="stylesheet" href="/css/master.css">

<script type="text/javascript">

var dummy = 0;

</script>

</head>          

<body>

</body>

</html>

Document Structure :

<h1. .h6> ... </h1. .h6>

Six different variations of writing a heading. <h1> has the largest font size, while <h6> has the smallest.

 <div> ... </div>

A webpage’s content is usually divided into blocks, specified by the div tag.

<span> ... </span>

This tag injects inline elements, like an image, icon, emoticon without ruining the formatting/styling of the page.

<p> ... </p>

Plain text is placed inside this tag.

<br/>

A line break for webpages. Is used when wanting to write a new line.

<hr/>

Similar to the above tag. But in addition to switching to the next line, this tag also draws a horizontal bar to indicate the end of the section.

Example :

<div>

<h1>Top 5 Greatest Films</h1>

<p>These are considered the greatest

<span>reel-icon</span> of all time </p>

<hr/><h2>1. The Godfather</h2>

<p>This 1972 classic stars Marlon Brando and

Al Pacino.</p>

</div>

Text Formatting :

<strong> ... </strong>

Makes text bold. Used to emphasize a point

<b> ... </b>

Alternative to the above tag, also creates bold text.

<em> ... </em>

Another emphasis tag, but this displays text in italics.

<i> ... </i>

Also used to display text in italics, but does not emphasize it like the above tag.

<tt> ... </tt>

Formatting for typewriter-like text. No longer supported in HTML5.

<strike> ... </strike>

Another old tag, this is used to draw a line at the center of the text, so as to make it appear un important or no longer useful.

<cite> ... </cite>

Tag for citing author of a quote.

<del> ... </del>

Pre-formatted, ‘monospace’ text laid out with whitespace inside the element intact.

<ins> ... </ins>

Denotes text that has been inserted in tot he webpage.

<blockquote> ... </blockquote>

Quotes often go into this tag. Is used in tandem with the <cite> tag.

<q> ... </q>

Similar to the above tag, but for shorter quotes.

<abbr> ... </abbr>

Denotes abbreviations, along with the full forms.

<acronym> ... </acronym>

Tag for acronyms. No HTML5 support.

<address> ... </address>

Tag for specifying author’s contact details.

<dfn> ... </dfn>

Tag dedicated for definitions.

<code> ... </code>

This is used to display code snippets within a paragraph.

<sub> ... </sub>

Used for writing a subscript (smaller font just below the mid-point of normal font).

Example: ax

<sup> ... </sup>

Similar to the above tag, but for superscripting.

<small> ... </small>

Reduces text size. In HTML5, it often refers to redundant or invalid information.

Example :

<p><strong>Bold text</strong> Regular text

<em> some words in italics </em> regular text

once again.</p>

<blockquote>

Anyone who has never made a mistake has never tried anything new.<cite> Albert Einstein</cite>

</blockquote>

<pre>

Some pre-formatted text

</pre>

<p> A code snippet: <code> some code </code></p>

Links :

<a href=””> … </a>

Anchor tag. Primarily used for including hyperlinks.

 <a href=”mailto:”> … </a>

Tag dedicated to sending emails.

 <a href=”tel://###-###”> … </a>

Anchor tag for mentioning contact numbers. As the numbers are clickable, this can be particularly beneficial for mobile users. … This tag can be used to quickly navigate to a different part of the webpage.

            <a href=”#name”> … </a>

A variation of the above tag, this is only meant to navigate to a div section of the webpage.

width=””

 Specifies image width in pixels or percentages.

align=””

The relative alignment of the image. Can change with changes to other elements in the webpage.

border=””

Specifies border thickness of the image. If not mentioned, defaults to 0. … Denotes an interactive (clickable) image. … Name of the map associated between the image and the map. Specifies image map area.

 shape=””

Shape of the area.

 coords=””

Coordinates of the vital information of the shape. Example: vertices for rectangles, center/radius for circles.

Example :

<img src="planets.gif" width="145" height="126"

alt="Planets" usemap="#planetmap">

<map name="planetmap">

<area shape="rect" coords="0,0,60,100"

href="sun.htm" alt="Sun">

<area shape="circle" coords="90,58,3"

href="mercur.htm" alt="Mercury">

<area shape="circle" coords="124,58,8"

href="venus.htm" alt="Venus">

</map>

Images :

<img />

A tag to display images in the webpage.

src=”url”

The URL or path where the image is located on

your drive or on the web.

alt=”text”

The text written here is displayed when user

hovers mouse over the image. Can be used to

give additional details of the image.

height=””

Specifies image height in pixels or percentages.

Collective Character Objects :

&#34; &quot;

Quotation Marks - “

&#60; &lt;

Less than sign - <

&#62; &gt;

Greater than sign - >

&#160; &nbsp;

Non-breaking space

&#169; &copy;

Copyright symbol - ©

&#38; &amp;

Ampersand - &

&#64; &Uuml;

@ Symbol - @

&#149; &ouml;

Small bullet - •

&#153; &ucirc;

Trademark

symbol - ™

If you want COMPLETE HTML tags then click on below Download button :

Download