30 Nov 2021 by Vinay Ranjan

What is HTML ?

HTML stands for Hyper Text Markup Language. It is a markup language used to create web pages.

Current version is HTML5 which is supported by all the modern browsers.

HTML5 :

Attribute Name	Description
`<header>`	Denotes header of the webpage
`<footer>`	Denotes footer of the webpage
`<main>`	Denotes main section of the webpage
`<article>`	It denotes the article section which can standout
`<section>`	To create different sections in the webpage
`<aside>`	Used to place items in a sidebar
`<time>`	Used for formatting date and time
`<figure>`	It is used for figures
`<figcaption>`	Denotes the description of the figure in the webpage
`<nav>`	USed for navigation links
`<meter>`	To measure the data within the range
`<progress>`	To create the progress bar
`<dialog>`	Used to create the dialog box
`<audio>`	Used for embedding the audio in the webpage
`<video>`	Used for embedding the video in the webpage

<!--This is header -->
<header>I'm header.</header>
<!--This is nav -->
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Contact us</a></li>
  </ul>
</nav>
<!--This is main -->
<main>
  <!--This is article -->
  <article>
    <p>Article content</p>
  </article>
  <!--This is section -->
  <section>
    <span>Inside section tag </span>
  </section>
  <article>
    <p>Article content</p>
    <!--This is aside -->
    <aside>
      <p>Inside aside tag</p>
    </aside>
  </article>
</main>
<!--This is footer -->
<footer>I'm footer.</footer>

Basic Tags :

<html>...</html> - This tag defines that the webpage is written
in HTML. It appears at the very first and last line
of every webpage.
<head>...</head> - It contains the meta data and the title of the webpage. It includes the webpage’s name,
its dependencies (JS and CSS scripts), font usage etc.
<title>...</title> - 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.
<body>...</body> - Everything the user sees on a webpage is written inside this tag. It includes the main content of the webpage.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <!-- Body -->
  </body>
</html>

<base/> - Used to specify the base URL of your site,
this tag makes linking to internal links on your
site cleaner.
<meta/> - It provides the information about the page’s author, keywords, original published date etc.
<link/> - It is used to link to scripts external to
the webpage. Commonly used for linking the stylesheets.
<style>...<style/> - It is the alternative to
an external stylesheet. Basically, it is used for inline styling directly in the html.
<script>...</script> - It is used to link to an external script to make the webpage more dynamic and interactive.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <base href="https://blog-vranjan.netlify.app/" target="_blank" />
    <title>Document</title>

    <!-- One way to add styling to your page -->
    <link rel="stylesheet" type="text/css" href="./style.css" />

    <!-- One way to add script to your page -->
    <script type="text/javascript">
      var dummy = 0;
    </script>

    <!-- Another way to add styling to your page -->
    <style>
      body {
        background-color: #ffffff;
      }
    </style>
  </head>
  <body>
    <!-- Body -->
    <!-- Another way to add script to your page -->
    <script type="text/javascript" src="./script.js"></script>
  </body>
</html>

UTF-8 - It stands for UCS Transformation Format 8 is the World Wide Web’s most common character encoding. Each character is represented by one to four bytes. UTF-8 is backward-compatible with ASCII and can represent any standard Unicode character. See more.

Body attributes :

Attribute Name	Description
`<body bgcolor=?>`	It is used to set the background color of the webpage. We can use name or hex value.
`<body text=?>`	It is used to set the color of the text.
`<body link=?>`	It is used to set the color of the links.
`<body vlink=?>`	It is used to set the color of the visited links.
`<body alink=?>`	It is used to set the color of the active links.
`<body topmargin=?>`	It is used to set the top margin of the webpage.
`<body leftmargin=?>`	It is used to set the left margin of the webpage.
`<body marginwidth=?>`	It is used to set the width of the margin of the webpage.
`<body marginheight=?>`	It is used to set the height of the margin of the webpage.
`<body onload=?>`	It is used to set the function to be called when the webpage is loaded.
`<body onunload=?>`	It is used to set the function to be called when the webpage is unloaded.
`<body onbeforeunload=?>`	It is used to set the function to be called when the webpage is about to be unloaded.
`<body onbeforeprint=?>`	It is used to set the function to be called when the webpage is about to be printed.
`<body onafterprint=?>`	It is used to set the function to be called when the webpage is printed.
`<body onbeforecopy=?>`	It is used to set the function to be called when the webpage is about to be copied.
`<body oncopy=?>`	It is used to set the function to be called when the webpage is copied.
`<body onbeforecut=?>`	It is used to set the function to be called when the webpage is about to be cut.
`<body oncut=?>`	It is used to set the function to be called when the webpage is cut.
`<body onbeforepaste=?>`	It is used to set the function to be called when the webpage is about to be pasted.
`<body onpaste=?>`	It is used to set the function to be called when the webpage is pasted.
`<body oncontextmenu=?>`	It is used to set the function to be called when the webpage is about to be opened in a context menu.
`<body onmousedown=?>`	It is used to set the function to be called when the mouse button is pressed down.
`<body onmouseup=?>`	It is used to set the function to be called when the mouse button is released.
`<body onmouseover=?>`	It is used to set the function to be called when the mouse pointer is moved over the element.
`<body onmousemove=?>`	It is used to set the function to be called when the mouse pointer is moved.
`<body onmouseout=?>`	It is used to set the function to be called when the mouse pointer is moved out of the element.
`<body onkeypress=?>`	It is used to set the function to be called when a key is pressed and released.
`<body onkeydown=?>`	It is used to set the function to be called when a key is pressed down.
`<body onkeyup=?>`	It is used to set the function to be called when a key is released.
`<body onselect=?>`	It is used to set the function to be called when text is selected.
`<body onchange=?>`	It is used to set the function to be called when the value of an element is changed.
`<body onsubmit=?>`	It is used to set the function to be called when the form is submitted.

Document Structure :

Headings - There are total six headings available in HTML.

h1 - <h1>Heading 1</h1>
h2 - <h2>Heading 2</h2>
h3 - <h3>Heading 3</h3>
h4 - <h4>Heading 4</h4>
h5 - <h5>Heading 5</h5>
h6 - <h6>Heading 6</h6>

div tag - It is divides the content of the webpage into blocks.

<div>This is div</div>

p tag - It is used to create a paragraphs.

<p>This is a paragraph</p>

span tag - It is a container for inline content.

<span> This is span block </span>

br tag - It is used for line breaks in webpage.

<br />

hr tag - It is draws a horizontal line to indicate the end of the section.

<hr />

Text Formatting Tags :

They are used to format text or the data of the document.

pre tag - It is represents pre-formatted text.

<pre> Hello World </pre>

code tag - It is used to represent source codes.

<code> ... </code>

b tag - It is make the text bold.

<b> I'm bold </b>

strong tag - It is make the text important.

<strong> I'm strong </strong>

i tag - It is make the text italic.

<i> I'm italic </i>

em tag - It is make the text emphasized .

<em> I'm italic </em>

sub tag - It is make subscript.

<sub> I'm subscript </sub>

sup tag - It is make superscript.

<sup> I'm superscript </sup>

tt tag - It is make typewriter-style text.

<tt> I'm typewriter text </tt>

cite tag - It is creates citation.

<cite> I'm citation </cite>

abbr tag - It is used to create an abbreviation.

<abbr> I'm abbreviation </abbr>

acronym tag - It is used to create an acronym.

<acronym> I'm acronym </acronym>

q tag - It is used to create a short inline quotation.

<q> I'm short inline quotation </q>

blockquote tag - It is used to create a long quotation.

<blockquote>I'm long inline quotation</blockquote>

del tag - It is used to create a deleted text.

<del> I'm deleted text </del>

ins tag - It is used to create an inserted text.

<ins> I'm inserted text </ins>

s tag - It is used to create a strikethrough text.

<s> I'm strikethrough text </s>

u tag - It is used to create a underline text.

<u> I'm underline text </u>

mark tag - It is used to create a marked text.

<mark> I'm marked text </mark>

small tag - It is used to create a small text.

<small> I'm small text </small>

dfn tag - It is used for definitions.

<dfn> I'm small text </dfn>

font tag - It is used to define size, color and font.

/* Sets size of font - 1 to 7 */
<font size="?"></font>

/* Sets font color */
<font color="?"> </font>

/* Defines the font */
<font face="?"> </font>

Links Tags :

Attribute Name	Description
`<a href="">...</a>`	It is used to create a hyperlink.
`<a href="mailto:">...</a>`	It is used for sending emails.
`<a href="tel://###-###">...</a>`	It is used for mentioning contact numbers.
`<a name="name">...</a>`	It is used to navigate quickly to the different parts of the webpage.
`<a href="javascript:">...</a>`	It is used to create a link that calls a JavaScript function.
`<a href="#name">...</a>`	It is used to navigate to the div section of the webpage.

Lists Tags :

Lists can be either numerical, alphabetic, bullet, or other symbols.

ol tag - Ordered list starts with <ol> tag and each list item starts with <li> tag.

<ol>
  <li>Data 1</li>
  <li>Data 2</li>
  <li>Data 3</li>
</ol>

ul tag - Unordered list starts with <ul> tag and each list item starts with <li> tag.

<ul>
  <li>Data 1</li>
  <li>Data 2</li>
  <li>Data 3</li>
</ul>

li tag - Encompasses each list item.

<li>Data 1</li>
<li>Data 2</li>

dl tag - It creates definition / description list and each term is defined by <dt> tag and each definition is defined by <dd> tag.

<dl>
  <dt>Data 1</dt>
  <dd>Data 2</dd>
  <dt>Data 3</dt>
  <dd>Data 4</dd>
</dl>

Media Tags

Image Tags :

It is used to embed or import image in a webpage.

Attribute Name	Description
`<img />`	displays images in the webpage.
`<img src="">`	It is used to specify the path to the location of the image on your computer or the web.
`<img src="" alt="">`	It defines alternative text for the image if the image cannot be displayed.
`<img src="" width="">`	It specifies the width in pixels or percentages for the image.
`<img src="" height="">`	It specifies the height in pixels or percentages for the image.
`<img align="">`	It is used for the relative alignment of the image.
`<img border="">`	It is used to specify the border thickness of the image. If not mentioned, it defaults to 0.
`<img hspace="">`	It is used to specify the horizontal space between the image and its surrounding text.
`<img vspace="">`	It is used to specify the vertical space between the image and its surrounding text.
`<img shape="">`	It is used to specify the shape of the image.

Audio Tag :

It is used to embed sound content in the document.

<audio controls>
  <source src="demo.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

Video Tag:

It is used to embed video in the webpage.

<video width="480" height="480" controls>
  <source src="demo.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

Forms Tag :

Form is used to collect user’s data.

Attribute Name	Description
`<form>...</form>`	Parent tag for the HTML form
`action="url"`	Url is where the data will be submitted when the user fills the form.
`method=""`	It specifies which HTTP method (POST or GET) would be used to submit the form.
`enctype=""`	Only for POST method, it dictates the data encoding scheme to be used when form is submitted.
`autocomplete`	It determines whether the form has autocompleted enabled or not.
`novalidate`	It determines whether the form should be validated before submission.
`accept-charsets`	It determines character encoding when the form is submitted.
`target`	After submission, the form response is displayed wherever it refers to.
`<fieldset>...</fieldset>`	Used to identify the group of all fields in the form.
`<label>...</label>`	It is used to label a field in the form.
`<legend>...</legend>`	It operates as a caption for the `<fieldset>` element.
`<input />`	It is used to take the input from the user.

<form name="contact" method="POST">
  <p>
    <label>Your Name: <input type="text" name="name" /></label>
  </p>
  <p>
    <label>Your Email: <input type="email" name="email" /></label>
  </p>
  <p>
    <label
      >Your Role:
      <select name="role[]" multiple>
        <option value="leader">Leader</option>
        <option value="follower">Follower</option>
      </select></label
    >
  </p>
  <p>
    <label>Message: <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>

Tables :

It is a collection of rows and columns which is used to represent data in tabular form.

<table> - Parent tag for the HTML table.
<thead> - Provides information for each column in a table.
<tbody> - Specifies the body or the content of the table.
<tfoot> - Specifies the footer information of the table.
<tr> - It denotes a single row in the table.
<td> - It denotes a single cell in the table.
<th> - It denotes the heading of the table column.
<colgroup> - It is used for grouping the columns together.
<col> - It is denotes column inside the table.

<table>
  <caption>
    Demo Table
  </caption>
  <thead>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data1</td>
      <td>Data2</td>
    </tr>
    <tr>
      <td>Data1</td>
      <td>Data2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tfoot>
</table>

← Back

What is HTML ? #

HTML5 : #

Basic Tags : #

Body attributes : #

Document Structure : #

Headings - There are total six headings available in HTML.

h1 - <h1>Heading 1</h1> #

h2 - <h2>Heading 2</h2> #

h3 - <h3>Heading 3</h3>

h4 - <h4>Heading 4</h4>

h5 - <h5>Heading 5</h5>

h6 - <h6>Heading 6</h6>

div tag - It is divides the content of the webpage into blocks.

p tag - It is used to create a paragraphs.

span tag - It is a container for inline content.

br tag - It is used for line breaks in webpage.

hr tag - It is draws a horizontal line to indicate the end of the section.

Text Formatting Tags : #

pre tag - It is represents pre-formatted text.

code tag - It is used to represent source codes.

b tag - It is make the text bold.

strong tag - It is make the text important.

i tag - It is make the text italic.

em tag - It is make the text emphasized .

sub tag - It is make subscript.

sup tag - It is make superscript.

tt tag - It is make typewriter-style text.

cite tag - It is creates citation.

abbr tag - It is used to create an abbreviation.

acronym tag - It is used to create an acronym.

q tag - It is used to create a short inline quotation.

blockquote tag - It is used to create a long quotation.

del tag - It is used to create a deleted text.

ins tag - It is used to create an inserted text.

s tag - It is used to create a strikethrough text.

u tag - It is used to create a underline text.

mark tag - It is used to create a marked text.

small tag - It is used to create a small text.

dfn tag - It is used for definitions.

font tag - It is used to define size, color and font.

Links Tags : #

Lists Tags : #

ol tag - Ordered list starts with <ol> tag and each list item starts with <li> tag.

ul tag - Unordered list starts with <ul> tag and each list item starts with <li> tag.

li tag - Encompasses each list item.

dl tag - It creates definition / description list and each term is defined by <dt> tag and each definition is defined by <dd> tag.

Media Tags #

Image Tags :

Audio Tag :

Video Tag:

Forms Tag :

Tables :

What is HTML ?

HTML5 :

Basic Tags :

Body attributes :

Document Structure :

`Headings` - There are total six headings available in HTML.

h1 - `<h1>Heading 1</h1>`

h2 - `<h2>Heading 2</h2>`

h3 - `<h3>Heading 3</h3>`

h4 - `<h4>Heading 4</h4>`

h5 - `<h5>Heading 5</h5>`

h6 - `<h6>Heading 6</h6>`

`div` tag - It is divides the content of the webpage into blocks.

`p` tag - It is used to create a paragraphs.

`span` tag - It is a container for inline content.

`br` tag - It is used for line breaks in webpage.

`hr` tag - It is draws a horizontal line to indicate the end of the section.

Text Formatting Tags :

`pre` tag - It is represents pre-formatted text.

`code` tag - It is used to represent source codes.

`b` tag - It is make the text bold.

`strong` tag - It is make the text important.

`i` tag - It is make the text italic.

`em` tag - It is make the text emphasized .

`sub` tag - It is make subscript.

`sup` tag - It is make superscript.

`tt` tag - It is make typewriter-style text.

`cite` tag - It is creates citation.

`abbr` tag - It is used to create an abbreviation.

`acronym` tag - It is used to create an acronym.

`q` tag - It is used to create a short inline quotation.

`blockquote` tag - It is used to create a long quotation.

`del` tag - It is used to create a deleted text.

`ins` tag - It is used to create an inserted text.

`s` tag - It is used to create a strikethrough text.

`u` tag - It is used to create a underline text.

`mark` tag - It is used to create a marked text.

`small` tag - It is used to create a small text.

`dfn` tag - It is used for definitions.

`font` tag - It is used to define size, color and font.

Links Tags :

Lists Tags :

`ol` tag - Ordered list starts with `<ol>` tag and each list item starts with `<li>` tag.

`ul` tag - Unordered list starts with `<ul>` tag and each list item starts with `<li>` tag.

`li` tag - Encompasses each list item.

`dl` tag - It creates definition / description list and each term is defined by `<dt>` tag and each definition is defined by `<dd>` tag.

Media Tags