- 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: