Basics of HTML

Introduction

HTML is short form of Hyper Text Markup Language. Using HTML Markup language can create web pages. It is easy to learn and manage. File name should be save with .html extension.

Basic tags of HTML

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

<h1>This is Heading</h1>
<p>This is paragraph.</p>

</body>
</html>

Output :

This is heading

This is paragraph

<!DOCTYPE html> html is declaration It defines the document type is HTML5

<html> </html> html tag is the root of the html web page all the code should be write inside the html tags only.

<head> </head> Head tag it defines the head portion of the document. It contain the information about metadata.

<title> </title> Title tag used to show your website title in the browser tabs.

<body> </body> Body is container of document whatever the content you will write it will display on the webpage.

<h1> </h1> h1 tag is used to defines large heading.

<p> </p> p tag is used to defines paragraph in document.

Formatting tags in HTML

<b> </b> This tag defines the bold text.

Output :

This is bold tag

<strong> </strong> This tag defines the important text.

<p> This is <b> strong</b> tag </p>

Output :

This is strong tag

<i> </i> This is italic tag comes in italic format.

<p> This is <i> italic</i> tag </p>

Output :

This is italic tag

<em> </em> Emphasized text

<p> This is normal paragraph </p>

<p> <em> This is using em tag </em> </p>

Output :

This is normal paragraph

This is using em tag

<mark> </mark> Mark tag used to highlight the text.

<small> </small> Used for smaller text

<p> This is normal paragraph </p>

<p> <small> This is using small tag</small> </p>

Output :

This is normal paragraph

This is using small tag

<sub> </sub> Subscript

Output :

H₂O

<sup> </sup> Superscript

Output :

a²+b²

Difference between bold & strong tags in HTML

<b> </b> Bold tag is used to show visually bold the text.

<strong> </strong> Strong tag is used to display the text with bold with extra important.

Which text editor should used for HTML coding

Notepad By default for windows user notepad is basic editor can use for code.

Notepad++ Is open source free editor can recommended for beginner click here to download notepad++.

Sublime Text It Is also open source free editor can recommended for beginner as well click here to download sublime text.

Brackets It Is also open source free editor can click here to download brackets.

VS Code VS Code officially know as visual studio code it’s Microsoft product most developer use this software it has many functionality and powerful IDE click here to free download.

Atom Atom is powerful IDE click here to free download.

List of All HTML Tags

HTML is short form of Hyper Text Markup Language. Using HTML Markup language can create web pages. It is easy to learn and manage. File name should be save with .html extension.

Basic tags of HTML

<a> </a> Anchor tag is used to redirect / switch from one page to another

<abbr> </abbr> abbr tag it is used specifies an abbreviation.

The Full form of the <abbr title=”Trainingmedal”> TM </abbr> is Trainingmedal

Output :

The Full form of the TM is Trainingmedal

<address> </address> Specifies an address element

<applet> </applet> It is used for embedding a Java applet within an HTML document.

<applet code = "newClass.class" width = "300" height = "200"></applet>

<area> It is used to specifies an area inside an image map.

<b> </b> It is used to specifies bold text.

<base> It is used to specifies a base URL for all the links in a page.

<!DOCTYPE html>
<html>

</html>

<basefont> It is used to specifies a base font.

<bdo dir="rtl"> ABC</bdo> It is used change the text direction. In this example ABC will print like CBA

<bgsound src="../abc.mp3"> It is used to specify background music.

<b> </b> It is used for big text.

<blink> </blink> It is used for blink the text.

<blockquote> </blockquote> It is used for specify long quotation.

<blockquote>HTML is short form of Hyper Text Markup Language. Using HTML Markup language can create web pages. It is easy to learn and manage. File name should be save with .html extension </blockquote>

Output :

 
HTML is short form of Hyper Text Markup Language.
Using HTML Markup language can create web pages. 
It is easy to learn and manage. 
File name should be save with .html extension

<body> </body> It is used for specify body element.

<br> It is used for specify single line break it is single tag there is no need to close it.

<button> Submit </button> It is used for creating button.

<button type=”button” name=”ABC” value=”Send” > Submit </button>

Output :

<caption> ABC </caption> It is used to creating caption.

<table>

<caption>Employee Salary</caption>

<tr>

<th>Salary</th>

</tr>

<tr>

<td>Deepak</td>

</tr>

<tr>

<td>Shaharukh</td>

</tr>

</table>

Output :

Employee Salary
Name	Salary
Deepak	18,00,000 LPA
Shaharukh	22,00,000 LPA

<center> </center> It is used to make text alignment center.

<p> This is normal paragraph </p>

<p> <center> This is using center tag </center> </p>

Output :

This is normal paragraph

This is using center tag

<cite> </cite> It is used to make text citation like <i> tag.

<code> ABC </code> It is used to specify computer code text.

<col> </col> It is used to specify specifies attribute for table columns.

<colgroup> </colgroup> It is used to specify specifies group of table columns.

<p>This example shows a colgroup that has three columns of different widths:</p>

</colgroup>

<tr>

<td>column 1</td>

<td>column 2</td>

<td>column 3</td>

<td>column 4</td>

</tr>

</table>

Output :

This example shows a colgroup that has three columns of different widths:

column 1

column 2

column 3

column 4

<comment> </comment> Use comment in the code developer can easily understand the code is written for what. Comment can used in HTML like <!– Contents — >

<dl> </dl> Definition list

<dd> </dd> Definition description.

<dt> </dt> Definition term. Refer the following example

<dl>
<dt>Definition List</dt>
<dd>A list of terms and their definitions/descriptions.</dd>
<dt>HTML</dt>
<dd>An HTML tutorial.</dd>
<dt>PHP</dt>
<dd>An PHP tutorial.</dd>
</dl>

Output :

Definition List
   A list of terms and their definitions/descriptions.
HTML
   An HTML tutorial.
PHP
   An PHP tutorial.

<del> </del> It is used to specify indicate delete the text.

Example :

This is <del> del </del> tag

Output :
This is ~~del~~ tag

Attribute

The attribute provides additional information about element. In below example you can see the attribute is style and height and color are value of the attribute.

Syntax

<element attribute-name=”value”>content</element>

<p style=”color: red”>Attribute example</p>

Semantics tags in HTML5

The name on suggest that developer can easily understand the structure of the document. Please refer the semantics tags below.

<article> </article>

<aside> </aside>

<details> </details>

<figcaption> </figcaption>

<figure> </figure>

<footer> </footer>

<header> </header>

<main> </main>

<mark> </mark>

<nav> </nav>

<section> </section>

<summary> </summary>

<time> </time>

Syntax

<element attribute-name=”value”>content</element>

<p style=”color: red”>Attribute example</p>