HTML Cheat Sheet helps for Beginners HTML Developer. This HTML cheat sheet gives you a quick reference for commonly used tags, what they do, how to use them. Here are created as a quick guide for those who already know how to work with these languages.

Basic HTML Structure

<html>
  <head>
    <title>website title</title>
    <meta href="http://www.gurujisepuchoo.com/" target="_blank">
    <link rel="stylesheet" href="/css/style.css">
    <script type="javascript">
        var MyCode=1;
    </script>
  </head>
  <body>
    content of website ...
  </body>
</html>

<html>..... </html>

The tag show up at the beginning and end of an HTML document. It indicates that the webpage is written in HTML5, and all other page markup comes in between these beginning and ending tags.

<title>..... </title>

The title tag is the title page. useful for both serach engines and users by explicitly stating the primary topic of each page.

<head>..... </head>

The contains information that specific page, including the title tags, meta data, and links to scripts and style sheets.

<body>..... </body>

Body tags include all content that will be shown to users, including they all see and read.

<meta>..... </meta>

Meta data spells out information about the page, including the page’s description, author, published date, keywords and other typically ‘hidden’ page information.

<style>..... </style>

This element includes document style information, typically defaulting to css.

<script>..... </script>

This element includes all scripting information, or links to external scripts. You can also include this element in the body to dynamically generate content.

<link>..... </link>

Can be used to a create relationships with external pages or documents, including style sheets.

Common Tags For Text Formatting

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

All six levels of heading, with 1 being the most important on a page and 6 being the least. These elements are used to describe content sections on a page.

<p>..... </p>

This tag use to Paragraph of Text.

<b>..... </b>

Another way to create bold text, however it’s more for drawing attention as opposed to emphasizing extra emphasis like the previous tag.

<i>..... </i>

Another way to add italics to text, however without the added emphasis and instead used to denote things like thoughts or names.

<em>..... </em>

The emphasis tags also are like they sound, emphasizing text or phrases displayed as italics in most browsers.

<strike>..... </strike>

This tag creates strike through test with a line. Another older tag not commonly supported.

<pre>..... </pre>

Pre-formatted taxt laid out with whilespace inside the element intact.

<del>..... </del>

Helps denote a previously deleted section of text.

<font>..... </font>

Font tag ols-school way to colour fonts. No longer part of HTML5.

<blockquote>..... </blockquote>

Reserved for paragraphs of quotations, often cited.

Links Formating

<a href="">..... </a>

Anchor text for hyperlink.

<a name="name">..... </a>

An anchor that’s useful for bringing users to specific document elements.

<a href="tel://0987654321">..... </a>

A link to make phone numbers clickable, especially useful for mobile users.

<a href="maolto:">..... </a>

A link used to pull up an outgoing message to a spacific email address.

Images Fromatting

<img />

An image tag to include and display image file.

src="url"

Exactly like it sounds. THe url or file of the images to display.

alt="text"

Alternative text that helps explain the image content to both search engines and users.

height=""

The ability to specify image height in pixels or percentages.

width=""

The ability to specify image width in pixels or percentages.

border=""

Explains the border thickness(if any).

vspace=""

Denote spacing on the top or bottom of image.

hspace=""

Denote spacing on top or bottom of image.

<map>..... </map>

Helpes you tell users that this is an interactive images with clickable areas.

<map name="">..... </map>

Name of the map associated between the image and the map.

<area />

Specify the aera of images map

List Fromatting

<ol>..... </ol>

Create numbered lists showing sequential order, perference or priority.

<ul>..... </ul>

Dispaly a bulleted list without any extra emphasis on order of importance.

<li>..... </li>

Specifies ecah list item to be bulleted or numbered.

<dl>..... </dl>

Reserved specifically for list items definitions.

<dt>..... </dt>

The definition of a single term inline with body content.

<dd>..... </dd>

The description for the defined term.

Froms Formatting and attributes use

<form>..... </form>

The form element creates a form, spelling out how the form will operate based on il’s attributes.

<action="URL">

The form action URL specifies where data is to be sent when a site visitor submits the form.

<method="">

The method attribute refes to the HTTP method, which dictates how to send the form data.

<enctye="">

This attribute dictates how the form-data is to be enconded when submitting information back to the web sever.

<autocomplete>

Dicates whether a form should have autocomplete on or off.

<novaildate>

Dicates wherher the form should not be vaildated when submitted.

<action="URL">

<accept-charsets>

Identifies the character encodings upon the form submission.

<target">

Tells where to dispaly the form response after being submitted generally one of the following:_blank, _self, _parent, _top.

<fieldset>.....</fieldset>

Identifies the group of all fields on the form.

<label>.....</label>

A simple filed label, telling the user what to enter in each filed.

<legend>.....</legend>

The form legendacts as a caption for the fieldset element.

<input />

The form input attribute defines the types of field information to receive from a user.

<type="">

Specifies the field input type, typically including text, password, date-time, checkbox, password submit ect.

<name="">

Describes the name of the form.

<value="">

Describes the value or input field information.

<size="">

Specifices the input elements width in characters.

<maxlength="">

indentifies the maximum input element character numbers allowed.

<required>

Another helpfully explicit tag, making sure th ⁢input> element is completely filled out prior to the user submitting the form

<step="">

Identifies the legal number intervals for an input field.

<width="">

Specifies the width in pixels of an <input> element.

<height="">

Dictates the height again, in pixels of an <input> element.

<placeholder="">

Provides a helpful hint to the user, describing what the <input> element value should be.

<pattern="">

identifies a regular expression that the <input> element gets checked against, making sure the user entered the correct information.

<min="">

The minimum value allowed for each <input> element.

<autofocus>

Says to make sure that the <input> element comes into focus after the page loads.

<disabled="">

Disables an <input> element on the form.

<textaera>.... </textaera>

Specifies a large text input for longer messages.

<select>.... </select>

Describes a drop-down box for user’s to select one from a variety of options.

Tables Formatting

<table>.... </table>

The table tag identifies and contains all table related content.

<caption>.... </caption>

The caption is a description of what the table is, and what it contains.

<thead>.... </thead>

The table headers describe the type of infomation contained in each column underneath.

<tbody>.... </tbody>

The table body contains the table’s data or information.

<tfoot>.... </tfoot>

Table footers describle all footer content.

<tr>.... </tr>

Contains the information to be included in a single row of the table.

<th>.... </th>

Contains the actual information or data in a single header item.

<td>.... </td>

contains the actual information or data in a single table cell.

<colgroup>.... </colgroup>

groups a single or multiple columns for formatting purposes.

<col>

Defines a single column of information inside a table

Objects and Iframes

<object>.... </object>

The object tag describes an embedded the file type, including audio, video, additional pages and more.

<heigh="">

Describes the height of the object in pixels.

<width="">

Describes which media type the data contains

<type="">

Describes which media type the data contains.

<usemap>

This is the name of a client-side image map within <object>

<name="">

The name of iframe

<src="">

The URL source of the original document to embed inside the iframe.

<srcdoc="">

This contains tha actual HTML content to display inside the iframe on the currnet page.

<width="">

Defines the width of your iframe

<param>

Appending extra parameters help you customize the iframe content.

<embed>.... </embed>

The embed tag acts as a container for another external application or additional plug-in.

HTML5 New Tags

<header>.... </header>

Defines the header block for a document or individual section.

<footer>.... </footer>

Indentifies the footer block for the document.

<main>.... </main>

Describes the main content of a document.

<article>.... </article>

Identifies an article inside a document.

<aside>.... </aside>

Specifies content contained in a document sidebar.

<section>.... </section>

Specifies a section block in the document.

<details>.... </details>

Describes additional facts or information that the user can view or hide.

<dialog>.... </dialog>

A dialog box or window.

<figure>.... </figure>

An independent content block featuring diagrams, photos or more.

<mark>.... </mark>

Displays a portion of highlighted text within the page content.

<nav>.... </nav>

Navigation links for the user in a document.

<menuitem>.... </menuitem>

The specifi menu item that a user can raise from a popup menu.

<meter>.... </meter>

Describes the scalar measurement within a known array.

<progress>.... </progress>

Display the progress of a task, usually used for progress bar.

<rp>.... </rp>

Displays text within browsers that do not support ruby annotations.

<rt>.... </rt>

Display East Asian typography character details.

<ruby>.... </ruby>

Describes a ruby annotation for East Asian typgraphy.

<summary>.... </summary>

Contains a visible heading for a details element.

<bdi>.... </bdi>

Helps you format part of text in a different direction from other text.

<time>.... </time>

Idenifies the time and date.

<wbr>.... </wbr>

A line-break within tje content.