Introduction to HTML5 Part – I
Introduction
What is HTML?
• HTML stands for Hyper Text Markup Language.
• HTML is the standard markup language for creating Web pages.
• HTML describes the structure of a Web page.
• HTML elements tell the browser how to display the content.
• HTML consists of a series of elements.
HTML5
• HTML5 provides details of all 40+ HTML tags including audio, video, header, footer,
data, data list, article etc.
• HTML5 is a next version of HTML.
• Here, you will get some brand new features which will make HTML much easier.
These new introducing features make your website layout clearer to both website
designers and users.
HTML Basic Example
Example: A Simple HTML Document
From the above Example:
• The <!DOCTYPE html> declaration defines that this document is an HTML5
document.
• The <html> element is the root element of an HTML page.[ 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 <!DOCTYPE>]
• The <head> element contains meta information about the HTML page. [It should be
the first element inside the <html> element, which contains the metadata
(information about the document). It must be closed before the body tag opens.]
o The <head> tag in HTML is an essential element used to define the
head section of an HTML document. It is placed inside the <html> tag,
and used to store information that does not appear directly on the
webpage itself.
o It contains metadata that helps the browser and search engines to
understand the content of the page.
o In HTML 4, the <head> element was mandatory but in HTML5, the
<head> element can be omitted.
• The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab). [As its name suggested, it is used to add title
of that HTML page which appears at the top of the browser window. It must be
placed inside the head tag and should close immediately. (Optional)]
• The <title> tag in HTML is used to define the title of a web page. This title appears in
the browser’s title bar or tab, and it is also used by search engines as the clickable
headline in search results.
o HTML title tag is used to provide a title name for your webpage. It is
necessary for Search Engine Optimization (SEO).
o The HTML title tag must be used inside the <head> tag.
o The title of the page is displayed on the title bar of the browser.
o Let's see the example of HTML title tag.
o Example 1 :
o Example 2 :
• The <body> element defines the document's body, and is a container for all the
visible. contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading.
• The <p> element defines a paragraph.
HTML Editors
• Web pages can be created and modified by using professional HTML editors.
• However, for learning HTML we recommend a simple text editor like Notepad (PC) or
TextEdit (Mac).
HTML Documents
• All HTML documents must start with a document type declaration: <!DOCTYPE
html>.
• The HTML document itself begins with <html> and ends with </html>.
• The visible part of the HTML document is between <body> and </body>.
The <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration represents the document type, and helps browsers to
display web pages correctly.
• It must only appear once, at the top of the page (before any HTML tags).
• The <!DOCTYPE> declaration is not case sensitive.
• The <!DOCTYPE> declaration for HTML5 is:
HTML Headings
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least important
heading:
• Search engines use the headings to index the structure and content of your web pages.
• Users often skim a page by its headings. It is important to use headings to show the
document structure.
• <h1> headings should be used for main headings, followed by <h2> headings, then
the less important <h3>, and so on.
Example:
HTML Paragraphs
• HTML <p> tag defines the paragraph and is used to give structure to text content
within a webpage. It is a block-level element & used to add the space or margins
after and before the element this is done by browsers by default.
• HTML paragraphs are defined with the <p> tag:
HTML Links
• The link's destination is specified in the href attribute.
• HTML links are defined with the <a> tag:
HTML Images
• HTML images are defined with the <img> tag.
• The source file (src), alternative text (alt), width, and height are provided as
attributes:
Example 1:
Example2:
HTML Elements
• An HTML element is defined by a start tag, some content, and an end tag.
• The HTML element is everything from the start tag to the end tag:
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
Nested HTML Elements
• HTML elements can be nested (this means that elements can contain other
elements).
• All HTML documents consist of nested HTML elements.
• The following example contains four HTML elements
(<html>, <body>, <h1> and <p>):
• The <html> element is the root element and it defines the whole HTML document.
• It has a start tag <html> and an end tag </html>.
• Then, inside the <html> element there is a <body> element:
• The <body> element defines the document's body.
• It has a start tag <body> and an end tag </body>.
• Then, inside the <body> element there are two other elements: <h1> and <p>:
HTML Attributes
• All HTML elements can have attributes.
• Attributes provide additional information about elements.
• Attributes are always specified in the start tag.
• Attributes usually come in name/value pairs like: name="value".
o The href Attribute
• The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the
link goes to:
o The src Attribute
• The <img> tag is used to embed an image in an HTML page. The src attribute
specifies the path to the image to be displayed:
• There are two ways to specify the URL in the src attribute:
• 1. Absolute URL - Links to an external image that is hosted on another website.
Example: src="[Link]
• Notes: External images might be under copyright. If you do not get permission to use
it, you may be in violation of copyright laws. In addition, you cannot control external
images; it can suddenly be removed or changed.
• 2. Relative URL - Links to an image that is hosted within the website. Here, the URL
does not include the domain name. If the URL begins without a slash, it will be
relative to the current page. Example: src="img_girl.jpg". If the URL begins with a
slash, it will be relative to the domain. Example: src="/images/img_girl.jpg".
o The width and height Attributes
• The <img> tag should also contain the width and height attributes, which specify the
width and height of the image (in pixels):
o The alt Attribute
• The required alt attribute for the <img> tag specifies an alternate text for an image,
if the image for some reason cannot be displayed. This can be due to a slow
connection, or an error in the src attribute, or if the user uses a screen reader.
Example 1:
Example 2:
• See what happens if we try to display an image that does not exist:
o The style Attribute
• The style attribute is used to add styles to an element, such as color, font, size, and
more.
o The title Attribute
• The title attribute defines some extra information about an element.
• The value of the title attribute will be displayed as a tooltip (Tooltip text is a short,
descriptive message that appears when a user hovers over or long presses an object
or control.) when you mouse over the element:
HTML Styles
• The HTML style attribute is used to add styles to an element, such as color, font, size,
and more.
o Use the style attribute for styling HTML elements.
o Use “background-color” for background color.
o Use “color” for text colors.
o Use “font-family” for text fonts.
o Use “font-size” for text sizes.
o Use “text-align” for text alignment.
• The HTML style attribute has the following syntax:
• Background Color
o The CSS background-color property defines the background color for an HTML
element.
o Example 1 :
o Example 2: Set background color for two different elements:
• Text Color
o The CSS color property defines the text color for an HTML element:
• Fonts
o The CSS font-family property defines the font to be used for an HTML element:
• Text Size
o The CSS font-size property defines the text size for an HTML element:
• Text Alignment
o The CSS text-align property defines the horizontal text alignment for an HTML
element:
HTML Text Formatting Elements
• HTML text formatting refers to the use of specific HTML tags to modify the
appearance and structure of text on a webpage. It allows you to style text in
different ways, such as making it bold, italic, underlined, highlighted, or struck-
through.
HTML Comments
• HTML Comment Tag
o You can add comments to your HTML source by using the following syntax:
o Note:Notice that there is an exclamation point (!) in the start tag, but not in the end
tag.
o Comments are not displayed by the browser, but they can help document your
HTML source code.
• Add Comments
o With comments you can place notifications and reminders in your HTML code:
HTML Colors
• HTML colors are specified with predefined color names, or with RGB, HEX, HSL,
RGBA, or HSLA values.
• Color Names
o In HTML, a color can be specified by using a color name:
• Background Color
o You can set the background color for HTML elements:
• Text Color
o You can set the color of text:
• Border Color
o You can set the color of borders:
• Color Values
o In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA
values, and HSLA values.
o The following three <div> elements have their background color set with RGB, HEX,
and HSL values:
• RGB Color Values
o In HTML, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
o Each parameter (red, green, and blue) defines the intensity of the color with a value
between 0 and 255.
o This means that there are 256 x 256 x 256 = 16777216 possible colors!
• HEX Color Values
o In HTML, a color can be specified using a hexadecimal value in the form:
#rrggbb
o Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff
(same as decimal 0-255).
• HSL Color Values
o In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the
form:
hsl(hue, saturation, lightness)
o Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is
blue.
HTML Lists
• HTML lists allow web developers to group a set of related items in lists.
• Unordered HTML List
o An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
o The list items will be marked with bullets (small black circles) by default:
• Ordered HTML List
o An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
o The list items will be marked with numbers by default:
• HTML Description Lists
o HTML also supports description lists.
o A description list is a list of terms, with a description of each term.
o The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term:
• HTML List Tags
HTML Tables
• HTML tables allow web developers to arrange data into rows and columns.
• HTML Table Tags :
HTML Tags Descriptions
Defines the structure for organizing data in rows and columns
<table>
within a web page.
Represents a row within an HTML table, containing individual
<tr>
cells.
<th> Shows a table header cell that typically holds titles or headings.
<td> Represents a standard data cell, holding content or data.
<caption> Provides a title or description for the entire table.
Defines the header section of a table, often containing column
<thead>
labels.
Represents the main content area of a table, separating it from
<tbody>
the header or footer.
Specifies the footer section of a table, typically holding summaries
<tfoot>
or totals.
Defines attributes for table columns that can be applied to
<col>
multiple columns at once.
Groups together a set of columns in a table to which you can
<colgroup>
apply formatting or properties collectively.
Example 1:
In this example:
• <table>: This tag starts the table. Everything between the opening <table> and
closing </table> tags makes up the table.
• <tr>: Stands for “table row”. Each <tr> tag defines a row in the table.
• <th>: Stands for “table header”.It’s used for the headers of the columns. In this case,
“Firstname“, “Lastname“, and “Age” are headers. Text in <th> tags is usually bold
and centered by default.
• <td>: Stands for “table data”. This tag is used for actual data cells under each
column. For instance, “Priya” is the data under the “Firstname” header, “Sharma”
under the “Lastname“, and “24” under the “Age“.
• The first <tr> has three <th> elements, setting up the column titles.
• The subsequent <tr> tags each contain three <td> elements, representing the data
for each person listed in the table.
Example2:
HTML Table Borders
• HTML tables can have borders of different styles and shapes.
• How To Add a Border:To add a border, use the CSS border property on table, th,
and td elements:
• Example 1:
• Example 2:
• Collapsed Table Borders
• To avoid having double borders like in the example above, set the CSS border-
collapse property to collapse. This will make the borders collapse into a single
border:
HTML Forms
• An HTML form is used to collect user input. The user input is most often sent to a
server for processing.
• 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.
• The HTML <form> element is used to create HTML forms.
• The Syntax is :
• Example 1:HTML <input> element
• Example2:TextField Control
• Example 3: HTML Form
• Example4:HTML Form Elements
• The <input> Element
o The HTML <input> element is the most used form element.
o An <input> element can be displayed in many ways, depending on
the type attribute.
o The <form> element is a container for different types of input elements,
such as: text fields, checkboxes, radio buttons, submit buttons, etc.
o Here are some examples:
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input Displays a checkbox (for selecting zero or more of many choices)
type="checkbox">
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
• The <label> Element
o The <label> tag defines a label for many form elements.
o The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user focuses on the input
element.
o The <label> element also helps users who have difficulty clicking on very
small regions (such as radio buttons or checkboxes) - because when the
user clicks the text within the <label> element, it toggles the radio
button/checkbox.
o The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.
• The <br> Element
o The <br> tag in HTML inserts line breaks in a text. It stands for "Break".
This tag is particularly useful when you want to create a new line within a
paragraph or other element without starting a new paragraph.
Introduction to HTML5 Part - II
• we will discuss the functionality of the newer form input types provided by HTML5.
Sometimes, while filling the registration form or any online form, it would require to
follow the proper format to fill the particular data. Now it is easy to use the webform
to fill up the common data like date, email, url etc. There are almost 13 new input
types introduced in HTML5 form. We will see all the input types & understand them
one by one.
• Input Type attributes:
1. color: This input type allows the user to select a color from a color picker.
2. date: This input type allows the user to select a date from a drop-down calendar.
3. time: This input type allows the user to enter a time.
4. datetime: This input type allows the user to select date and time along with
timezone.
5. datetime-local: This input type allows the user to select both local date and time.
6. week: This input type allows the user to select week and year from the drop-
down calendar.
7. email: This input type allows the user to enter an e-mail address.
8. month: This input type allows the user to select a month and year from a drop-
down calendar.
9. number: This input type allows the user to enter a numerical value.
10. range: This input type allows the user to enter a numerical value within
a specified range.
11. search: This input type allows the user to enter a search string within the input
field.
12. tel: This input type allows the user to enter a telephone number.
13. url: This input type allows the user to enter the URL.
(OR)
Input Type Description
<input type=”text”> Single-line text input
<input type=”password”> Masked text input for passwords
<input type=”checkbox”> Toggle for selecting multiple options
<input type=”radio”> Single selection from multiple options
<input type=”submit”> Button to submit form data
<input type=”button”> General-purpose button
<input type=”file”> Input for uploading files
<input type=”number”> Input for numerical values
<input type=”date”> Input for selecting dates
<input type=”email”> Input for email addresses
<input type=”color”> Input for selecting colors
<input type=”range”> Slider for selecting a numeric value within a range
<input type=”hidden”> Hidden input for form data
<input type=”image”> Input using an image for form submission
• The Syntax is:
HTML Frames
HTML Frames allow you to divide the browser window into multiple sections (frames),
where each frame can load a separate HTML document. This feature was introduced in early
versions of HTML to create layouts like menus, headers, and content areas without needing
multiple copies of the same content.
Key Tags Used in Frames
1. <frameset>
o Replaces the <body> tag when using frames.
o Defines how to split the screen (rows or columns).
o Attributes:
▪ rows – divides horizontally
▪ cols – divides vertically
2. <frame>
o Defines each individual frame inside the <frameset>.
o Loads a specific HTML page into the frame.
o Attributes:
▪ src – file to load
▪ name – gives the frame a name for targeting
▪ scrolling, noresize, frameborder – control frame appearance
3. <noframes>
o Provides alternative content for browsers that do not support frames.
• Frames in HTML allow you to divide a browser window into multiple sections, where
each section can load a different HTML document. This technique was once popular
for creating complex layouts, but it is now considered outdated due to several
limitations and accessibility issues.
• What are Frames in HTML?
• Frames in HTML divide the browser window into multiple sections, each capable of
displaying a separate HTML document. These sections are defined using the
<frameset> tag instead of the standard <body> tag
• The main parts of a frameset include:
• Horizontal frames: Defined using the rows attribute.
• Vertical frames: Defined using the cols attribute.
• Frames allow multiple HTML files to be displayed in different sections of a single
browser window.
• Let us see how we can create a frame using HTML.
• How to Create Frames in HTML
• Let’s go through the process of creating frames using HTML.
• Creating Vertical Columns
• Creating Horizontal Rows
• Mixing Columns and Rows
Meta Elements
Definition and Usage
• The <meta> tag defines metadata about an HTML document. Metadata is data
(information) about data.
• <meta> tags always go inside the <head> element, and are typically used to specify
character set, page description, keywords, author of the document, and viewport
settings.
• Metadata will not be displayed on the page, but is machine parsable.
• Metadata is used by browsers (how to display content or reload page), search engines
(keywords), and other web services.
• There is a method to let web designers take control over the viewport (the user's
visible area of a web page), through the <meta> tag (See "Setting The Viewport"
example below).
Attributes
Attribute Value Description
charset character_set Specifies the character encoding for the HTML
document
content text Specifies the value associated with the http-
equiv or name attribute
http-equiv content-security-policy Provides an HTTP header for the
content-type information/value of the content attribute
default-style
refresh
name application-name Specifies a name for the metadata
author
description
generator
keywords
viewport
EXAMPLE:
OUTPUT
More Examples:
