
- 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 |
  | For Non-breaking space |
& | For Ampersand (&) |
< | For < sign |
< | For > sign |
&trade | For Trademark symbol |
HTML Tag Component
A tag can have two major components:
- 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=https://www.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: