HTML Cheat Sheet

By | May 16, 2020
HTML Cheat Sheet
  • HTML stands for Hypertext markup language.
  • It is a Standard Markup Language for WWW.
  • All the web pages displayed on the screen are made up of HTML.
  • It contains many tags and all tags have their functionality.
  • The tag defines the nature of the contents.

Common Collective Object Use in HTML

HTML Objects Description
© To create a copyright sign
&commat To create @ symbol
&bull To create a small bullet
&nbsp For Non-breaking space
&amp For Ampersand (&)
&lt For < sign
&lt For > sign
&trade For Trademark symbol

HTML Tag Component

A tag can have two major components:

Vamware
  • Tag name
  • Attributes

Tag Name: The word or character written in HTML just after the < symbol would be considered as a tag name.

Attribute

The word or character written in an HTML tag just after the tag name would be considered as tag attribute a tag can have many attributes.

Attributes provide additional information about the tag.

Example:

<a href =” google.com”> Google </a>

Here a is the tag name and href is an attribute and Google is the content of <a> tag

Types of Tags

There are two types of Tags.

  • Pair tags
  • Single tags.

Tag which has an opening and ending tags are the pair tags such as <p> for paragraph </p>

<h1>for heading </h1>

Tag which does not have any ending or starting tag are known as single tag such as <br/> <hr/>

HTML 5

HTML 5 is the newest version of HTML, released in 2014 and it contains many new tags such as video, audio etc.

HTML Tags Cheat Sheet

Document basic Tags

Tags Description
<!DOCTYPE html> It tell the browser use the current version of HTML
<html> </html> It is the parent tag of every tags and each tag of a webpage lay inside it
<head> </head> Head tag contain title tag, meta data and conventionally <script > and <style> tags lay inside it
<title> </title> It is a content tag which hold the tile of the web page.
<body> </body> Body tag include all the other tags with content that will be shown to user

Example:

<!DOCTYPE html>

<html>
    <head>
        <title>Page Title</title>
    </head>
<body>
</body>
</html>

Document Information Tags

Document information tags deal with, the communication with the browser and give extra information to the browser about the HTML page.

Tags Description
<base/> It is used to give information to browser about the base or homepage URL link of your website
<meta/> Meta provides extra information about the web page such as page description, author, publish data, language, etc
<link/> Link tag use to add external css file
<style> </style> Style tag used to write the CSS in html file.
<script> </script> Script tag use to link and write JavaScript in the html file

Example:

<!DOCTYPE html>
<html>
    <head>
         <meta charset =”utf-8”>
        <base href=http://techgeekbuzz.com target=”blank”>
        <link rel =” ”>
         <style>     </style>
         <script>    </script>
        <title>Page Title</title>
    </head>
<body>
</body>
</html>

Document Structure Tags

Document structure tags provide a structure to the content inside them, these tags generate a box-like structure and all their content lay inside it.

Tags Description
<h1> </h1>

To

<h6> </h6>

In HTML we have 6 heading tags <h1> is the largest heading and the <h6> is the smallest one
<p> </p> p represent paragraph and by default if we do not give any tag to a content it browser would read it as a paragraph tag.
<div>  </div> div provides a generic container. we can use div tag to create different section in a same page
<span> </span> span is similar to div but it is used as a inline container
<br/> br tag is used for line break.
<hr/> hr tag use to create a horizontal line

Example:

<body>
                <div>
                                <h1> first heading</h1>
                                <p> first paragraph</p>
                </div>
                <br/>
                <hr/>
div>
                                <h1> second heading</h1>
                                <p> second paragraph</p>
                </div>
</body>

Text formatting tags

There are many tags in HTML which are used to format the text style mostly all of these tags apply on paragraph content.

Tags Description
<strong>  … </strong> it is used to bold the text
<b> </b> this tag can also bold the text
<em>…. </em> this tag is used to give an italic look to the text or phrase.
<i>… </i> this tag gives an italic look to the text
<strike> <strike> this tag create a strike on a text
<pre> </pre> it is known as pre-formatted text here monospace text laid out with white space.
<del>  </del> this tag denotes the previous deleted text
<blockquote> </blockquote> provides quotation for long paragraph
<q> </q> q tag is used for short quotation
<abbr>  </abbr> this tag is used to denote the abbreviation of any text
<sub> </sub> sub stands for subscript tag it shrinks the text up to half of the default text
<sup> </sup> sup stands for superscript and it also small the size of default text but put it upside unlike sub.
<small> </small> small tag is used to reduce the size of a text

Links Tag

Links and hyperlinks are the most important tag in HTML, these tag use to link one page with another.

Tags Description
<a href= “ ”>   </a> This is also known as anchor tag which is used for hyperlink.
<a href=”#div_name” >  </a> Link to the same page.

Image tags with attributes

Tags and attributes Description
<img/> It is an image tag, which is used to include and display images file
src = ‘URL’ Src stands for source and it is an attribute of <img> tag which accepts the value of image URL and image itself
alt = “text” alt stand for an alternative which provides alternative information of the image
height = “” height is an attribute of the image which specifies the height of the image
width= “ ” Another attribute of the image tag and it specify the width of the image
align= “ ” It is an attribute which deals with the alignment of the image
<map> </map> It provides some clickable area in the image
<area/> It is a tag which specifies the area of the image map

Example:

<img src="car.jpg" alt="car image">

List Tags

HTML has tags which can create a list.

Tags Description
<ol>  </ol> Create an Ordered numeric list
<ul>  </ul> It creates a bulleted list
<li> <li> Li tag lay inside the ul or ol tags and it create the list items
<dl> </dl> Reversed specifically for list items definitions
<dt> </dt> The definition of a single term in line with body content
<dd>  </dd> The description for the defined term

Example:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<dl>
  <dt>Cola</dt>
  <dd>- black</dd>
  <dt>blood</dt>
  <dd>Red</dd>
</dl>

Table Tags

In HTML we have table tags to create tables.

Tags Description
<table>  <table> The table tag identifies and contain all the table related content
<caption> </caption> Caption contain the description of specific table
<tbody> </tbody> It contains table’s data or information
<tfoot> </tfoot> It defines all the footer content
<tr> </tr> Contain the information to be included in a single row
<th> </th> Represent the table heading
<td> </td> Contain the actual information of data for a single table cell

Example:

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Forms:

Using the forms, we collect data from the user.

Form Tags Description
<form> </form> It creates a form, but hoe the form will work it based on form attributes
<fieldset> </fieldset> Identify the groups of all fields on the form
<label> </label> It provides a label to each form field
<legend> </legend> It works as a caption for the field set element
<input/> The form input attribute defines the type of field information to receive from a user
<textarea> </textarea> Create a large text input field for longer text
<select> </select> Create a dropdown box for user to select one from a variety of options
<option> </option> Specify one of the available options in the drop-down list
<button> </botton> Create a clickable button to submit the form

Form Specification

Form attributes and input type Description
action= “URL” It is an attribute of <form> tag to specify where to send the form data
method = ” ” It refers to the HTTP method Get or Post
enctype = “ ” This attribute deal with how the form data is to be encoded when submitting the data to the webserver
autocomplete Dedicate where the form auto-completion is on or off
type = “ ” This is an input attribute and specifies the field input type, it could be text, password, date-time, checkbox, submit, etc
name = “ ” It specifies the name of the form or input types
value = ” “ It provides value to the input fields
size= “ ” Specify the input character size
maxlength=” ” Identify the maximum input element character numbers allowed
required It makes sure that the specific form field is filled or not
width =” ” Specify the width of the input field
height =” ” Specify the height of the input field
Placeholder = “ ” It helps to provide hint, what to fill in the form input fields
Min = ” ” The minimum value allowed for input fields

Example:

<form action="go.php">
  <fieldset>
    <legend>Information</legend>
    First name:<br>
    <input type="text" name="firstname" value="Jhon"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Smith"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

Iframe

An iframe is often used to display a webpage within a web page.

Example:

<iframe src="go.html" style="border:2px solid red;"></iframe>

All New Tags in HTML5

There are many new tags introduced in HTML 5:

Form Tags Description
<header> </header> It specifies a header block for documents
<footer> </footer> Specify a footer block for the document
<main> </main> Specify the main content
<detail> </detail> Provides the additional information
<figurecaption> </figurecaption> It can caption the figure
<figure> </figure> It creates independent block featuring diagram and photos
<mark>  </mark> Highlight the content
<nav> </nav> Create a navigation bar
<meter> </meter> Describe scalar measurement
<progress> </progress> Display an animation for loading or processing
<rp> </rp> Display text with in browser that do not support ruby annotation
<time> </time> Specify time and date
<wbr> Generate new line within a content
<ruby> <ruby> Specify ruby annotation

People Also Reading:

Leave a Reply

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