HTML Tutorial

HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of HTML. Our HTML tutorial is developed for beginners and professionals. In our tutorial, every topic is given step-by-step so that you can learn it in a very easy way.

Introduction to HTML

If you are new to learning HTML, then you can learn HTML from basic to a professional level and after learning HTML with CSS and JavaScript you will be able to create your own interactive and dynamic website. But Now We will focus on HTML only in this tutorial.

The major points of HTML are given below:

  • HTML stands for HyperText Markup Language.
  • HTML is used to create web pages and web applications.
  • HTML is a widely used language on the web.
  • We can create a static website by HTML only.
  • Technically, HTML is a Markup language rather than a programming language.

HTML Example with HTML Editor

In this tutorial, you will get a lot of HTML examples, at least one example for each topic with explanation. You can also edit and run these examples, with our online HTML editor. Learning HTML is fun, and it's very easy to learn.

  1. >  
  2. <html>  
  3. <head>  
  4. <title>Web page title</title>  
  5. </head>  
  6. <body>  
  7. <h1>Write Your First Heading</h1>  
  8. <p>Write Your First Paragraph.</p>  
  9. </body>  
  10. </html>  

What is HTML

HTML is an acronym that stands for HyperText Markup Language which is used for creating web pages and web applications. Let's see what is meant by Hypertext Markup Language, and a Web page.

HyperText: HyperText simply means "Text within Text." A text has a link within it, is a hypertext. Whenever you click on a link that brings you to a new webpage, you have clicked on a hypertext. HyperText is a way to link two or more web pages (HTML documents) with each other.

Markup language: A markup language is a computer language that is used to apply layout and formatting conventions to a text document. Markup language makes the text more interactive and dynamic. It can turn text into images, tables, links, etc

Web Page: A web page is a document that is commonly written in HTML and translated by a web browser. A web page can be identified by entering an URL. A Web page can be of the static or dynamic type. With the help of HTML only, we can create static web pages.

Hence, HTML is a markup language that is used for creating attractive web pages with the help of styling, and which looks in a nice format on a web browser. An HTML document is made of many HTML tags and each HTML tag contains different content.

Let's see a simple example of HTML.

  1. >  
  2. <html>  
  3. <head>  
  4. <title>Web page title</title>  
  5. </head>  
  6. <body>  
  7. <h1>Write Your First Heading</h1>  
  8. <p>Write Your First Paragraph.</p>  
  9. </body>  
  10. </html>  

Description of HTML Example

: It defines the document type or it instruct the browser about the version of HTML.

:This tag informs the browser that it is an HTML document. Text between html tag describes the web document. It is a container for all other elements of HTML except

: It should be the first element inside theelement, which contains the metadata(information about the document). It must be closed before the body tag opens.

HTML text Editors

  • An HTML file is a text file, so to create an HTML file we can use any text editor.
  • Text editors are the programs that allow editing in a written text, hence to create a web page we need to write our code in some text editor.
  • There are various types of text editors available which you can directly download, but for a beginner, the best text editor is Notepad (Windows) or TextEdit (Mac).
  • After learning the basics, you can easily use other professional text editors which are, Notepad++, Sublime Text, Vim, etc.
  • In our tutorial, we will use Notepad and sublime text editor. Following are some easy ways to create your first web page with Notepad, and sublime text.

A. HTML code with Notepad. (Recommended for Beginners)

Notepad is a simple text editor and suitable for beginners to learn HTML. It is available in all versions of Windows, from where you easily access it.

Step 1: Open Notepad (Windows)

text Editors

Step 2: Write code in HTML

text Editors

Step 3: Save the HTML file with .htm or .html extension.

text Editors

Step 4: Open the HTML page in your web browser.

To run the HTML page, you need to open the file location, where you have saved the file, and then either double-click on the file or click on open with the option

text Editors
text Editors


B. HTML code with Sublime Text-editor.(Recommended after learning basics of HTML)

When you will learn the basics of HTML, then you can use some professional text editors, which will help you to write efficient and fast code. So to use Sublime Text editors, first, it needs to download and install from the internet. You can easily download it from this https://www.sublimetext.com/download link and can install it on your PC. When the installation of Sublime text editor done then you can follow the simple steps to use it:

Step 1: Open Sublime Text editor(Windows 8):

To open Sublime Text editor go to Start screen ⤏ type Sublime Text⤏ Open. To open a new page press CTRL+N.

text Editors

Step 2: Save the page before writing any code.

To save your page in Sublime Text press Ctrl+S or go to the File option ⤏ save, to save a file use extension .htm or .html. We recommend saving the file first then write the code because after saving the page sublime text editor will give you suggestions to write code.

text Editors

Step 3: Write the code in Sublime Text editor

text Editors

Step 4: Open the HTML page in your Browser

To execute or open this page in a Web browser just right-click by mouse on the sublime text page and click on Open in Browser.

text Editors
text Editors

Building blocks of HTML

An HTML document consists of its basic building blocks which are:

  • Tags: An HTML tag surrounds the content and applies meaning to it. It is written between < and > brackets.
  • Attribute: An attribute in HTML provides extra information about the element, and it is applied within the start tag. An HTML attribute contains two fields: name & value.

Syntax

  1. <tag name  attribute_name" attr_value"> content </ tag name>   
  • Elements: An HTML element is an individual component of an HTML file. In an HTML file, everything written within tags is termed as HTML elements.

HTML Building blocks

Example:

  • >  
  • <html>  
  •   <head>  
  •     <title>The basic building blocks of HTML</title>  
  •  </head>  
  •   <body>  
  •        <h2>The building blocks</h2>  
  •        <p>This is a paragraph tag</p>  
  •        <p style="color: red">The style is attribute of paragraph tag</p>  
  •        <span>The element contains tag, attribute and content</span>  
  •   </body>  
  • </html>  

Output:

The building blocks

This is a paragraph tag

The style is attribute of paragraph tag

The element contains tag, attribute and content

HTML Tags

HTML tags are like keywords that define how a web browser will format and display the content. With the help of tags, a web browser can distinguish between HTML content and simple content. HTML tags contain three main parts: an opening tag, content, and closing tag. But some HTML tags are unclosed.

When a web browser reads an HTML document, the browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.

An HTML file must have some essential tags so that a web browser can differentiate between a simple text and HTML text. You can use as many tags as you want as per your code requirement.

  • All HTML tags must enclosed within < > these brackets.
  • Every tag in HTML performs different tasks.
  • If you have used an open tag , then you must use a close tag (except some tags)

Syntax

<tag> content </tag>


HTML Tag Examples

<p> Paragraph Tag </p>

<h2> Heading Tag </h2>

<b> Bold Tag </b>

<i> Italic Tag </i>

<u> Underline Tag</u>

Unclosed HTML Tags

Some HTML tags are not closed, for example br and hr.

<br> Tag: br stands for break line, it breaks the line of the code.

<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.


HTML Meta Tags

DOCTYPE, title, link, meta and style


HTML Text Tags

<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>


HTML Link Tags

<a> and <base>


HTML Image and Object Tags

<img>, <area>, <map>, <param> and <object>


HTML List Tags

<ul>, <ol>, <li>, <dl>, <dt> and <dd>


HTML Table Tags

table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption


HTML Form Tags

form, input, textarea, select, option, optgroup, button, label, fieldset and legend


HTML Scripting Tags

script and noscript

HTML Tags List

Following is the complete list of HTML tags with the description which are arranged alphabetically.

Tag name Description
<!-- --> This tag is used to apply comment in an HTML document.
<!DOCTYPE> This tag is used to specify the version of HTML
A
<a> It is termed as anchor tag and it creates a hyperlink or link.
<abbr> It defines an abbreviation for a phrase or longer word.
<acronym> It defines acronym for a word. (Not supported in HTML5)
<address> It defines the author's contact information of the HTML article
<applet> It defines an embedded Java applet. (Not supported in HTML5)
<area> It defines the area of an image map.
<article>HTML Tags List It defines the self-contained content.
<aside>HTML Tags List It defines content aside from main content. Mainly represented as sidebar.
<audio>HTML Tags List It is used to embed sound content in HTML document.
B
<b> It is used to make a text bold.
<base> This tag defines the base URL for all relative URL within the document.
<basefont> This tag is used to set default font, size and color for all elements of document. (Not supported in HTML5)
<bdi>HTML Tags List This tag is used to provide isolation for that part of text which may be formatted in different directions from its surrounding text.
<bdo> It is used to override the current text direction.
<big> This tag is used to make font size one level larger than its surrounding content. (Not supported in HTML5)
<blockquote> It is used to define a content which is taken from another source.
<body> It is used to define the body section of an HTML document.
<br> It is used to apply single line break.
<button> It is used to represent a clickable button
C
<canvas>HTML Tags List It is used to provide a graphics space within a web document.
<caption> It is used to define a caption for a table.
<center> It is used to align the content in center. (Not supported in HTML5)
<cite> It is used to define the title of the work, book, website, etc.
<code> It is used to display a part of programming code in an HTML document.
<col> It defines a column within a table which represent common properties of columns and used with the <colgroup> element.
<colgroup> It is used to define group of columns in a table.
D
<data>HTML Tags List It is used to link the content with the machine-readable translation.
<datalist>HTML Tags List It is used to provide a predefined list for input option.
<dd> It is used to provide definition/description of a term in description list.
<del> It defines a text which has been deleted from the document.
<details>HTML Tags List It defines additional details which user can either view or hide.
<dfn> It is used to indicate a term which is defined within a sentence/phrase.
<dialog>HTML Tags List It defines a dialog box or other interactive components.
<dir> It is used as container for directory list of files. (Not supported in HTML5)
<div> It defines a division or section within HTML document.
<dl> It is sued to define a description list.
<dt> It is used to define a term in description list.
E
<em> It is used to emphasis the content applied within this element.
<embed>HTML Tags List It is used as embedded container for external file/application/media, etc.
F
<fieldset> It is used to group related elements/labels within a web form.
<figcaption>HTML Tags List It is used to add a caption or explanation for the <figure> element.
<figure>HTML Tags List It is used to define the self-contained content, and s mostly refer as single unit.
<font> It defines the font, size, color, and face for the content. (Not supported in HTML5)
<footer>HTML Tags List It defines the footer section of a webpage.
<form> It is used to define an HTML form.
<frame> It defines a particular area of webpage which can contain another HTML file. (Not supported in HTML5)
<frameset> It defines group of Frames. (Not supported in HTML5)
H
<h1> to <h6> It defines headings for an HTML document from level 1 to level 6.
<head> It defines the head section of an HTML document.
<header>HTML Tags List It defines the header of a section or webpage.
<hr> It is used to apply thematic break between paragraph-level elements.
<html> It represents root of an HTML document.
I
<i> It is used to represent a text in some different voice.
<iframe> It defines an inline frame which can embed other content.
<img> It is used to insert an image within an HTML document.
<input> It defines an input field within an HTML form.
<ins> It represent text that has been inserted within an HTML document.
<isindex> It is used to display search string for current document. (Not supported in HTML5)
K
<kbd> It is used to define keyboard input.
L
<label> It defines a text label for the input field of form.
<legend> It defines a caption for content of <fieldset>
<li> It is used to represent items in list.
<link> It represents a relationship between current document and an external resource.
M
<main>HTML Tags List It represents the main content of an HTML document.
<map> It defines an image map with active areas.
<mark>HTML Tags List It represents a highlighted text.
<marquee> It is used to insert the scrolling text or an image either horizontally or vertically. (Not supported in HTML5)
<menu> It is used for creating a menu list of commands.
<meta> It defines metadata of an HTML document.
<meter>HTML Tags List It defines scalar measurement with known range or fractional value.
N
<nav>HTML Tags List It represents section of page to represent navigation links.
<noframes> It provides alternate content to represent in browser which does not support the <frame> elements. (Not supported in HTML5)
<noscript> It provides an alternative content if a script type is not supported in browser.
O
<object> It is used to embed an object in HTML file.
<ol> It defines an ordered list of items.
<optgroup> It is used to group the options of a drop-down list.
<option> It is used to define options or items in a drop-down list.
<output>HTML Tags List It is used as container element which can show result of a calculation.
P
<p> It represents a paragraph in an HTML document.
<param> It defines parameter for an <object> element
<picture>HTML Tags List It defines more than one source element and one image element.
<pre> It defines preformatted text in an HTML document.
<progress>HTML Tags List It defines the progress of a task within HTML document.
Q
<q> It defines short inline quotation.
R
<rp>HTML Tags List It defines an alternative content if browser does not supports ruby annotations.
<rt> It defines explanations and pronunciations in ruby annotations.
<ruby> It is used to represent ruby annotations.
S
<s> It render text which is no longer correct or relevant.
<samp> It is used to represent sample output of a computer program.
<script> It is used to declare the JavaScript within HTML document.
<section>HTML Tags List It defines a generic section for a document.
<select> It represents a control which provides a menu of options.
<small> It is used to make text font one size smaller than document?s base font size.
<source>>HTML Tags List It defines multiple media recourses for different media element such as <picture>, <video>, and <audio> element.
<span> It is used for styling and grouping inline.
<strike> It is used to render strike through the text. (Not supported in HTML5)
<strong> It is used to define important text.
<style> It is used to contain style information for an HTML document.
<sub> It defines a text which displays as a subscript text.
<summary>HTML Tags List It defines summary which can be used with <details> tag.
<sup> It defines a text which represent as superscript text.
<svg> It is used as container of SVG (Scalable Vector Graphics).
T
<table> It is used to present data in tabular form or to create a table within HTML document.
<tbody> It represents the body content of an HTML table and used along with <thead> and <tfoot>.
<td> It is used to define cells of an HTML table which contains table data
<template> It is used to contain the client side content which will not display at time of page load and may render later using JavaScript.
<textarea> It is used to define multiple line input, such as comment, feedback, and review, etc.
<tfoot> It defines the footer content of an HTML table.
<th> It defines the head cell of an HTML table.
<thead> It defines the header of an HTML table. It is used along with <tbody> and <tfoot> tags.
<time>HTML Tags List It is used to define data/time within an HTML document.
<title> It defines the title or name of an HTML document.
<tr> It defines the row cells in an HTML table
<track> It is used to define text tracks for <audio> and <video> elements.
<tt> It is used to define teletype text. (Not supported in HTML5)
U
<u> It is used to render enclosed text with an underline.
<ul> It defines unordered list of items.
V
<var> It defines variable name used in mathematical or programming context.
<video>HTML Tags List It is used to embed a video content with an HTML document
W
<wbr>HTML Tags List It defines a position within text where break line is possible.

HTML Attribute

  • HTML attributes are special words that provide additional information about the elements or attributes are the modifier of the HTML element.
  • Each element or tag can have attributes, which define the behaviour of that element.
  • Attributes should always be applied with the start tag.
  • The Attribute should always be applied with its name and value pair.
  • The Attribute name and values are case sensitive, and it is recommended by W3C that it should be written in Lowercase only.
  • You can add multiple attributes in one HTML element, but need to give space between two attributes.

Syntax

  1. <element attribute_name="value">content</element>  

Example

  • !DOCTYPE html>  
  • <html>  
  • <head>  
  • </head>  
  • <body>  
  •     <h1> This is Style attribute</h1>  
  •    <p style="height: 50px; color: blue">It will add style property in element</p>  
  •     <p style="color: red">It will change the color of content</p>  
  • </body>  
  • </html>  

Output:

HTML Attribute

Explanation of above example:

  1. <p style="height: 50px; color: blue">It will add style property in element</p>  

In the above statement, we have used paragraph tags in which we have applied style attribute. This attribute is used for applying CSS property on any HTML element. It provides height to paragraph element of 50px and turns it colour to blue. 

  1. <p style="color: red">It will change the color of content</p>  

In the above statement, we have again used the style attribute in a paragraph tag, which turns its colour red.

he title attribute in HTML

Description: The title attribute is used as a text tooltip in most the browsers. It displays its text when the user move the cursor over a link or any text. You can use it with any text or link to show the description about that link or text. In our example, we are taking this with paragraph tag and heading tag.

Example

With

tag:

  1. <h1 title="This is heading tag">Example of title attribute</h1>  

With

tag:

  1. <p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>  

Code:

  1. >  
  2. <html>  
  3.   <head>  
  4.  </head>  
  5. <body>  
  6.       
  7.   <h1 title="This is heading tag">Example of title attribute</h1>  
  8.   <p title="This is paragraph tag">Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>  
  9.   
  10. </body>  
  11. </html>  

Output:

Title Attribute


The href attribute in HTML

Description: The href attribute is the main attribute of anchor tag. This attribute gives the link address which is specified in that link. The href attribute provides the hyperlink, and if it is blank, then it will remain in same page.

Example

With link address:

  1. <a href="https://www.samtpoint.com/html-anchor">This is a link</a>

Without link address:

  1. <a href="">This is a link</a>  

The src Attribute

The src attribute is one of the important and required attribute of element. It is source for the image which is required to display on browser. This attribute can contain image in same directory or another directory. The image name or source should be correct else browser will not display the image.

Example

  1. <img src="whitepeacock.jpg" height="400" width="600">  

HTML Elements

An HTML file is made of elements. These elements are responsible for creating web pages and define content in that webpage. An element in HTML usually consist of a start tag , close tag </tag name> and content inserted between them. Technically, an element is a collection of a start tag, attributes, end tag, content between them.

Such as:

  1. <p> Hello world!!! </p>   

Example

  1. >  
  2. <html>  
  3. <head>  
  4.     <title>WebPage</title>  
  5. </head>  
  6. <body>  
  7.    <h1>This is my first web page</h1>  
  8.     <h2> How it looks?</h2>  
  9.      <p>It looks Nice!!!!!</p>  
  10. </body>  
  11. </html>  

HTML Formatting

HTML Formatting is the process of formatting text for a better look and feel. HTML provides usability to format text without using CSS. There are many formatting tags in HTML. These tags are used to make text bold, italicized, or underlined. There are almost 14 options available that how text appears in HTML and XHTML.

In HTML the formatting tags are divided into two categories:

  • Physical tag: These tags are used to provide a visual appearance to the text.
  • Logical tag: These tags are used to add some logical or semantic value to the text.

Here, we are going to learn 14 HTML formatting tags. Following is the list of HTML formatting text.

Element name Description
This is a physical tag, which is used to bold the text written between them.
This is a logical tag, which tells the browser that the text is important.
This is a physical tag that is used to make the text italic.
This is a logical tag that is used to display content in italic.
This tag is used to highlight text.
This tag is used to underline text written between it.
This tag is used to appear a text in teletype. (not supported in HTML5)
This tag is used to draw a strikethrough on a section of text. (Not supported in HTML5)
It displays the content slightly above the normal line.
It displays the content slightly below the normal line.
This tag is used to display the deleted content.
This tag displays the content which is added
This tag is used to increase the font size by one conventional unit.
This tag is used to decrease the font size by one unit from the base font size.

1) Bold Text

HTML and formatting elements

The HTML element is a physical tag which display text in bold font, without any logical importance. If you write anything within ............ element, is shown in bold letters.

See this example:

  1. <p> <b>Write Your First Paragraph in bold text.</b></p>     

Output:

Write Your First Paragraph in bold text.

The HTML tag is a logical tag, which displays the content in bold font and informs the browser about its logical importance. If you write anything between ???????. , is shown important text.

See this example:

  1. <p><strong>This is an important content</strong>, and this is normal content</p>  

Output:

This is important content, and this is the normal content

Example

  1. >  
  2. <html>  
  3. <head>  
  4.     <title>formatting elements</title>  
  5. </head>  
  6. <body>  
  7. <h1>Explanation of formatting element</h1>  
  8. <p><strong>This is an important content</strong>, and this is normal content</p>  
  9. </body>  
  10. </html>  


2) Italic Text

HTML and formatting elements

The HTML element is physical element, which display the enclosed content in italic font, without any added importance. If you write anything within ............ element, is shown in italic letters.

See this example:

  1. <p> <i>Write Your First Paragraph in italic text.</i></p>  

Output:

Write Your First Paragraph in italic text.

The HTML tag is a logical element, which will display the enclosed content in italic font, with added semantics importance.

See this example:

  1. <p><em>This is an important content</em>, which displayed in italic font.</p>  

Output:

This is important content, which is displayed in italic font.

  1. >  
  2. <html>  
  3. <head>  
  4.     <title>formatting elements</title>  
  5. </head>  
  6. <body>  
  7. <h1>Explanation of italic formatting element</h1>  
  8. <p><em>This is an important content</em>, which displayed in italic font.</p>  
  9. </body>  
  10. </html>  


3) HTML Marked formatting

If you want to mark or highlight a text, you should write the content within ..........

See this example:

  1. <h2>  I want to put a <mark> Mark</mark> on your face</h2>   

Output:

I want to put a Mark on your face


4) Underlined Text

If you write anything within ......... element, is shown in underlined text.

See this example:

  1. <p> <u>Write Your First Paragraph in underlined text.</u></p>  

Output:

Write Your First Paragraph in underlined text.


5) Strike Text

Anything was written within ....................... element is displayed with a strikethrough. It is a thin line that crosses the statement.

See this example:

  1. <p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>  

Output:

Write Your First Paragraph with a strikethrough.


6) Monospaced Font

If you want that each letter has the same width then you should write the content within ............. element.

Note: We know that most of the fonts are known as variable-width fonts because different letters have different widths. (for example: 'w' is wider than 'i'). Monospaced Font provides similar space among every letter.

See this example:

  1. <p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>     

Output:

Hello, Write Your First Paragraph in a monospaced font.


7) Superscript Text

If you put the content within .............. element, is shown in superscript; means it is displayed half a character's height above the other characters.

See this example:

  1. <p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>     

Output:

Hello, Write Your First Paragraph in superscript.


8) Subscript Text

If you put the content within .............. element, is shown in subscript; means it is displayed half a character's height below the other characters.

See this example:

  1. <p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>  

Output:

Hello, Write Your First Paragraph in subscript.


9) Deleted Text

Anything that puts within .......... is displayed as deleted text.

See this example:

  1. <p>Hello <del>Delete your first paragraph.</del></p>  

Output:

Hello

10) Inserted Text

Anything that puts within .......... is displayed as inserted text.

See this example:

  1. <p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>  

Output:

Delete your first paragraph. Write another paragraph.


11) Larger Text

If you want to put your font size larger than the rest of the text then put the content within .......... It increases one font size larger than the previous one.

See this example:

  1. <p>Hello <big>Write the paragraph in larger font.</big></p>  

Output:

Hello, Write the paragraph in a larger font.


12) Smaller Text

If you want to put your font size smaller than the rest of the text then put the content within .........tag. It reduces one font size than the previous one.

See this example:

  1. <p>Hello <small>Write the paragraph in smaller font.</small></p>  

Output:

Hello, Write the paragraph in smaller font.

HTML Heading

 An HTML heading or HTML h tag can be defined as a title or a subtitle that you want to display on the webpage. When you place the text within the heading tags

.........

, it is displayed on the browser in bold format, and the size of the text depends on the number of heading.

There are six different HTML headings which are defined with the

to

tags, from highest level h1 (main heading) to the least level h6 (least important heading).

h1 is the largest heading tag and h6 is the smallest one. So h1 is used for the most important heading and h6 is used for the least important.

See this example:

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

Output:

Heading no. 1

Heading no. 2

Heading no. 3

Heading no. 4

Heading no. 5
Heading no. 6

Heading elements (h1....h6) should be used for headings only. They should not be used just to make text bold or big.

  • HTML headings can also be used with nested elements. Following are different codes to display the way to use heading elements.

Example:

  1. >  
  2. <html>  
  3.  <head>  
  4.     <title>Heading elements</title>  
  5.  </head>  
  6.  <body>  
  7.      <h1>This is main heading of page. </h1>  
  8.       <p>h1 is the most important heading, which is used to display the keyword of page </p>  
  9.      <h2>This is first sub-heading</h2>  
  10.       <p>h2 describes the first sub heading of page. </p>  
  11.      <h3>This is Second sub-heading</h3>  
  12.       <p>h3 describes the second sub heading of page.</p>  
  13.       <p>We can use h1 to h6 tag to use the different sub-heading with their paragraphs if         
  14.                      required.   
  15.                 </p>  
  16.    </body>  
  17. </html>  

Output:

HTML Heading


Su

HTML Paragraph

An HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's take a simple example to see how it work. It is a notable point that a browser itself adds an empty line before and after a paragraph. An HTML

tag indicates starting of new paragraph.

See this example:

  1. <p>This is first paragraph.</p>  
  2. <p>This is second paragraph.</p>  
  3. <p>This is third paragraph.</p>  

Output:

This is the first paragraph.

This is the second paragraph.

This is the third paragraph.


Space inside HTML Paragraph

If you put a lot of spaces inside the HTML p tag, the browser removes extra spaces and extra lines while displaying the page. The browser counts many spaces and lines as a single one.

  1. <p>  
  2. I am  
  3. going to provide  
  4. you a tutorial on HTML  
  5. and hope that it will  
  6. be very beneficial for you.  
  7. </p>  
  8. <p>  
  9. Look, I put here a lot  
  10. of spaces                    but            I know, Browser will ignore it.  
  11. </p>  
  12. <p>  
  13. You cannot determine the display of HTML</p>  
  14. <p>because resized windows may create different result.  
  15. </p>  

Output:

I am going to provide you a tutorial on HTML and hope that it will be very beneficial for you.

Look, I put here a lot of spaces but I know, Browser will ignore it.

You cannot determine the display of HTML

because resized windows may create a different result.

As you can see, all the extra lines and unnecessary spaces are removed by the browser.


How to Use
and


tag with paragraph?

An HTML
tag is used for line break and it can be used with paragraph elements. Following is the example to show how to use
with

element.

Example:

  1. >  
  2. <html>  
  3.      <head>  
  4.     </head>  
  5.   <body>  
  6.       <h2> Use of line break with pragraph tag</h2>  
  7.           <p><br>Papa and mama, and baby and Dot,  
  8.      <br>Willie and me?the whole of the lot  
  9.                <br>Of us all went over in Bimberlie's sleigh,  
  10.                  <br>To grandmama's house on Christmas day.  
  11.           </p>  
  12.    </body>  
  13. </html>  

Output:

HTML Paragraph

An HTML


tag is used to apply a horizontal line between two statements or two paragraphs. Following is the example which is showing the use of


tag with paragraph.

Example:

  1. >  
  2. <html>  
  3.  <head>  
  4.     </head>  
  5.  <body>  
  6.    <h2> Example to show a horizontal line with paragraphs</h2>  
  7.      <p> An HTML hr tag draw a horizontal line and separate two paragraphs with that line.<hr> it will start a new paragraph.  
  8.      </p>  
  9.   </body>  
  10. </html>  

Output:

HTML Paragraph


HTML Phrase tag

The HTML phrase tags are special purpose tags, which defines the structural meaning of a block of text or semantics of text. Following is the list of phrase tags, some of which we have already discussed in HTML formatting.

  • Abbreviation tag :
  • Acronym tag: (not supported in HTML5)
  • Marked tag:
  • Strong tag:
  • Emphasized tag :
  • Definition tag:
  • Quoting tag:
  • Short quote tag :
  • Code tag:
  • Keyboard tag:
  • Address tag:

HTML Anchor

The HTML anchor tag defines a hyperlink that links one page to another page. It can create hyperlinks to other web page as well as files, locations, or any URL. The "href" attribute is the most important attribute of the HTML tag. and links to the destination page or URL.

href attribute of HTML anchor tag

The href attribute is used to define the address of the file to be linked. In other words, it points out the destination page.

The syntax of the HTML anchor tag is given below.

Let's see an example of an HTML anchor tag.

  1. <a href="second.html">Click for Second Page</a>  

HTML Image

The HTML img tag is used to display image on the web page. HTML img tag is an empty tag that contains attributes only, closing tags are not used in HTML image element.

Let's see an example of HTML image.

  1. <h2>HTML Image Example</h2>  
  2. <img src="good_morning.jpg" alt="Good Morning Friends"/> 

Output:

Good Morning Friends


Attributes of HTML img tag

The src and alt are important attributes of HTML img tag. All attributes of HTML image tag are given below.

1) src

It is a necessary attribute that describes the source or path of the image. It instructs the browser where to look for the image on the server.

The location of image may be on the same directory or another server.

2) alt

The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the alt attribute describe the image in words. The alt attribute is considered good for SEO prospective.

3) width

It is an optional attribute which is used to specify the width to display the image. It is not recommended now. You should apply CSS in place of width attribute.

4) height

It h3 the height of the image. The HTML height attribute also supports iframe, image and object elements. It is not recommended now. You should apply CSS in place of height attribute.

Good Morning Friends


Attributes of HTML img tag

The src and alt are important attributes of HTML img tag. All attributes of HTML image tag are given below.

1) src

It is a necessary attribute that describes the source or path of the image. It instructs the browser where to look for the image on the server.

The location of image may be on the same directory or another server.

2) alt

The alt attribute defines an alternate text for the image, if it can't be displayed. The value of the alt attribute describe the image in words. The alt attribute is considered good for SEO prospective.

3) width

It is an optional attribute which is used to specify the width to display the image. It is not recommended now. You should apply CSS in place of width attribute.

4) height

It h3 the height of the image. The HTML height attribute also supports iframe, image and object elements. It is not recommended now. You should apply CSS in place of height attribute.

HTML Table

HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.

We can create a table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.

HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer section etc. But it is recommended to use div tag over table to manage the layout of the page .


HTML Table Tags

Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for formatting.
<col> It is used with <colgroup> element to specify column properties for each column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.

HTML Table Example

Let's see the example of HTML table tag. It output is shown above.

  1. <table>  
  2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>  
  3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>  
  4. <tr><td>James</td><td>William</td><td>80</td></tr>  
  5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>  
  6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>  
  7. </table>  

Output:

First_Name Last_Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

In the above html table, there are 5 rows and 3 columns = 5 * 3 = 15 values.

HTML Lists

HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists:

  1. Ordered List or Numbered List (ol)
  2. Unordered List or Bulleted List (ul)
  3. Description List or Definition List (dl)

HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.

  1. <ol>  
  2.  <li>Aries</li>  
  3.  <li>Bingo</li>  
  4.  <li>Leo</li>  
  5.  <li>Oracle</li>  
  6. </ol>

HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li> tag.

  1. <ul>  
  2.  <li>Aries</li>  
  3.  <li>Bingo</li>  
  4.  <li>Leo</li>  
  5.  <li>Oracle</li>  
  6. </ul>  

HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as definition list where entries are listed like a dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary, list of terms or other name-value list.

The HTML definition list contains following three tags:

  1. <dl> tag defines the start of the list.
  2. <dt> tag defines a term.
  3. <dd> tag defines the term definition (description).
  1. <dl>  
  2.   <dt>Aries</dt>  
  3.   <dd>-One of the 12 horoscope sign.</dd>  
  4.   <dt>Bingo</dt>  
  5.   <dd>-One of my evening snacks</dd>  
  6.  <dt>Leo</dt>  
  7.  <dd>-It is also an one of the 12 horoscope sign.</dd>  
  8.   <dt>Oracle</dt>  
  9.   <dd>-It is a multinational technology corporation.</dd>   
  10. </dl>  

HTML Nested List

A list within another list is termed as nested list. If you want a bullet list inside a numbered list then such type of list will called as nested list.

Code:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Nested list</title>  
  5. </head>  
  6. <body>  
  7.     <p>List of Indian States with thier capital</p>  
  8. <ol>  
  9.     <li>Delhi  
  10.         <ul>  
  11.             <li>NewDelhi</li>  
  12.         </ul>  
  13.     </li>  
  14.     <li>Haryana  
  15.         <ul>  
  16.             <li>Chandigarh</li>  
  17.         </ul>  
  18.     </li>  
  19.     <li>Gujarat  
  20.         <ul>  
  21.             <li>Gandhinagar</li>  
  22.         </ul>  
  23.     </li>  
  24.     <li>Rajasthan   
  25.         <ul>  
  26.             <li>Jaipur</li>  
  27.         </ul>  
  28.     </li>  
  29.     <li>Maharashtra  
  30.         <ul>  
  31.             <li>Mumbai</li>  
  32.         </ul>  
  33.     </li>  
  34.     <li>Uttarpradesh  
  35.         <ul>  
  36.             <li>Lucknow</li></ul>  
  37.     </li>  
  38. </ol>  
  39. </body>  
  40. </html>  

Output:

HTML Lists


HTML Form

An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc.

An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, etc. .


Why use HTML Form

HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the form such as shipping address and credit/debit card details so that item can be sent to the given address.


HTML Form Syntax

  1. <form action="server url" method="get|post">  
  2.   //input controls e.g. textfield, textarea, radiobutton, button  
  3. </form>  

HTML Form Tags

Let's see the list of HTML 5 form tags.

Tag Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<select> It defines a drop-down list.
<optgroup> It defines a group of related options in a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.

HTML 5 Form Tags

Let's see the list of HTML 5 form tags.

Tag Description
<datalist> It specifies a list of pre-defined options for input control.
<keygen> It defines a key-pair generator field for forms.
<output> It defines the result of a calculation.

HTML <form> element

The HTML <form> element provide a document section to take input from user. It provides various interactive controls for submitting information to web server such as text field, text area, password field, etc.

Syntax:

  1. <form>  
  2. //Form elements  
  3. </form>  

HTML <input> element

The HTML <input> element is fundamental form element. It is used to create form fields, to take input from user. We can apply different input filed to gather different information form user. Following is the example to show the simple text input.

Example:

  1. <body>  
  2.   <form>  
  3.      Enter your name  <br>  
  4.     <input type="text" name="username">  
  5.   </form>  
  6. </body>  

Output:

HTML Form


HTML TextField Control

The type="text" attribute of input tag creates textfield control also known as single line textfield control. The name attribute is optional, but it is required for the server side component such as JSP, ASP, PHP etc.

  1. <form>  
  2.     First Name: <input type="text" name="firstname"/> <br/>  
  3.     Last Name:  <input type="text" name="lastname"/> <br/>  
  4.  </form>  

Output:

HTML TextField Control

HTML <textarea> tag in form

The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of <textarea> can be specify either using "rows" or "cols" attribute or by CSS.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Form in HTML</title>  
  5. </head>  
  6. <body>  
  7.   <form>  
  8.         Enter your address:<br>  
  9.       <textarea rows="2" cols="20"></textarea>  
  10.   </form>  
  11. </body>  
  12. </html>  

Output:

HTML textarea tag in form


Label Tag in Form

It is considered better to have label in form. As it makes the code parser/browser/user friendly.

If you click on the label tag, it will focus on the text control. To do so, you need to have for attribute in label tag that must be same as id attribute of input tag.

  1. <form>  
  2.     <label for="firstname">First Name: </label> <br/>  
  3.               <input type="text" id="firstname" name="firstname"/> <br/>  
  4.    <label for="lastname">Last Name: </label>  
  5.               <input type="text" id="lastname" name="lastname"/> <br/>  
  6.  </form>  

Output:

HTML Label Tag in Form


HTML Password Field Control

The password is not visible to the user in password field control.

  1. <form>  
  2.     <label for="password">Password: </label>  
  3.               <input type="password" id="password" name="password"/> <br/>  
  4. </form>  

Output:

HTML Password Field Control


HTML 5 Email Field Control

The email field in new in HTML 5. It validates the text for correct email address. You must use @ and . in this field.

  1. <form>  
  2.     <label for="email">Email: </label>  
  3.               <input type="email" id="email" name="email"/> <br/>  
  4. </form>  

It will display in browser like below:

HTML 5 Email Field Control

Note: If we will not enter the correct email, it will display error like:

HTML 5 Email Field Control


Radio Button Control

The radio button is used to select one option from multiple options. It is used for selection of gender, quiz questions etc.

If you use one name for all the radio buttons, only one radio button can be selected at a time.

Using radio buttons for multiple options, you can only choose a single option at a time.

  1. <form>  
  2.     <label for="gender">Gender: </label>  
  3.               <input type="radio" id="gender" name="gender" value="male"/>Male  
  4.               <input type="radio" id="gender" name="gender" value="female"/>Female <br/>  
  5. </form>  

Radio Button Control


Checkbox Control

The checkbox control is used to check multiple options from given checkboxes.

  1. <form>  
  2. Hobby:<br>  
  3.               <input type="checkbox" id="cricket" name="cricket" value="cricket"/>  
  4.                  <label for="cricket">Cricket</label> <br>  
  5.               <input type="checkbox" id="football" name="football" value="football"/>  
  6.                  <label for="football">Football</label> <br>  
  7.               <input type="checkbox" id="hockey" name="hockey" value="hockey"/>  
  8.                  <label for="hockey">Hockey</label>  
  9. </form> 

Output:

Checkbox Control


Submit button control

HTML <input type="submit"> are used to add a submit button on web page. When user clicks on submit button, then form get submit to the server.

Syntax:

  1. <input type="submit" value="submit">  

The type = submit , specifying that it is a submit button

The value attribute can be anything which we write on button on web page.

The name attribute can be omit here.

Example:

  1. <form>  
  2.     <label for="name">Enter name</label><br>  
  3.     <input type="text" id="name" name="name"><br>  
  4.     <label for="pass">Enter Password</label><br>  
  5.     <input type="Password" id="pass" name="pass"><br>  
  6.     <input type="submit" value="submit">  
  7. </form>  

Output:

Submit button control


HTML <fieldset> element:

The <fieldset> element in HTML is used to group the related information of a form. This element is used with <legend> element which provide caption for the grouped elements.

Example:

  1.  <form>  
  2.      <fieldset>  
  3.       <legend>User Information:</legend>  
  4.     <label for="name">Enter name</label><br>  
  5. <input type="text" id="name" name="name"><br>  
  6. <label for="pass">Enter Password</label><br>  
  7. <input type="Password" id="pass" name="pass"><br>  
  8. <input type="submit" value="submit">  
  9. </fieldset>  
  10. lt;/form>  

Output:

HTML fieldset element


HTML Form Example

Following is the example for a simple form of registration.

  1. <!DOCTYPE html>  
  2.  <html>  
  3.  <head>  
  4.   <title>Form in HTML</title>  
  5. </head>  
  6.  <body>  
  7.      <h2>Registration form</h2>  
  8.     <form>  
  9.      <fieldset>  
  10.         <legend>User personal information</legend>  
  11.         <label>Enter your full name</label><br>  
  12.         <input type="text" name="name"><br>  
  13.          <label>Enter your email</label><br>  
  14.          <input type="email" name="email"><br>  
  15.          <label>Enter your password</label><br>  
  16.          <input type="password" name="pass"><br>  
  17.          <label>confirm your password</label><br>  
  18.          <input type="password" name="pass"><br>  
  19.          <br><label>Enter your gender</label><br>  
  20.          <input type="radio" id="gender" name="gender" value="male"/>Male  <br>  
  21.          <input type="radio" id="gender" name="gender" value="female"/>Female <br/>    
  22.          <input type="radio" id="gender" name="gender" value="others"/>others <br/>   
  23.           <br>Enter your Address:<br>  
  24.          <textarea></textarea><br>  
  25.          <input type="submit" value="sign-up">  
  26.      </fieldset>  
  27.   </form>  
  28.  </body>  
  29. </html>  

Output:

HTML Form Example


HTML Form Example

Let's see a simple example of creating HTML form.

  1. <form action="#">  
  2. <table>  
  3. <tr>  
  4.     <td class="tdLabel"><label for="register_name" class="label">Enter name:</label></td>  
  5.     <td><input type="text" name="name" value="" id="register_name" style="width:160px"/></td>  
  6. </tr>  
  7. <tr>  
  8.     <td class="tdLabel"><label for="register_password" class="label">Enter password:</label></td>  
  9.     <td><input type="password" name="password" id="register_password" style="width:160px"/></td>  
  10. </tr>  
  11. <tr>  
  12.     <td class="tdLabel"><label for="register_email" class="label">Enter Email:</label></td>  
  13.     <td  
  14. ><input type="email" name="email" value="" id="register_email" style="width:160px"/></td>  
  15. </tr>  
  16. <tr>  
  17.     <td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</label></td>  
  18.     <td>  
  19. <input type="radio" name="gender" id="register_gendermale" value="male"/>  
  20. <label for="register_gendermale">male</label>  
  21. <input type="radio" name="gender" id="register_genderfemale" value="female"/>  
  22. <label for="register_genderfemale">female</label>  
  23.     </td>  
  24. </tr>  
  25. <tr>  
  26.     <td class="tdLabel"><label for="register_country" class="label">Select Country:</label></td>  
  27.     <td><select name="country" id="register_country" style="width:160px">  
  28.     <option value="india">india</option>  
  29.     <option value="pakistan">pakistan</option>  
  30.     <option value="africa">africa</option>  
  31.     <option value="china">china</option>  
  32.     <option value="other">other</option>  
  33. </select>  
  34. </td>  
  35. </tr>  
  36. <tr>  
  37.     <td colspan="2"><div align="right"><input type="submit" id="register_0" value="register"/>  
  38. </div></td>  
  39. </tr>  
  40. </table>  
  41. </form>  

HTML Form Input Types

In HTML <input type=" "> is an important element of HTML form. The "type" attribute of input element can be various types, which defines information field. Such as <input type="text" name="name"> gives a text box.

Following is a list of all types of <input> element of HTML.

type=" " Description
text Defines a one-line text input field
password Defines a one-line password input field
submit Defines a submit button to submit the form to server
reset Defines a reset button to reset all values in the form.
radio Defines a radio button which allows select one option.
checkbox Defines checkboxes which allow select multiple options form.
button Defines a simple push button, which can be programmed to perform a task on an event.
file Defines to select the file from device storage.
image Defines a graphical submit button.

HTML5 added new types on <input> element. Following is the list of types of elements of HTML5

type=" " Description
color Defines an input field with a specific color.
date Defines an input field for selection of date.
datetime-local Defines an input field for entering a date without time zone.
email Defines an input field for entering an email address.
month Defines a control with month and year, without time zone.
number Defines an input field to enter a number.
url Defines a field for entering URL
week Defines a field to enter the date with week-year, without time zone.
search Defines a single line text field for entering a search string.
tel Defines an input field for entering the telephone number.

HTML form Attribute

HTML <form> element attributes

In HTML there are various attributes available for <form> element which are given below:

HTML action attribute

The action attribute of <form> element defines the process to be performed on form when form is submitted, or it is a URI to process the form information.

The action attribute value defines the web page where information proceed. It can be .php, .jsp, .asp, etc. or any URL where you want to process your form.

Example:

  1. <form action="action.html" method="post">  
  2. <label>User Name:</label><br>  
  3. <input type="text" name="name"><br><br>  
  4. <label>User Password</label><br>  
  5. <input type="password" name="pass"><br><br>  
  6.  <input type="submit">  
  7.    </form>  

Output:

Demo of action attribute of form element







It will redirect to a new page "action.html" when you click on submit button


HTML method attribute

The method attribute defines the HTTP method which browser used to submit the form. The possible values of method attribute can be:

  • post: We can use the post value of method attribute when we want to process the sensitive data as it does not display the submitted data in URL.

Example:

  1. <form action="action.html" method="post">  
  • get: The get value of method attribute is default value while submitting the form. But this is not secure as it displays data in URL after submitting the form.

Example:

  1. <form action="action.html" method="get">  

When submitting the data, it will display the entered data in the form of:

  1. file:///D:/HTML/action.html?name=JavaTPoint&pass=123  

HTML target attribute

The target attribute defines where to open the response after submitting the form. The following are the keywords used with the target attribute.

  • _self: If we use _self as an attribute value, then the response will display in current page only.

Example:

  1. <form action="action.html" method="get" target="_self">  
  • _blank: If we use _blank as an attribute it will load the response in a new page.

Example:

  1. <form action="action.html" method="get" target="_blank">  

HTML autocomplete attribute

The HTML autocomplete attribute is a newly added attribute of HTML5 which enables an input field to complete automatically. It can have two values "on" and "off" which enables autocomplete either ON or OFF. The default value of autocomplete attribute is "on".

Example:

  1. <form action="action.html" method="get" autocomplete="on">  

Example:

  1. <form action="action.html" method="get" autocomplete="off">  

Note: it can be used with <form> element and <input> element both.


HTML enctype attribute

The HTML enctype attribute defines the encoding type of form-content while submitting the form to the server. The possible values of enctype can be:

  • application/x-www-form-urlencoded: It is default encoding type if the enctype attribute is not included in the form. All characters are encoded before submitting the form.

Example:

  1. <form action="action.html" method="post" enctype="application/x-www-form-urlencoded" >  
  • multipart/form-data: It does not encode any character. It is used when our form contains file-upload controls.

Example:

  1. <form action="action.html" method="post" enctype="multipart/form-data">  
  • text/plain (HTML5): In this encoding type only space are encoded into + symbol and no any other special character encoded.

Example:

  1. <form action="action.html" method="post" enctype="text/plain" >  

HTML novalidate attribute HTML5

The novalidate attribute is newly added Boolean attribute of HTML5. If we apply this attribute in form then it does not perform any type of validation and submit the form.

Example:

  1. <form action = "action.html" method = "get" novalidate>  

Output:

Fill the form

Enter name:

Enter age:

Enter email:

Try to change the form detials with novalidate atttribute and without novalidate attribute and see the difference.


HTML <input> element attribute

HTML name attribute

The HTML name attribute defines the name of an input element. The name and value attribute are included in HTTP request when we submit the form.

Note: One should not omit the name attribute as when we submit the form the HTTP request includes both name-value pair and if name is not available it will not process that input field.

Example:

  1. <form action = "action.html" method = "get">  
  2.          Enter name:<br><input type="name" name="uname"><br>  
  3.          Enter age:<br><input type="number" name="age"><br>  
  4.          Enter email:<br><input type="email"><br>  
  5.          <input type="submit" value="Submit">  
  6.       </form>  

Output:

Fill the form

Enter name:

Enter age:

Enter email:

Note: If you will not use name attribute in any input field, then that input field will not be submitted, when submit the form.

Click on submit and see the URL where email is not included in HTTP request as we have not used name attribute in the email input field


HTML value attribute

The HTML value attribute defines the initial value or default value of an input field.

Example:

  1. <form>  
  2.         <label>Enter your Name</label><br>  
  3.         <input type="text" name="uname" value="Enter Name"><br><br>  
  4.         <label>Enter your Email-address</label><br>  
  5.         <input type="text" name="uname" value="Enter email"><br><br>  
  6.           <label>Enter your password</label><br>  
  7.         <input type="password" name="pass" value=""><br><br>  
  8.         <input type="submit" value="login">  
  9.    </form>   

Output:

Fill the form










Note: In password input filed the value attribute will always unclear


HTML required attribute HTML5

HTML required is a Boolean attribute which specifies that user must fill that filed before submitting the form.

Example:

  1. <form>  
  2.         <label>Enter your Email-address</label><br>  
  3.         <input type="text" name="uname" required><br><br>  
  4.          <label>Enter your password</label><br>  
  5.         <input type="password" name="pass"><br><br>  
  6.         <input type="submit" value="login">  
  7.    </form>  

Output:

Fill the form







If you will try to submit the form without completing email field then it will give an error pop up.


HTML autofocus attribute HTML5

The autofocus is a Boolean attribute which enables a field automatically focused when a webpage loads.

Example:

  1. <form>  
  2.         <label>Enter your Email-address</label><br>  
  3.         <input type="text" name="uname" autofocus><br><br>  
  4.          <label>Enter your password</label><br>  
  5.         <input type="password" name="pass"><br><br>  
  6.         <input type="submit" value="login">  
  7.    </form>      

HTML placeholder attribute HTML5

The placeholder attribute specifies a text within an input field which informs the user about the expected input of that filed.

The placeholder attribute can be used with text, password, email, and URL values.

When the user enters the value, the placeholder will be automatically removed.

Example:

  1. <form>  
  2.         <label>Enter your name</label><br>  
  3.         <input type="text" name="uname" placeholder="Your name"><br><br>  
  4.             <label>Enter your Email address</label><br>  
  5.         <input type="email" name="email" placeholder="example@gmail.com"><br><br>  
  6.             <label>Enter your password</label><br>  
  7.         <input type="password" name="pass" placeholder="your password"><br><br>  
  8.         <input type="submit" value="login">  
  9.     </form>  

Output:

Registration form











HTML disabled attribute

The HTML disabled attribute when applied then it disable that input field. The disabled field does not allow the user to interact with that field.

The disabled input filed does not receive click events, and these input value will not be sent to the server when submitting the form.

Example:

  1. <input type="text" name="uname" disabled><br><br>  

Output:

Registration form











HTML size attribute

The size attribute controls the size of the input field in typed characters.

Example:

  1. <label>Account holder name</label><br>  
  2.         <input type="text" name="uname" size="40" required><br><br>  
  3.         <label>Account number</label><br>  
  4.         <input type="text" name="an" size="30" required><br><br>  
  5.         <label>CVV</label><br>  
  6.         <input type="text" name="cvv"  size="1" required><br><br>  

Output:

Registration form with disbaled attribute











HTML form attribute

HTML form attribute allows a user to specify an input filed outside the form but remains the part of the parent form.

Example:

  1. User email: <br><input type="email" name="email"  form="fcontrol"  required><br>  
  2.          <input type="submit" form="fcontrol">  

Output:

User Name:


User password:


The email field is outside the form but still it will remain part of the form

User email:

HTML style using CSS

Let's suppose we have created our web page using a simple HTML code, and we want something which can present our page in a correct format, and visibly attractive. So to do this, we can style our web page with CSS (Cascading Stylesheet) properties.

CSS is used to apply the style in the web page which is made up of HTML elements. It describes the look of the webpage.

CSS provides various style properties such as background color, padding, margin, border-color, and many more, to style a webpage.

Each property in CSS has a name-value pair, and each property is separated by a semicolon (;).

Note: In this chapter, we have given a small overview of CSS. You will learn everything in depth about CSS in our CSS tutorial.

Example:

  1. <body style="text-align: center;">  
  2.       <h2 style="color: red;">Welcome to javaTpoint</h2>  
  3.       <p style="color: blue; font-size: 25px; font-style: italic ;">This is a great website to learn technologies in very simple way. </p>  
  4. </body>  

Test it Now

In the above example, we have used a style attribute to provide some styling format to our code.

Output:

Welcome to javaTpoint

This is a great website to learn technologies in very simple way.


Three ways to apply CSS

To use CSS with HTML document, there are three ways:

  • Inline CSS: Define CSS properties using style attribute in the HTML elements.
  • Internal or Embedded CSS: Define CSS using <style> tag in <head> section.
  • External CSS: Define all CSS property in a separate .css file, and then include the file with HTML file using tag in section.

Inline CSS:

Inline CSS is used to apply CSS in a single element. It can apply style uniquely in each element.

To apply inline CSS, you need to use style attribute within HTML element. We can use as many properties as we want, but each property should be separated by a semicolon (;).

Example:

  1. <h3 style="color: red;  
  2.             font-style: italic;  
  3.             text-align: center;  
  4.             font-size: 50px;  
  5.             padding-top: 25px;">Learning HTML using Inline CSS</h3>  

Test it Now

Output:

Learning HTML using Inline CSS


Internal CSS:

An Internal stylesheets contains the CSS properties for a webpage in <head> section of HTML document. To use Internal CSS, we can use class and id attributes.

We can use internal CSS to apply a style for a single HTML page.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.                   <style>  
  5.       /*Internal CSS using element name*/  
  6.             body{background-color:lavender;  
  7.              text-align: center;}  
  8.              h2{font-style: italic;  
  9.               font-size: 30px;  
  10.               color: #f08080;}  
  11.             p{font-size: 20px;}  
  12.         /*Internal CSS using class name*/  
  13.             .blue{color: blue;}  
  14.             .red{color: red;}  
  15.             .green{color: green;}  
  16.       </style>  
  17.     </head>  
  18.   <body>  
  19.    <h2>Learning HTML with internal CSS</h2>  
  20.     <p class="blue">This is a blue color paragraph</p>  
  21.     <p class="red">This is a red color paragraph</p>  
  22.     <p class="green">This is a green color paragraph</p>  
  23.   </body>  
  24. </html>  

Test it Now

Note: In the above example, we have used a class attribute which you will learn in the next chapter.


External CSS:

An external CSS contains a separate CSS file which only contains style code using the class name, id name, tag name, etc. We can use this CSS file in any HTML file by including it in HTML file using <link> tag.

If we have multiple HTML pages for an application and which use similar CSS, then we can use external CSS.

There are two files need to create to apply external CSS

  • First, create the HTML file
  • Create a CSS file and save it using the .css extension (This file only will only contain the styling code.)
  • Link the CSS file in your HTML file using tag in header section of HTML document.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <link rel="stylesheet" type="text/css" href="style.css">  
  5.     </head>  
  6.   <body>  
  7.    <h2>Learning HTML with External CSS</h2>  
  8.     <p class="blue">This is a blue color paragraph</p>  
  9.     <p class="red">This is a red color paragraph</p>  
  10.     <p class="green">This is a green color paragraph</p>  
  11.   </body>  
  12. </html>  

Test it Now

CSS file:

body{
background-color:lavender;
text-align: center;
}
h2{
font-style: italic;
size: 30px;
color: #f08080;
}
p{
font-size: 20px;
}

.blue{
color: blue;
}
.red{
color: red;
}
.green{
color: green;
}

HTML Classes

Class Attribute in HTML

The HTML class attribute is used to specify a single or multiple class names for an HTML element. The class name can be used by CSS and JavaScript to do some tasks for HTML elements. You can use this class in CSS with a specific class, write a period (.) character, followed by the name of the class for selecting elements.

A class attribute can be defined within <style> tag or in separate file using the (.) character.

In an HTML document, we can use the same class attribute name with different elements.

Defining an HTML class

To create an HTML class, firstly define style for HTML class using <style> tag within <head> section as following example:

Example:

  1. <head>  
  2.     <style>  
  3.         .headings{   
  4.             color: lightgreen;  
  5.             font-family: cursive;  
  6.             background-color: black; }  
  7.     </style>  
  8. </head>  

We have define style for a class name "headings", and we can use this class name with any of HTML element in which we want to provide such styling. We just need to follow the following syntax to use it.

  1. <tag class="ghf"> content </tag>  

Example 1:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <style>  
  5.         .headings{   
  6.             color: lightgreen;  
  7.             font-family: cursive;  
  8.             background-color: black; }  
  9.     </style>  
  10. </head>  
  11. <body>  
  12. <h1 class="headings">This is first heading</h1>  
  13. <h2 class="headings">This is Second heading</h2>  
  14. <h3 class="headings">This is third heading</h3>  
  15. <h4 class="headings">This is fourth heading</h4>  
  16. </body>  
  17. </html>  


Another Example with different class name

Example:

Let's use a class name "Fruit" with CSS to style all elements.

  1. <style>    
  2. .fruit {    
  3.     background-color: orange;    
  4.     color: white;    
  5.     padding: 10px;    
  6. }     
  7. </style>    
  8.     
  9. <h2 class="fruit">Mango</h2>    
  10. <p>Mango is king of all fruits.</p>    
  11.     
  12. <h2 class="fruit">Orange</h2>    
  13. <p>Oranges are full of Vitamin C.</p>    
  14.     
  15. <h2 class="fruit">Apple</h2>    
  16. <p>An apple a day, keeps the Doctor away.</p>    

Here you can see that we have used the class name "fruit" with (.) to use all its elements.

Note: You can use class attribute on any HTML element. The class name is case-sensitive.


Class Attribute in JavaScript

You can use JavaScript access elements with a specified class name by using the getElementsByClassName() method.

Example:

Let's hide all the elements with class name "fruit" when the user click on the button.

  1. <!DOCTYPE html>    
  2. <html>    
  3. <body>    
  4.     
  5. <h2>Class Attribute with JavaScript</h2>    
  6. <p>Click the button, to hide all elements with the class name "fruit", with JavaScript:</p>    
  7.     
  8. <button onclick="myFunction()">Hide elements</button>    
  9.     
  10.     
  11. <h2 class="fruit">Mango</h2>    
  12. <p>Mango is king of all fruits.</p>    
  13.     
  14. <h2 class="fruit">Orange</h2>    
  15. <p>Oranges are full of Vitamin C.</p>    
  16.     
  17. <h2 class="fruit">Apple</h2>    
  18. <p>An apple a day, keeps the Doctor away.</p>    
  19.     
  20. <script>    
  21. function myFunction() {    
  22.   var x = document.getElementsByClassName("fruit");    
  23.   for (var i = 0; i < x.length; i++) {    
  24.     x[i].style.display = "none";    
  25.   }    
  26. }    
  27. </script>    
  28.     
  29. </body>    
  30. </html>    

Note: You will learn more about JavaScript in our JavaScript tutorial.


Multiple Classes

You can use multiple class names (more than one) with HTML elements. These class names must be separated by a space.

Example:

Let's style elements with class name "fruit" and also with a class name "center".

  1. <!DOCTYPE html>    
  2. <html>    
  3. <style>    
  4. .fruit {    
  5.     background-color: orange;    
  6.     color: white;    
  7.     padding: 10px;    
  8. }     
  9.     
  10. .center {    
  11.     text-align: center;    
  12. }    
  13. </style>    
  14. <body>    
  15.     
  16. <h2>Multiple Classes</h2>    
  17. <p>All three elements have the class name "fruit". In addition, Mango also have the class name "center", which center-aligns the text.</p>    
  18.     
  19. <h2 class="fruit center">Mango</h2>    
  20. <h2 class="fruit">Orange</h2>    
  21. <h2 class="fruit">Apple</h2>    
  22.     
  23. </body>    
  24. </html>    

You can see that the first element <h2> belongs to both the "fruit" class and the "center" class.


Same class with Different Tag

You can use the same class name with different tags like <h2> and <p> etc. to share the same style.

Example:

  1. <!DOCTYPE html>    
  2. <html>    
  3. <style>    
  4. .fruit {    
  5.   background-color: orange;    
  6.   color: white;    
  7.   padding: 10px;    
  8. }     
  9. </style>    
  10. <body>    
  11. <h2>Same Class with Different Tag</h2>    
  12. <h2 class="fruit">Mango</h2>    
  13. <p class="fruit">Mango is the king of all fruits.</p>    
  14. </body>    
  15. </html>  

HTML Id Attribute

The id attribute is used to specify the unique ID for an element of the HTML document. It allocates the unique identifier which is used by the CSS and the JavaScript for performing certain tasks.

Syntax

  1. <tag id="value">  

Example 1: The following example describes how to use the id attribute in CSS document:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>  
  5. Example of Id attribute in CSS  
  6. </title>  
  7. <style>  
  8. #Cars {  
  9. padding: 40px;  
  10. background-color: lightblue;  
  11. color: black;      
  12. text-align: center;  
  13. }   
  14.   
  15. #Bikes  
  16. {  
  17. padding: 50px;  
  18. background-color: lightGreen;  
  19. text-align: center;  
  20. }  
  21. </style>  
  22. </head>  
  23. <body>  
  24. <p> Use CSS to style an element with the id: </p>  
  25. <h1 id="Cars"> Cars </h1>  
  26. <h1 id="Bikes"> Bikes </h1>  
  27. </body>  
  28. </html>   

Output:

HTML Id Attribute

Example 2: The following example describes how to use the ID attribute in JavaScript.

  1. <!DOCTYPE html>  
  2. <html>   
  3. <head>   
  4. <title> Date Attribute </title>   
  5. <script>   
  6. function viewdate() {   
  7. var x = document.getElementById("dob").value;   
  8. document.getElementById("demo").innerHTML = x;   
  9. </script>   
  10. </head>   
  11. <body>   
  12. Employee Name: <input type="text" placeholder="Your Good name"/>   
  13. <br>  
  14. <br>  
  15. Date of Joining:   
  16. <input type="date" id="dob">  
  17. <br>   
  18. <button onclick="viewdate()"> Submit   
  19. </button>   
  20. <br>  
  21. <h2 id="demo"> </h2>   
  22. </body>   
  23. </html>  

Output:

HTML Id Attribute

HTML JavaScript

A Script is a small program which is used with HTML to make web pages more attractive, dynamic and interactive, such as an alert popup window on mouse click. Currently, the most popular scripting language is JavaScript used for websites.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h1>JavaScript Date and Time example</h1>  
  5. <button type="button"  
  6. onclick="document.getElementById('demo').innerHTML = Date()">  
  7. Click me to display Date and Time.</button>  
  8. <p id="demo"></p>  
  9. </body>  
  10. </html>  


HTML <script> Tag

The HTML <script> tag is used to specify a client-side script. It may be an internal or external JavaScript which contains scripting statements, hence we can place <script> tag within <body> or <head> section.

It is mainly used to manipulate images, form validation and change content dynamically. JavaScript uses document.getElementById() method to select an HTML element.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h2>Use JavaScript to Change Text</h2>  
  5. <p id="demo"></p>  
  6. <script>  
  7. document.getElementById("demo").innerHTML = "Hello JavaTpoint";  
  8. </script>  
  9. </body>  
  10. </html>  


HTML events with JavaScript

An event is something which user does, or browser does such as mouse click or page loading are examples of events, and JavaScript comes in the role if we want something to happen on these events.

HTML provides event handler attributes which work with JavaScript code and can perform some action on an event.

Syntax:

  1. <element event = "JS code">   

Example:

  1. <input type="button" value="Click" onclick="alert('Hi, how are you')">  

Output:

Click Event Example

Click on the button and you csn see a pop-up window with a message



HTML can have following events such as:

  • Form events: reset, submit, etc.
  • Select events: text field, text area, etc.
  • Focus event: focus, blur, etc.
  • Mouse events: select, mouseup, mousemove, mousedown, click, dblclick, etc.

Following are the list for Window event attributes:

Event Event Name Handler Name Occurs when
onBlur blur When form input loses focus
onClick click When the user clicks on a form element or a link
onSubmit submit When user submits a form to the server.
onLoad load When page loads in a browser.
onFocus focus When user focuses on an input field.
onSelect select When user selects the form input filed.

Note: You will learn more about JavaScript Events in our JavaScript tutorial.

Let's see what JavaScript can do:

1) JavaScript can change HTML content.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <p>JavaScript can change the content of an HTML element:</p>  
  5. <button type="button" onclick="myFunction()">Click Me!</button>  
  6. <p id="demo"></p>  
  7. <script>  
  8. function myFunction() {   
  9.     document.getElementById("demo").innerHTML = "Hello JavaTpoint!";  
  10. }  
  11. </script>  
  12. </body>  
  13. </html>  

2) JavaScript can change HTML style

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <p id="demo">JavaScript can change the style of an HTML element.</p>  
  5. <script>  
  6. function myFunction() {  
  7.     document.getElementById("demo").style.fontSize = "25px";   
  8.     document.getElementById("demo").style.color = "brown";  
  9.     document.getElementById("demo").style.backgroundColor = "lightgreen";         
  10. }  
  11. </script>  
  12. <button type="button" onclick="myFunction()">Click Me!</button>  
  13. </body>  
  14. </html>  

3) JavaScript can change HTML attributes.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <script>  
  5. function light(sw) {  
  6.     var pic;  
  7.     if (sw == 0) {  
  8.         pic = "pic_lightoff.png"  
  9.     } else {  
  10.         pic = "pic_lighton.png"  
  11.     }  
  12.     document.getElementById('myImage').src = pic;  
  13. }  
  14. </script>  
  15. <img id="myImage" src="pic_lightoff.png" width="100" height="180">  
  16. <p>  
  17. <button type="button" onclick="light(1)">Light On</button>  
  18. <button type="button" onclick="light(0)">Light Off</button>  
  19. </p>  
  20. </body>  
  21. </html>  


Use External Script

Suppose, you have various HTML files which should have same script, then we can put our JavaScript code in separate file and can call in HTML file. Save JavaScript external files using .js extension.

Note: Do not add <script> tag in the external file, and provide the complete path where you have put the JS file.

Syntax:

  1. <script type="text/javascript" src="URL "></script>  

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3.    <head>  
  4.     <script type="text/javascript" src="external.js"></script>  
  5.     </head>  
  6.      <body>  
  7.       <h2>External JavaScript Example</h2>  
  8.        <form onsubmit="fun()">  
  9.          <label>Enter your name:</label><br>  
  10.       <input type="text" name="uname" id="frm1"><br>  
  11.        <label>Enter your Email-address:</label><br>    
  12.       <input type="email" name="email"><br>  
  13.       <input type="submit">  
  14.   </form>  
  15.  </body>  
  16.  </html>  

JavaScript code:

  1. function fun() {  
  2.        var x = document.getElementById("frm1").value;  
  3.         alert("Hi"+" "+x+ "you have successfully submitted the details");  
  4.     }  

Output:

HTML JavaScript


HTML <noscript> Tag

HTML <noscript> tag is used to write disabled script in the browser. The text written within <noscript></noscript> tag is not displayed on the browser.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <p id="demo"></p>  
  5. <script>  
  6. document.getElementById("demo").innerHTML = "Hello JavaScript!";  
  7. </script>  
  8. <noscript>This text is not visible in the browser.</noscript>  
  9. </body>  
  10. </html>  

HTML File Paths

An HTML file path is used to describe the location of a file in a website folder. File paths are like an address of file for a web browser. We can link any external resource to add in our HTML file with the help of file paths such as images, file, CSS file, JS file, video, etc.

The src or href attribute requires an attribute to link any external source to HTML file.

Following are the different types to specify file paths:

  1. <img src="picture.jpg"> It specifies that picture.jpg is located in the same folder as the current page.
  2. <img src="images/picture.jpg"> It specifies that picture.jpg is located in the images folder in the current folder.
  3. <img src="/images/picture.jpg"> It specifies that picture.jpg is located in the images folder at the root of the current web.
  4. <img src="../picture.jpg"> It specifies that picture.jpg is located in the folder one level up from the current folder.

File paths are used on webpages to link external files like:

  1. Web pages
  2. Images
  3. Style sheets
  4. JavaScript

There are two types of File Paths:

  1. Absolute File Paths
  2. Relative File Paths

Absolute File Paths

Absolute file path specifies full URL address.

HTML Head

The HTML <head> element is used as a container for metadata (data about data). It is used between <html> tag and <body> tag.

The head of an HTML document is a part whose content is not displayed in the browser on page loading. It just contains metadata about the HTML document which specifies data about the HTML document.

An HTML head can contain lots of metadata information or can have very less or no information, it depends on our requirement. But head part has a crucial role an HTML document while creating a website.

Metadata defines the document title, character set, styles, links, scripts, and other meta information.

Following is a list of tags used in metadata:

  • <title>
  • <style>
  • <meta>
  • <link>
  • <script>
  • <base>

HTML <title> Element

The HTML <title> element is used to define the title of the document. It is used in all HTML/XHTML documents. The <title> element must be placed between <head> element, and one document can only have one title element.

What does <title> element do?

  1. It defines a title in the browser tab.
  2. It provides a title for the page when it is added to favorites.
  3. It displays a title for the page in search engine results.

Note: The title element must be specific about the document and its recommended length is 65 to 70 characters including spaces.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <title>This Page Title</title>  
  5. </head>  
  6. <body>  
  7. <p>The body's content is displayed in the browser window.</p>  
  8. <p>The content of the title element is displayed in the browser tab, in favorites and in search engine results.</p>  
  9. </body>  
  10. </html>  

HTML <style> Element

The HTML <style> element is used to style the HTML page. The <style> element can have CSS properties for that HTML page only. If we want to apply CSS for multiple pages then we should use separate CSS file.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <title>This is Page Title</title>  
  5.   <style>  
  6.     body {background-color: pink;}  
  7.     h1 {color: red;}      
  8.     p {color: blue;}  
  9.   </style>  
  10. </head>    
  11. <body>  
  12. <h1>This is a Heading</h1>  
  13. <p>This is a paragraph.</p>  
  14. </body>  
  15. </html>  

HTML <link> Element

The HTML <link> element is used to link an external style sheet to your webpage. The <link> element contains main two attributes which are "rel" and "href". The rel attribute indicates that it is a stylesheet, and href gives the path to that external file.

Example:

  1. <!DOCTYPE html>  
  2.  <html>  
  3.  <head>  
  4.     <title>This is title</title>  
  5.     <link rel="stylesheet" href="style.css">  
  6.    </head>  
  7.    <body>  
  8.     <h2>Web-page with external CSS</h2>  
  9.     <p>This is looking a cool page</p>  
  10.    </body>  
  11.  </html>  

HTML <meta> Element

The HTML <meta> element is used to specify the character set, page description, keywords, authors and other metadata on the webpage.

Metadata is mainly used by browsers, search engines, and other web services to rank your webpage better.

Let's see how to use metadata:

To define a character set:

  1. <meta charset="UTF-8">  

The charset attribute specifies the character encoding. In this example we have set it to "UTF-8" which means it can handle to display any language.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">    
  5. </head>  
  6. <body>  
  7. <p>This is written in English language<span style="color: blue"> My friend's name is.......</span></p>  
  8. <p>This is Chinese language <span style="color: red">Wǒ de péngyǒu jiào</span></p>  
  9. </body>  
  10. </html>  

Output:

HTML
Head

To define a description of your webpage:

  1. <meta name="description" content="Free Web tutorials">  

If you give a meta description then it will be useful for the relevant search to perform by search engines.

To define keywords for search engines:

  1. <meta name="keywords" content="HTML, CSS, XML, JavaScript">  

The keyword value is also used to provide keywords for a search engine, but it may ignore by browser due to spammers.

To define author of the webpage:

  1. <meta name="author" content="Akon">  

The author value specifies the name of the person who wrote the page content, and it is useful to automatically extract author information by some content management systems.

To refresh document every 30 seconds:

  1. <meta http-equiv="refresh" content="30">  

Meta refresh is used to provide instructions to the browser to automatically refresh the page after the given time interval. As in above example it will automatically refresh after 30 sec

  1. <meta http-equiv="refresh" content="10; url=https://www. samtpoint.com/html-head>  

If you add an URL with content value, then it will redirect to that page after the time limit will over.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.    <meta http-equiv="refresh" content="5; url=https://www. samtpoint.com/html-head">  
  5.  </head>  
  6.    <body>  
  7.     <h2>Meta element Example</h2>  
  8.    <p style="color: green;">Kindly wait for 5 seconds and after 5 seconds it will automatically redirect to URL specified in meta tag</p>  
  9.  </body>  
  10. </html>  

Following is an example to show how to use all Meta elements within HTML head

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <meta name="description" content="Free Web tutorials">  
  6. <meta name="keywords" content="HTML,CSS,XML,JavaScript">  
  7. <meta name="author" content="Akon">  
  8. </head>  
  9. <body>  
  10. <p>All the meta information are set.</p>  
  11. </body>  
  12. </html>  

Use <meta> tag to set the Viewport

This method is introduced in HTML5 to take control over the viewport by using <meta> tag.

Viewport is the user's visible area of a webpage. It changes from device to device and appears smaller on mobile phones than computer screens.

Syntax for <meta> viewport element:

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">  

Here, the <meta> viewport element specifies how to control the page's dimensions and scaling.

The width=device-width is used to set the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 is used to set the initial zoom level when the page is first loaded by the browser.

Example of a web page without the viewport <meta> tag:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4.   
  5. <p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>  
  6.   
  7. <img src="image.jpg" alt="image" width="460" height="345">  
  8.   
  9. <p>  
  10. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut   
  11. laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation   
  12. ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel   
  13. eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu   
  14. feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum  
  15. zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis   
  16. eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.  
  17. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat  
  18. facer possim assum.  
  19. </p>  
  20.   
  21. </body>  
  22. </html>  

Example of a web page with the viewport <meta> tag:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  
  5. <style>  
  6. img {  
  7.     max-width: 100%;  
  8.     height: auto;  
  9. }  
  10. </style>  
  11. </head>  
  12. <body>  
  13. <p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>  
  14.   
  15. <img src="image.jpg" alt="image" width="460" height="345">  
  16.   
  17. <p>  
  18. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut   
  19. laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation   
  20. ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel   
  21. eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu   
  22. feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum  
  23. zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis   
  24. eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.  
  25. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat  
  26. facer possim assum.  
  27. </p>  
  28.   
  29. </body>  
  30. </html>  

Note: To see the difference clearly, open this page on smartphone or tablet.

HTML <base> Element

The HTML <base> element is used to specify the base URL and base target for all relative URLs in a page.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>Page Title</title>  
  5. <base href="https://static. samtpoint.com/htmlpages/images/" target="_blank">  
  6. </head>  
  7. <body>  
  8. <img src="html5.png">  
  9. <p>We have specified a base URL, the browser will look for the image "html5.png"   
  10. at "https://static. samtpoint.com/htmlpages/images/html5.png"</p>  
  11. <p><a href=" https://www. samtpoint.com"> samtPoint</a></p>  
  12. <p>The link above will open in a new window because base target is set to "_blank".</p>  
  13. </body>  
  14. </html>  

HTML <script> element

HTML <script> element is used to apply client side JavaScript for the same page or to add an external JavaScript file to current page.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <script>  
  5.         function fun() {  
  6.         document.getElementById("p").style.color="green";     
  7.         }  
  8.     </script>  
  9. </head>  
  10. <body>  
  11. <h2>Script within Head element</h2>  
  12. <p id="p">This will change the color</p>  
  13. <button type="button" onclick="fun()">Click me</button>  
  14. </body>  
  15. </html>  

If we want to use some external JavaScript file then it can be applied by:

  1. <script src=".js file_path">  

Excluding <html>, <head> and <body> elements

HTML 5 facilitates us to omit the <html>, the <body>, and the <head> tag.

Example:

  1. <!DOCTYPE html>  
  2. <title>Page Title</title>  
  3. <h1>This is a heading</h1>  
  4. <p>This is a paragraph.</p>  

HTML Layouts

HTML Layouts

HTML layouts provide a way to arrange web pages in well-mannered, well-structured, and in responsive form or we can say that HTML layout specifies a way in which the web pages can be arranged. Web-page layout works with arrangement of visual elements of an HTML document.

Web page layout is the most important part to keep in mind while creating a website so that our website can appear professional with the great look. You can also use CSS and JAVASCRIPT based frameworks for creating layouts for responsive and dynamic website designing.Every website has a specific layout to display content in a specific manner. 

Following are different HTML5 elements which are used to define the different parts of a webpage.

  • <header>: It is used to define a header for a document or a section.
  • <nav>: It is used to define a container for navigation links
  • <section>: It is used to define a section in a document
  • <article>: It is used to define an independent self-contained article
  • <aside>: It is used to define content aside from the content (like a sidebar)
  • <footer>: It is used to define a footer for a document or a section
  • <details>: It is used to define additional details
  • <summary>: It is used to define a heading for the <details> element

NOTE: HTML layouts create an individual space for every part of the web page. So that every element can arrange in a significant order.

Description of various Layout elements

HTML <header>

The <header> element is used to create header section of web pages. The header contains the introductory content, heading element, logo or icon for the webpage, and authorship information.

Example:

  1. <header style="background-color: #303030;  height: 80px; width: 100%">  
  2.       <h1 style="font-size: 30px; color: white;text-align: center; padding-top: 15px;">Welcome to     MyFirstWebpage</h1>  
  3.    </header>  


HTML <nav>

The <nav> elements is a container for the main block of navigation links. It can contain links for the same page or for other pages.

Example:

  1. <nav style="background-color:#bcdeef;">  
  2.         <h1 style="text-align: center;">Navgation Links</h1>  
  3.         <ul>  
  4.             <li><a href="#">link1</a></li>  
  5.             <li><a href="#">link2</a></li>  
  6.             <li><a href="#">link3</a></li>  
  7.             <li><a href="#">link4</a></li>  
  8.         </ul>  
  9.     </nav>  


HTML <section>

HTML <section> elements represent a separate section of a web page which contains related element grouped together. It can contain: text, images, tables, videos, etc.

Example:

  1. <section style="background-color:#ff7f50; width: 100%; border: 1px solid black;">  
  2.     <h2>Introduction to HTML</h2>  
  3.     <p>HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a nice format on a web browser..</p>  
  4.   </section>  


HTML <article>

The HTML

tag is used to contain a self-contained article such as big story, huge article, etc.

Example:

  1. <article style="width: 100%; border:2px solid black; background-color: #fff0f5;">  
  2.     <h2>History of Computer</h2>  
  3.     <p>Write your content here for the history of computer</p>  
  4. </article>  

HTML <aside>

HTML <aside> define aside content related to primary content. The <aside> content must be related to the primary content. It can function as side bar for the main content of web page.

Example:

  1. <aside style="background-color:#e6e6fa">  
  2.     <h2>Sidebar information</h2>  
  3.     <p>This conatins information which will represent like a side bar for a webpage</p>  
  4.   </aside>  

HTML <footer>

HTML <footer> element defines the footer for that document or web page. It mostly contains information about author, copyright, other links, etc.

Example:

  1. <footer style="background-color: #f0f8ff; width: 100%; text-align: center;">  
  2.     <h3>Footer Example</h3>  
  3.     <p>© Copyright 2018-2020. </p>  
  4. </footer>  

HTML <details>

HTML <details> element is used to add extra details about the web page and use can hide or show the details as per requirement.

Example:

  1. <details style="background-color: #f5deb3">  
  2.     <summary>This is visible section: click to show other details</summary>  
  3.     <p>This section only shows if user want to see it. </p>  
  4.  </details>  

HTML <summary>

HTML <summary> element is used with the <details> element in a web page. It is used as summary, captions about the content of <details> element.

Example:

  1. <details>  
  2.     <summary>HTML is acronym for?</summary>  
  3.     <p style="color: blue; font-size: 20px;">Hypertext Markup Language</p>  
  4.  </details>  

HTML Layout Techniques

Creating layouts are the most important things while designing a website, as it will ensure that your website looks in a well-arranged way and the content appears easy to understand. There are various techniques, and frameworks available for creating layouts, but here we will learn about simple techniques. You can use the following methods to create multicolumn layouts:

  • HTML tables (Try not to use)
  • CSS float property
  • CSS framework
  • CSS flexbox
  • Layout using div

HTML Tables (Not Recommended)

HTML table-based layout is one of the easiest ways for creating a layout, as table use only rows and column-based format, but HTML tables are not recommended for your page layout. The

element is designed to display tabular data. It is not good for a layout. Although first creating a layout is easy, but if you want to change or redesign your website, then it will be a complicated task.

Following is an example for the creation of a simple web page layout using HTML table.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.     <style>  
  5.         li{  
  6.             display: inline-block;  
  7.             padding: 10px;}  
  8.         a{  
  9.             color:#20b2aa;  
  10.         }  
  11.       </style>  
  12.  </head>  
  13. <body>  
  14.      <!-- Header Section -->  
  15.        <table width="100%" style="border-collapse:collapse;">  
  16.            <tr>  
  17.             <td colspan="2" style="background-color:#1a1a1a; text-align: center;">  
  18.                 <h3 style="font-size: 30px; color: #ff6a6a;">samtpoint Table-layout</h3>  
  19.             </td>  
  20.          </tr>  
  21.    <!-- Nav Section -->  
  22.           <tr>  
  23.                         <td colspan="2" style="background-color:#666666;">  
  24.                 <ul>  
  25.                                                       <li><a href="#">Home</a></li>  
  26.                 <li><a href="#">Menu</a></li>  
  27.                 <li><a href="#">About-us</a></li>  
  28.                 <li><a href="#">Contact us</a></li>  
  29.             </ul>  
  30.                                         </td>  
  31.           </tr>  
  32.    <!-- Main Section -->  
  33.           <tr>  
  34.              <td style="background-color:#e6e6fa; width:80%; height: 400px; text-align: center;">  
  35.                <p>Write your content Here</p>  
  36.               </td>  
  37.               <td style="background-color:#a7e6fb; height: 400px;">  
  38.                  <p>This is your side bar</p>  
  39.               </td>  
  40.          </tr>  
  41.      <!-- Footer Section -->  
  42.            <tr>  
  43.              <td colspan="2" style="background-color:#2e2e2e; text-align: center;">  
  44.                 <p style="color:#f08080">©<strong>Copyright samtpoint.com</strong></p>  
  45.             </td>  
  46.           </tr>  
  47.     </table>  
  48.  </body>  
  49. </html>  

CSS Frameworks

CSS provides many frameworks like W3.CSS, Bootstrap, and many more, to create your layout fast. Using CSS frameworks you can easily create a responsive and attractive web layout. You just need to add a link for these frameworks, and you can use all properties available in the framework.

CSS Float

You can create an entire web layout using CSS float property.

Advantage: It is very easy to learn and use. You just learn how the float and clear properties work.

Disadvantage: Floating elements are tied to the document flow, which may harm the flexibility.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. div.container {  
  6.     width: 100%;  
  7.     border: 1px solid gray;  
  8. }  
  9.   
  10. header, footer {  
  11.     padding: 1em;  
  12.     color: white;  
  13.     background-color: #000080;  
  14.     clear: left;  
  15.     text-align: center;  
  16. }  
  17.   
  18. nav {  
  19.     float: left;  
  20.     max-width: 160px;  
  21.     margin: 0;  
  22.     padding: 1em;  
  23. }  
  24.   
  25. nav ul {  
  26.     list-style-type: none;  
  27.     padding: 0;  
  28. }  
  29.   
  30. nav ul a {  
  31.     text-decoration: none;  
  32. }  
  33.   
  34. article {  
  35.     margin-left: 170px;  
  36.     border-left: 1px solid gray;  
  37.     padding: 1em;  
  38.     overflow: hidden;  
  39. }  
  40. </style>  
  41. </head>  
  42. <body>  
  43.   
  44. <div class="container">  
  45.   
  46. <header>  
  47. <h1>Tutorials Gallery</h1>  
  48. </header>  
  49.   
  50. <nav>  
  51. <ul>  
  52. <li><a href="#">HTML</a></li>  
  53. <li><a href="#">CSS</a></li>  
  54. <li><a href="#">JavaScript</a></li>  
  55. </ul>  
  56. </nav>  
  57. <article>  
  58. <h1>HTML</h1>  
  59. <p>HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of html. Our HTML tutorial is   
  60. developed for beginners and professionals.</p>  
  61. <p>TML is an acronym which stands for Hyper Text Markup Language. Let's see what is Hyper Text and what is Markup Language?</p>  
  62. </article>  
  63. <footer>Copyright © samtpoint.com</footer>  
  64. </div>  
  65. </body>  
  66. </html>  

CSS Flexbox

Flexbox is a new layout mode in CSS3.

Advantage: It ensures that the page layout must accommodate different screen sizes and different display devices.

Disadvantages: It does not work in IE10 and earlier.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. .flex-container {  
  6.     display: -webkit-flex;  
  7.     display: flex;    
  8.     -webkit-flex-flow: row wrap;  
  9.     flex-flow: row wrap;  
  10.     text-align: center;  
  11. }  
  12.   
  13. .flex-container > * {  
  14.     padding: 15px;  
  15.     -webkit-flex: 1 100%;  
  16.     flex: 1 100%;  
  17. }  
  18.   
  19. .article {  
  20.     text-align: left;  
  21. }  
  22.   
  23. header {background: #000080;color:white;}  
  24. footer {background: #000080;color:white;}  
  25. .nav {background:#eee;}  
  26.   
  27. .nav ul {  
  28.     list-style-type: none;  
  29.     padding: 0;  
  30. }  
  31. .nav ul a {  
  32.     text-decoration: none;  
  33. }  
  34.   
  35. @media all and (min-width: 768px) {  
  36.     .nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}  
  37.     .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}  
  38.     footer {-webkit-order:3;order:3;}  
  39. }  
  40. </style>  
  41. </head>  
  42. <body>  
  43.   
  44. <div class="flex-container">  
  45. <header>  
  46. <h1>City Gallery</h1>  
  47. </header>  
  48.   
  49. <nav class="nav">  
  50. <ul>  
  51. <li><a href="#">HTML</a></li>  
  52. <li><a href="#">CSS</a></li>  
  53. <li><a href="#">JavaScript</a></li>  
  54. </ul>  
  55. </nav>  
  56.   
  57. <article class="article">  
  58. <h1>HTML</h1>  
  59. <p>HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of html. Our HTML tutorial is   
  60. developed for beginners and professionals.</p>  
  61. <p>TML is an acronym which stands for Hyper Text Markup Language. Let's see what is Hyper Text and what is Markup Language?</p>  
  62. <p><strong>Resize this page to see what happens!</strong></p>  
  63. </article>  
  64.   
  65. <footer>Copyright © samtpoint.com</footer>  
  66. </div>  
  67.   
  68. </body>  
  69. </html>  

Layout using div

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Webpage using div</title>  
  5.     <style>  
  6.         body{  
  7.             margin:0px;  
  8.         }  
  9.         .header{  
  10.                 padding: 10px;  
  11.                 background-color:#455e64;  
  12.                 text-align: center;  
  13.                }  
  14.           .header h2{  
  15.             color: black; }  
  16.               /*===============[Nav CSS]==========*/  
  17.               .nav{  
  18.                 background-color:#243238;  
  19.                 padding: 5px;  
  20.                 }  
  21.                
  22.               .nav li{  
  23.               list-style: none;  
  24.               display: inline-block;  
  25.               padding: 8px;  
  26.                }  
  27.            .nav a{  
  28.             color: #fff;  
  29.            }  
  30.              
  31.           .nav ul li a:hover{  
  32.             text-decoration: none;  
  33.             color: #7fffd4;  
  34.            }  
  35.               .lside{  
  36.                  float: left;  
  37.                width: 80%;  
  38.                min-height: 440px;  
  39.                background-color: #f0f8ff;  
  40.                text-align: center;  
  41.               }  
  42.            .rside  
  43.            {  
  44.             text-align: center;  
  45.             float: right;  
  46.             width: 20%;  
  47.               min-height: 440px;  
  48.              background-color:  #c1cdcd;  
  49.            }  
  50.            .footer{  
  51.              height: 44px;  
  52.                 background-color:#455e64;   
  53.             text-align: center;   
  54.             padding-top: 10px;}  
  55.   
  56.             .footer p{  
  57.                 color:  #8fbc8f;  
  58.             }  
  59.   
  60.     </style>  
  61. </head>  
  62. <body>  
  63. <div>  
  64.     <div class="header">  
  65.       <h2>samtpoint Div Layout</h2>  
  66.     </div>  
  67.             <!-- Nav -->  
  68.         <div class="nav">  
  69.             <ul>  
  70.                 <li><a href="#">HOME</a></li>  
  71.                 <li><a href="#">MENU</a></li>  
  72.                 <li><a href="#">ABOUT</a></li>  
  73.                 <li><a href="#">CONTACT</a></li>  
  74.                 <li style="float: right;"><a href="#">LOGIN</a></li>  
  75.                 <li style="float: right;"><a href="#">SIGN-UP</a></li>  
  76.             </ul>  
  77.         </div>  
  78.        
  79.       <!-- main -->  
  80.         <div style="height:440px">  
  81.             <div class="lside">     
  82.                 <p>Write your content here</p>  
  83.             </div>  
  84.         <!-- side -->  
  85.             <div class="rside">  
  86.                 <p>This is side</p>  
  87.             </div>  
  88.         </div>  
  89.       <!-- footer -->  
  90.        <div class="footer">  
  91.         <p>©<strong>Copyright samtpoint.com</strong></p>  
  92.     </div>      
  93.  </div>  
  94. </body>  
  95. </html>  

HTML Responsive

Responsive Web design

Responsive web design is used to make your web page look appropriate, good, and well placedon all devices (desktop, tablet, smartphone etc.)

Responsive web design uses HTML and CSS to resize, hide, shrink, enlarge, or move the content. It makes the content look good on any screen.

Set the viewport

Let's see how to set the viewport.

Responsive Images

Images which can be scaled nicely to fit any browser size are known as responsive images.

How to make Image Responsive?

By using the width property

Set the CSS width property to 100% to make the image responsive and scale up and down.

Example

  1. <!DOCTYPE html>  
  2. <html>  
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  4. <body>  
  5. <h2>Responsive Image</h2>  
  6. <p>When we set the CSS width property to 100%, it makes the image responsive.    
  7. Resize the browser window to see the effect.</p>  
  8. <img src="img_girl.jpg" style="width:100%;">( change image)  
  9. </body>  
  10. </html>  

Note: A problem with the above method (width: 100%) is that the image can be scaled up to be larger than its original size. So, it is better to use the max-width property instead.

By using the max-width Property

This method is best and most used because it facilitates that the image will scale down if it has to, but never scale up to be larger than its original size.

Example

  1. <!DOCTYPE html>  
  2. <html>  
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  4. <body>  
  5. <h2>Responsive Image</h2>  
  6. <p>"max-width:100%" makes the image responsive and also ensures that the image   
  7. doesn't get bigger than its original size.</p>  
  8. <p>Resize the browser window to see the effect.</p>  
  9. <img src="img_girl.jpg" style="max-width:100%;height:auto;"> (Change the image)   
  10. </body>  
  11. </html>  

Change images according to the browser width

By using the HTML <picture> element, you can set two or more imagesaccording to the browser width. It will change the picture when you change the browser-size. i.e. desktop and phone.

Example

  1. <!DOCTYPE html>  
  2. <html>  
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  4. <body>  
  5. <h2>Change Images Depending on Browser Width</h2>  
  6. <p>Resize the browser width and the image will change at 600px and 1500px.</p>  
  7. <picture>  
  8. <source srcset="img_smallflower.jpg" media="(max-width: 600px)">(Change image)  
  9. <source srcset="img_flowers.jpg" media="(max-width: 1500px)">(Change image)  
  10. <source srcset="flowers.jpg">  
  11. <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">  
  12. </picture>  
  13. </body>  
  14. </html>  

Responsive Text-size

We can make the text size responsive by using the "uv" unit. It means viewport-width. By using this, we can make the text size to follow the browserwindow screen.

Example

  1. <!DOCTYPE html>  
  2. <html>  
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  4. <body>  
  5. <h1 style="font-size:10vw;">Here size is 10vw.</h1>  
  6. <p style="font-size:6vw;">Here size is 6vw.</p>  
  7. <p style="font-size:4vw;">Here size is 4vw.</p>  
  8. <p>Resize the browser window to see how the text size changes.</p>  
  9. </body>  
  10. </html>  

Note: viewport specifies the browser window size. 1vw = 1% of viewport width. Means, if the viewport is 100cm wide, 1vw is 1.0cm.

Media Query

We can also use media query to make responsive websites. Read the details of media query from here: Media Query

HTML Computer code

When we are programming, sometimes it is mandatory to show the Output result, error message, or coding part to user on a webpage. Hence to solve this issue HTML uses different tags for the user inputs, codes, programs, etc. With the help of these tags, you will be able to write codes to display on your webpage.

Following is a list of some tags which are used in HTML for this task.

  • <code>
  • <kbd>
  • <samp>
  • <var>
  • <pre>

HTML <code> element

It is used to represent some programming code on your website. The content written between tag will be displayed in default monospace font.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h2>Computer Code</h2>  
  5. <p>This is a programming code:</p>  
  6. <code>  
  7. x = 5;<br>  
  8. y = 6;<br>  
  9. z = x + y;  
  10. </code>  
  11. </body>  
  12. </html>  


HTML <kbd> Element

It is used to represent user input, keyboard input, voice command etc. Text written within <kbd>.....</kbd> tags is typically displayed in the browser's default monospace font.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h2>The kbd Element</h2>  
  5. <kbd>This is how  content written within kbd element looks like.</kbd></p>  
  6. </body>  
  7. </html>  


HTML <samp> Element

The HTML <samp> element is used to represent a program's output. Text written within samp element is typically displayed in the browser's default monospace font.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h2>The samp Element</h2>  
  5. <samp>This is how the content within samp element looks like. </samp>  
  6. </body>  
  7. </html>  


HTML <var> element

The HTML <var> element is used to define a variable. The variable could be a variable in a mathematical expression or a variable in programming context.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h2>The var Element</h2>  
  5. <p>This is a famous formula: <var>E</var> = <var>mc</var><sup>2</sup>.</p>  
  6. </body>  
  7. </html>  


HTML <pre> element

The <pre> element defines preformatted text, which displays the content within it in a fixed-width font. It keeps the content into its original format and ignores all formatting.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h3>Example of pre tag</h3>  
  5.   <pre>  
  6.     This is content written   
  7.     within pre tag, and  pre tag will ignore all   
  8.     spaces,     break lines, and will display the content   
  9.     as in original format.   
  10.   </pre>  
  11.  </body>  
  12. </html>  

Test it Now

HTML character entities are used as a replacement of reserved characters in HTML. You can also replace characters that are not present on your keyboard by entities.

These characters are replaced because some characters are reserved in HTML. HTML entities provide a wide range of characters which can allow you to add icons, geometric shapes, mathematical operators, etc.

For example: if you use less than (<) or greater than (>) symbols in your text, the browser can mix them with tags that's why character entities are used in HTML to display reserved characters.

How to use an entity:

You can use an entity in your HTML document by name or by a numerical character reference. Each entity starts with symbol ampersand (&) and ends with a semicolon (;).

Syntax:

  1. &entity_name;  
  2.   OR  
  3. &#entity_number;  

Most used HTML Character Entities

Result Description Entity Name Entity Number
  non-breaking space &nbsp; 160
< less than &lt; 60
> greater than &gt; 62
& ampersand &amp; 38
" double quotation mark &quot; 34
' single quotation mark (apostrophe) &apos; 39
¢ cent &cent; 162
£ pound &pound; 163
¥ yen &yen; 165
Euro &euro; 8364
© copyright &copy; 169
® registered trademark &reg; 174

Note:Entity names are case sensitive.

Advantage of entity name: An entity name is easy to remember.

Disadvantage of entity name: Browsers may not support all entity names, but the support for numbers is good.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title></title>  
  5. </head>  
  6.  <body>  
  7.     <h3>HTML entity example</h3>  
  8.     <p> "This is the content written within entity"</p>  
  9.     <p> <p> Paragraph tag </p>  
  10.  </body>  
  11. </html>  

Diacritical Marks in HTML

There are some special types of letters used in HTML whichhave some glyph added to the top or below the letters. These glyphs are called diacritical mark.

Some diacritical marks, like grave (   ̀) and acute (   ́) are called accents.Diacritical marks can be used both above and below a letter, inside a letter, and between two letters.

Following is a list of some diacritical marks:

Mark Character Construct Result
 ̀ a a&#768;
 ́ a a&#769;
̂ a a&#770;
 ̃ a a&#771;
 ̀ O O&#768;
 ́ O O&#769;
̂ O O&#770;
 ̃ O O&#771;

HTML Symbols

There are many mathematical, technical and currency symbols which are not present on a normal keyboard. We have to use HTML entity names to add such symbols to an HTML page.

If there no entity name exists, you can use an entity number, a decimal, or hexadecimal reference.

Example:

  1. <!DOCTYPE html>     
  2.       <html>        
  3.        <body>    
  4.           <h3>The Currency Symbols</h3>  
  5.                    <p>This is Indian Rupee symbol <b>₹<b></p>   
  6.          <p>This is Euro symbol <b>€</b></p>      
  7.          <p> This is Dollar symbol <b>#36;</b></p>    
  8.        </body>      
  9.     </html>    

Mathematical Symbols Supported by HTML

Char Number Entity Description
&#8704; &forall; FOR ALL
&#8706; &part; PARTIAL DIFFERENTIAL
&#8707; &exist; THERE EXISTS
&#8709; &empty; EMPTY SETS
&#8711; &nabla; NABLA
&#8712; &isin; ELEMENT OF
&#8713; &notin; NOT AN ELEMENT OF
&#8715; &ni; CONTAINS AS MEMBER
&#8719; &prod; N-ARY PRODUCT
&#8721; &sum; N-ARY SUMMATION

Greek Symbols Supported by HTML

Char Number Entity Description
Α &#913; &Alpha; GREEK CAPITAL LETTER ALPHA
Β &#914; &Beta; GREEK CAPITAL LETTER BETA
Γ &#915; &Gamma; GREEK CAPITAL LETTER GAMMA
Δ &#916; &Delta; GREEK CAPITAL LETTER DELTA
Ε &#917; &Epsilon; GREEK CAPITAL LETTER EPSILON
Ζ &#918; &Zeta; GREEK CAPITAL LETTER ZETA

Some Important Symbols Supported by HTML

Char Number Entity Description
© &#169; &copy; COPYRIGHT SIGN
® &#174; &reg; REGISTERED SIGN
&#8364; &euro; EURO SIGN
&#8482; &trade; TRADEMARK
&#8592; &larr; LEFTWARDS ARROW
&#8593; &uarr; UPWARDS ARROW
&#8594; &rarr; RIGHTWARDS ARROW
&#8595; &darr; DOWNWARDS ARROW
&#9824; &spades; BLACK SPADE SUIT
&#9827; &clubs; BLACK CLUB SUIT
&#9829; &hearts; BLACK HEART SUIT
&#9830; &diams; BLACK DIAMOND SUIT

HTML Charset

HTML Charset is also called HTML Character Sets or HTML Encoding. It is used to display an HTML page properly and correctly because for displaying anything correctly, a web browser must know which character set (character encoding) to use.

HTML Character Encoding

There are various types of Character Encoding which are given below:

ASCII Character Set

ASCII stands for American Standard Code for Information Interchange. In HTML, the first ever character encoding standard is the ASCII standard. ASCII provides 128 different alphanumeric characters that could be used on the internet: numbers (0-9), English letters (A-Z), and some special characters like! $ + - ( ) @ <> .

The main problem with ASCII encoding was it contains a limited range of characters. It contains mainly 128 characters.

ANSI Character Set

ANSI stands for American National Standard Institute. It is character set standard which is an extended version of standard ASCII character set. It supports 256 character set. ANSI also called as Windows-1252, and it was the default character set for Windows up to Windows 95.

ISO-8859-1 Character Set

ISO-8859-1 was the default character encoding in HTML 2.0. It was also an extension of ASCII standard with International characters. It also used full bytes (8-bits) to show characters.

UTF-8 Character Set

UTF-8 is a variable width character encoding which covers almost all of the characters and symbols in the world. ANSI (Windows-1252) was the original Windows character set, which supported 256 different character codes.

ISO-8859-1 was the default character set for HTML 4. This character set also supported 256 different character codes.

Why UTF 8 is also supported in HTML4?

Because ANSI and ISO-8859-1 were so limited, HTML 4 also supported UTF-8.The default character encoding for HTML5 is UTF-8.

UTF-8 syntax for HTML4:

  1. <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">  

UTF-8 syntax for HTML5:

  1. <meta charset="UTF-8">  

HTML URL Encode

What is URL?

URL stands for Uniform Resource Locator. It is actually a web address. A URL can contain words i.e. (javatpoint.com) or an Internet Protocol (IP) address i.e.195.201.68.81. But most of the user use URL in the form of words because it is easy to remember than numbers.

Syntax of a URL:

  1. scheme://prefix.domain:port/path/filename  

Here,

  • scheme is used to define the type of Internet service (most common is http or https).
  • prefix is used to define a domain prefix (default for http is www).
  • domain is used to define the Internet domain name (like javaTpoint.com).
  • port is used to define the port number at the host (default for http is 80).
  • path is used to define a path at the server (If omitted: the root directory of the site).
  • filename is used to define the name of a document or resource.

Following is a list of some common types of schemes used in URL:

  • http(HyperText Transfer Protocol):Common web pages. Not encrypted.
  • https (Secure HyperText Transfer Protocol):Secure web pages. Encrypted.
  • ftp(File Transfer Protocol): Downloading or uploading files.
  • file: A file on your computer.

URL Encoding

URL encoding is used to convert non-ASCII characters into a format that can be used over the Internet because a URL is sent over the Internet by using the ASCII character-set only. If a URL contains characters outside the ASCII set, the URL has to be converted.

In URL encoding, the non-ASCII characters are replaced with a "%" followed by hexadecimal digits.

URLs cannot contain spaces. URL encoding normally replaces a space with a plus (+) sign, or %20.

Following is a list of some character sets which are encoded by browser after submitting the text.

url encode