HTML5
Introduction
2
HTML?
HTML – Hyper Text Markup
Language
3
Introduction
HTML - Developed with the
intention of defining the layout
of files such as headings,
paragraphs, lists, and so on
To encourage the exchange of
scientific facts between
researchers
4
Why we need to
use?
To format net pages
MUST for students and working
professionals to operate in the
Web Development Domain
Need to understand HTML to
deliver the first rate results.
5
Benefits
Can create a Web site only
with html
Web Understanding
Interoperability
Search ability
High performance
Responsive
6
Basics in HTML5
Structure based language
Head and body tags
- Can include title and links of CSS
Comments and doctype
Tags, Elements and Attributes
7
Paired Tags
A tag is said to be a paired tag if the
text is placed between a tag and its
companion tag.
In paired tags, the first tag is
referred to as Opening Tag and the
second tag is referred to as Closing
Tag.
Example:
<p>Paragraph</p>
8
Unpaired Tags
An unpaired tag does not have
a companion tag. Unpaired tags
are also known as Singular
tags or Stand-Alone Tags.
Example:
<br>
<img src='[Link]' >
Structure of 9
HTML document
Basic structure:
10
Example
<!DOCTYPE html>
<html>
<head>
<title>First Program</title>
</head>
<body>
<h1>Hello World! </h1>
</body>
</html>
Output: Hello World!
11
Attributes
Tags have their own attributes
Attribute Value
The below table shows BODY
background URL tag attributes
bgcolor color
text color Example:
link color
vlink color <body bgcolor = “black”>
alink color
Obsolete in HTML5, use CSS instead
12
HR tag
Obsolete in HTML5, use CSS
13
Meta tag
Written in head tag
Mainly used for SEO
Example:
<meta charset = “utf-8”>
<meta name = “description” content
= “VIT university, Chennai”>
14
Heading tags (h1..h6)
Example : <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Heading Levels</title>
</head>
<body>
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<h3>Hello World!</h3>
<h4>Hello World!</h4>
<h5>Hello World!</h5>
<h6>Hello World!</h6>
</body>
</html>
Output: + HO
OR: RUOG
Hello World!
Hello World!
Hello World!
Hello World!
Hello World!
15
Text Formatting
tags
<b> - bold
<i> - italic
<u> - underline
<small> - to make a text in small
<big> - to make a text in big
<sub> - subscript
<sup> - superscript
<mark> - defines marked or highlighted text
<q>…</q> - quotation
<address>
16
<!DOCTYPE html>
Text Formatting - Example
<html>
<head>
<meta charset="utf-8">
<title>Text Formatting Example</title>
</head>
<body>
<b>Text</b>
<i>Text</i>
<u>Text</u>
<small>Text</small>
<big>Text</big>
<sub>Text</sub>
<sup>Text</sup>
</body>
</html>
Output : Text Text Text Text Text Text
Text
17
Font tag
Obsolete in HTML5, use CSS instead
Inserting Symbols 18
Result Description Entity Name
₹ rupees ₹
¢ cent ¢
£ pound £
¥ yen ¥
€ euro €
§ section §
© copyright ©
® registered
trademark
®
space non-breaking space
18
Break
19
<br> Inserts a single line
break
<wbr> (Word Break
Opportunity) defines a possible
line-break
20
acronym
Can I get this <acronym title="As
Soon As Possible">ASAP</acronym>?
21
Text Containers
<p>
<pre> defines preformatted text
22
Div tag
<html>
<head></head>
<body>
<div >
<a href="[Link]"
title="VIT Chennai"> VIT Chennai</a>
<a href="[Link]"
title="VIT Vellore">VIT Vellore</a>
</div>
</body>
</html>
23
Anchor
<a>
<a href = “[Link]”>Link Text</a>
<a href = “[Link]”>Home</a>
Link to a paragraph
<p name=“pname”>….</p>
<a href="#pname">A simple link</a>
mailto
<a href="[Link]
24
Image
<img>
<img src="D:\FALL 20-21\CSE3002
IWP\[Link]" alt="profile"
align="center">
Example: Ex4_CommonlyUsedTags.html
25
Marquee
<marquee width=“70%”
direction=“up” height=“50px“ loop=5
bgcolor=“blue”> Marquee Text
Content </marquee>
Direction can be: left, right, up or
down
Obsolete in HTML5, use CSS instead
26
Layout
27
Semantic Tags
<article> - article in the element
<header> - header for the section or article
<footer> - footer for the section or article
<section> - section in the document
<aside> - content aside from the page content
[Link]
28
Example:
<nav>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
29
Other Semantic Tags
<progress> - progress of a task
Progress in life goals (70%)
<progress min=0 max=100 value=70></progress>
<meter> - scalar measurement with in a known range
Life goals achieved (50%)
<meter min=0 max=100 value=50></meter>
30
Semantic Tags
[Link]
<dialog> defines a dialog box or window
<figure> - self contained content like diagram
<figcaption> defines the caption for a <figure>
[Link]
31
Semantic Tags
<details> defines additional details that people can view or hide (like a tooltip)
<summary> defines a visible heading for a <details> element
<details>
<summary>Summary:</summary>
<p>XYZ...</p>
</details>
32
Semantic Tags
<menu> defines a list/menu of commands.
<menuitem> defines a command/menu item that the user can select from a
popup menu. Work only in firefox.
[Link]
<bdi> (Bi-Directional Isolation) defines a section of text that might be
formatted in a different direction from other text (for instance, a quote in
Hebrew or Arabic in an otherwise-English article)
<time> defines a date/time
33
Thank you
