HTML5
Syntax of HTML5
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title></title>
</head>
<body>
</body>
</html>
Description of HTML code:
• <!DOCTYPE html>: This tag is used to tells
the HTML version. This currently tells that
the version is HTML 5.0
• <html> </html> : <html> is a root element
of html.
• In <html > tag we use “lang” attributes to
define languages of html page such as <html
lang=”en”> here en represents English
language.
• <head>: Head tag contains metadata, title,
page CSS etc.,
• Data stored in the <head>tag is not
displayed to the user.
• <meta> [Link] store data about website,
organization, creator/owner/
[Link] responsive website via
attributes
3. To tell compatibility of html
with browser
• <title> to store website name or content to
be displayed.
• <body>All the content that you see
rendered in the browser is contained within
this element.
Following tags and elements
used in the body.
1. <h1> ,<h2> ,<h3> to <h6>
2. <p>
3. <div> and <span>
4. <b>, <i> and<u>
5. <li>,<ul>and<ol>,<dl>
6. <img>,<audio>,<video>,<iframe>
7. <table>,<th>,<thead>,<tbody>,<tr>,<td>
8. <form>
9. <label> and <input> others……….
HTML Colors
• HTML colors are specified with predefined color
names, or with RGB, HEX, HSL, RGBA, or
HSLA values.
• An RGB color value represents Red, Green, and
Blue light sources.
• rgb(red, green, blue)
• To display black, set all color parameters to 0, like
this: rgb(0, 0, 0).
• To display white, set all color parameters to 255,
like this: rgb(255, 255, 255).
RGBA Color Values
• RGBA color values are an extension of
RGB color values with an Alpha channel -
which specifies the opacity for a color.
• An RGBA color value is specified with:
• rgba(red, green, blue, alpha)
• The alpha parameter is a number between
0.0 (fully transparent) and 1.0 (not
transparent at all):
• rgba(255, 99, 71, 0.5)
HTML HEX Colors
• A hexadecimal color is specified with:
#RRGGBB, where the RR (red), GG
(green) and BB (blue)
• To display black, set all color parameters
to 00, like this: #000000.
• To display white, set all color parameters
to ff, like this: #ffffff.
HSL Colors
• HSL stands for hue, saturation, and
lightness.
• Hue is a degree on the color wheel from 0
to 360. 0 is red, 120 is green, and 240 is
blue.
• Saturation is a percentage value. 0% means
a shade of gray, and 100% is the full color.
• Lightness is also a percentage value. 0% is
black, and 100% is white.
• hsl(0, 100%, 50%)
• Saturation can be described as the intensity
of a color.
• The lightness of a color can be described
as how much light you want to give the
color, where 0% means no light (black),
50% means 50% light (neither dark nor
light), and 100% means full lightness
(white).
HSLA colors
• HSLA color values are an extension of HSL
color values, with an Alpha channel - which
specifies the opacity for a color.
• An HSLA color value is specified with:
• hsla(hue, saturation, lightness, alpha)
• The alpha parameter is a number between 0.0
(fully transparent) and 1.0 (not transparent at
all):
• Experiment by mixing the HSLA values
below:
• hsla(0, 100%, 50%, 0.5)
HTML Heading
HTML element pixel height
<h1></h1> 32px
<h2></h2> 24px
<h3></h3> 18.72px
<h4></h4> 16px
<h5></h5> 13.28px
<h6></h6> 10.72px
Code to Run
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>Heading in HTML</title>
</head>
<body>
<h1>This is Heading1</h1>
<h2>This is Heading2 </h2>
<h3>This is Heading3 </h3>
<h4>This is Heading4 </h4>
<h5>This is Heading5 </h5>
<h6>This is Heading6 </h6>
</body>
Output
Paragraph tag
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>Paragraph in HTML</title>
</head>
<body>
<p>Paragraph Content</p>
</body>
</html>
Output
<br> and <hr> tags (Standalone
Element)
Horizontal Rule Tag<hr>
• An empty tag <HR> basically used to draw lines and
horizontal rules. It can be used to separate two sections of
text.
Example:
<body>
Your horizontal rule goes here. <hr>
The rest of the text goes here.
</body>
• Output:
Your horizontal rule goes here.
The rest of the text goes her
Break<br> tag
• The <br> tag inserts a single line break.
• The <br> tag is an empty tag which means that it
has no end tag.
Code to Run
<!DOCTYPE html>
<html>
<body>
<h1>A Poem</h1>
<p>Coimbatore often termed as 'Manchester of
South India',<br> Coimbatore, the second-largest
city in Tamil Nadu,<br> photographically situated
on the banks of River Noyyal.</p>
</body>
</html>
Output:
Break
Coimbatore often termed as 'Manchester of South
India',
Coimbatore, the second-largest city in Tamil Nadu,
photographically situated on the banks of River
Noyyal.
Absolute path
• An absolute path refers to the complete
details needed to locate a file or folder,
starting from the root element and ending
with the other subdirectories.
• Absolute paths are used in websites and
operating systems for locating files and
folders.
Relative Path
• Relative Path is the hierarchical path that
locates a file or folder on a file system
starting from the current directory.
• The relative path is different from the
absolute path, which locates the file or
folder starting from the root of the file
system.
Path differences in a web address
absolute path
Example:
[Link]
relative path
Example:
[Link]
• The difference between an absolute and a
relative path is that an absolute path
specifies the location from the root
directory whereas a relative path is related
to the current directory.
Image tag
• The <img> tag is used to add an image in
an HTML page.
• The <img> tag has attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the
image, if the image for some reason
cannot be displayed.
border - specifies the thickness of the
border.
height and width.
Code to Run
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>Heading in HTML</title>
</head>
<body>
<img src=“[Link]" alt=“flower" width="500"
height="500">
</body>
</html>
Output
Button Tag
• The <button> tag is used to create
clickable buttons on the web page.
Syntax:
<button>submit</button>
Text Formatting
• HTML Formatting is a method of text
formatting for a better appearance and
look.
• HTML allows us to format text without
using the CSS. HTML includes a lot of
formatting tags.
• These tags are used to make bold,
underline, and italic text. There are nearly
14 options available in HTML and
XHTML for the way text appears.
• For HTML the tags are divided into two
categories:
• Physical tag
• Logical tag
• Physical tag: These tags are used to give
the text a visual appearance.
• Logical tag: Logical or semantic tags are
used to append the value.
Element name Description
<b> It is a physical tag used to bold the text between the tags.
<strong> It is a logical tag that tells the browser that text is important.
<i> It is a physical tag used to make italic text.
<em> It is a logical tag used to display the content in italics.
<mark> This tag will be used to highlight the text.
This tag is used to underline the text that has been written between
<u>
them.
The <pre> tag is used to define preformatted text. The browsers
<pre>
render the enclosed text with white spaces and line breaks.
<sup> It displays the contents just slightly above the usual line.
<sub> It displays the contents just slightly below the usual line.
<del> It tag is used to display the deleted contents.
Using this tag will draw a strikethrough on a text line. (Don't support
<strike>
HTML5)
<ins> This tag shows the added contents.
<big> This tag is used with one conventional unit to increase font size.
This tag is used to reduce font size by one unit from the base font
<small>
size.
Example for text formatting
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset=“UTF-8”>
</head>
<body>
<p>Welcome to HTML Class</p>
<p><b>Welcome to HTML Class</b></p>
<p><strong>This class is important!</strong></p>
</body>
</html>
Output
Welcome to HTML Class
Welcome to HTML Class
This class is important!
Pharse Tag
• The HTML phrase tags are special purpose
tags, which defines the structural meaning
of a block of text or semantics of text.
Code to Run
<html>
<head>
<title>Phrase Tags</title>
</head>
<body>
<h1>Phrase Tags</h1>
<h2>
<address>No.26-west masi street,coimbatore-641104</address><br>
<q>High Performance,Delivered</q><br><br>
Rhyme name is rain rain go away and this is a nursery children rhymingrl song<br>
<blockquote>Richards</blockquote><br>
<abbr title="File Transfer Protocol">FTP</abbr><br><br>
<em>I am a Good Girl</em><br><br>
<strong>I like to very much coimbatore</strong><br><br>
<bdo dir="rtl">This is text</bdo><br>
</h2>
</body>
</html>
Output
Phrase Tags
No.26-west masi street,coimbatore-641104
“High Performance,Delivered”
Rhyme name is rain rain go away and this is a nursery children rhymingrl
song
Richards
FTP
I am a Good Girl
I like to very much coimbatore
Txet si sihT
Marquee Tag
• The <marquee> tag is a container tag of
HTML is implemented for creating
scrollable text or images within a web page
from either left, right ,up and down.
• This tag contains three attributes:
• direction
• behavior
• scrollamount
• direction-provides the direction or way in
which your marquee will allow you to
scroll. The value of this attribute can be:
left, right, up or down.
• behavior -provides the scrolling type in a
marquee. That scrolling can be like sliding,
scrolling or alternate.
• scrollamount attribute in HTML is used to
set the amount of scrolling at each interval
in pixels.
Code to Run
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
</head>
<body>
<marquee direction="up" scrollamount="1">
<h1>HTML</h1>
</marquee>
<marquee direction="up" scrollamount="1">
<p>hypertext Markup Language</p>
</marquee>
</body>
</html>
Font Tag
• The <font> tag defines the font
characteristics.
• Size, color and typeface are defined by
the size, color and face attributes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<p>
<font size="5" color="red" font face=“arial”>
WELCOME</font>
</p>
</body>
</html>
Output:
WELCOME
Preformatted Text Tag: <PRE>
• <PRE> tag can be used, where it requires
total control over spacing and line
breaks such as typing a poem .
• Browser preserves your space and line
break in the text written inside the tag.
Code to Run
<html>
<head>
<title>
Use of Paragraph, Line break and preformatted text Tag
</title>
</head>
<body>
HTML Tutorial
<P>HTML stands for Hypertext Markup Language
It is used for creating web page. It is very simple
and easy to learn.
</P>
<p>
HTML stands for Hypertext Markup Language.<br>
It is used for creating web page. It is very simple<br>
and easy to learn.<br>
</p>
<pre>
HTML stands for Hypertext Markup Language
It is used for creating web page. It is very simple
and easy to learn.
</pre>
</body>
</html>
Output:
• HTML Tutorial
HTML stands for Hypertext Markup Language. It is used for creating
web page. It is very simple and easy to learn.
HTML stands for Hypertext Markup Language.
It is used for creating web page. It is very simple
and easy to learn.
HTML stands for Hypertext Markup Language.
It is used for creating web page. It is very simple
and easy to learn.
Entities in HTML
• An HTML entity is a piece of text ("string") that
begins with an ampersand (&) and ends with a
semicolon (;).
• Entities are frequently used to display reserved
characters and invisible characters (like non-
breaking spaces).
• You can also use them in place of other characters
that are difficult to type with a standard keyboard.
• A character entity looks like this:
• &entity_name;
• &#entity_number;
• Entities can be classified into
• Character Entity
• Symbol Entity
• Emojis
Advantage of using an entity name: An
entity name is easy to
remember.
Disadvantage of using an entity
name: Browsers may not support all entity
names, but the support for entity numbers is
good.
Some Character entities listed here:
Result Description Entity Name Entity Number
non-breaking space  
< less than < <
> greater than > >
& ampersand & &
" double quotation " "
mark
' single quotation ' '
mark (apostrophe)
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
© copyright © ©
® registered ® ®
trademark
Symbol Entities
Char Number Entity Description
∀ ∀ ∀ FOR ALL
;
∂ ∂ ∂ PARTIAL DIFFERENTIAL
;
∃ ∃ ∃ THERE EXISTS
;
∅ ∅ ∅ EMPTY SETS
;
∇ ∇ ∇ NABLA
∈ ∈ ∈ ELEMENT OF
;
∉ ∉ ∉ NOT AN ELEMENT OF
;
∋ ∋ ∋ CONTAINS AS MEMBER
;
∏ ∏ ∏ N-ARY PRODUCT
;
∑ ∑ ∑ N-ARY SUMMATION
;
Emojis
Emoji Value
🗻 🗻
🗼 🗼
🗽 🗽
🗾 🗾
🗿 🗿
😀 😀
😁 😁
😂 😂
😃 😃
😄 😄
😅 😅
Code to Run
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Emojis</h1>
<p style="font-size:50px">
WELCOME 😀 😄 😍
</p>
</body>
</html>
Output:
Emojis
WELCOME 😀 😄 😍
Comment tag
• HTML comments don't get displayed in the
browser.
• This means that any comments you add to your
HTML source code will not be shown when the
document gets rendered in a web browser.
• Comments in HTML start with <!-- and end
with -->.
• Don't forget the exclamation mark at the start of
the tag! But you don't need to add it at the end.
Code to Run
<!DOCTYPE html>
<html>
<body>
<!-- This is for paragraph -->
<p>This is a paragraph.</p>
</body>
</html>
Output:
This is a paragraph.
Inline and block Elements
Block-level Elements
• A block-level element always starts on a new line, and the
browsers automatically add some space (a margin) before
and after the element.
• A block-level element always takes up the full width
available.
Two commonly used block elements are: <p> and <div>.
• The <p> element defines a paragraph in an HTML
document.
• The <div> element defines a division or a section in an
HTML document.
Example:
<address>,<article>,<aside>,<blockquote>,<dd>,<div>
<dl>,<dt>,<figcaption>,<figure>,<footer>,
<form>,<h1><h6>,<header>,<hr>,<li>,<main>,<nav>,
<ol>,<p>,<pre>,<section>,<table>,<tfoot>,<ul>,
<video>
Inline Elements
• An inline element does not start on a new
line.
• An inline element only takes up as much
width as necessary.
• Here are the inline elements in HTML:
• <a>,<abbr>,<b>,<big>,<br>,<button>,<cite
><code>,<em>,<i>,<img>,<input>
<label>,<q>,<script>,<select>,<small>,<span>
,<strong>,<sub>,<sup>,<textarea>,<time>
HTML Styles
• The HTML style attribute is used to add styles to an
element, such as color, font, size, and more.
<!DOCTYPE html>
<html>
<body>
<p>Greetings!</p>
<p style="color:red;">Welcome</p>
<p style="color:blue;">World</p>
<p style="font-size:50px;">Country</p>
</body>
</html>
Output
Greetings!
Welcome
World
Country
Div Tag
• The <div> tag defines a division or a
section in an HTML document.
• The <div> tag is used as a container for
HTML elements - which is then styled
with CSS or manipulated with JavaScript.
• The <div> tag is easily styled by using the
class or id attribute.
• Any sort of content can be put inside
the <div>tag.
Code to run
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 5px solid red;
background-color: yellow;
text-align: center;
margin:5px;
}
</style>
</head>
<body>
<h1>The Heading</h1>
<div class="container">
<h2>Something Special!</h2>
<p>Surprise is going to happen.</p>
</div>
<div class="container">
<h2>Something Special!</h2>
<p>Surprise is going to happen.</p>
</div>
</body>
</html>
Output