HTML 5
Q.1) What is HTML?
HTML (Hyper Text Markup Language) is widely used language on the
World Wide Web to create web pages. Kits is based on Standard Generalized
markup Language (SGML).
Q.2) Define Hyper Text.
Hyper Text means the text that contains a link within it to jump to another
section of the page or to a new page when clicked.
Q.3) Define Markup Language.
A markup language is a programming language that is used to make text
more interactive and dynamic. Images, tables, lists, links etc. are displayed
using the text-based instructions.
1) Basic Structure of HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset= “UTF-8”>
<title></title>
</head>
<body>
</body>
</html>
Elements in Basic Structure
i. !DOCTYPE:
Since web browsers are executed with special-purpose HTML parsers, rather
than general-purpose DTD-based parsers; they don’t use DTPs and will never
access them even if a URL is provided.
ii. html:
HTML is composed of a tree of HTML tags, such as text tags. Each tag can
have HTML attributes specified. Tags can also have content, including other
tags and text.
iii. head:
HTML metadata(data about data) is data about the HTML document. The
<head> element is a container for metadata and is placed between the <html>
tag and the <body> tag. Metadata typically define the document title, character
set, styles, links, scripts, and other meta information.
iv. title:
Most HTML documents must have a <title> element. However, the <title>
element can be omitted in cases where a higher-level protocol provides title
information. The title is usually displayed at the top of the browser’s title bar.
v. body:
The HTML <body> tag defines the section of the HTML document or the main
content of the HTML document that will be directly visible on your web pages.
2) HTML TAGS
HTML Tags are used to create HTML documents and render their properties.
Each HTML tags have different properties, HTML tag contains three main
parts: opening tag, content and closing tag. But some HTML tags are unclosed
tags.
3) What is Semantic HTML?
Semantic HTML is the use of HTML markup tags to describe the meaning of
each element in the document through proper choice of markup tags. Use of
semantic HTML makes content readable to both, human and computer.
Semantic clarity is said to be obtrained when semantic tags like h1, p, header,
footer, nav, section, article, ul, etc. are well organized to describe the contents
of the webpage.
4) Why is Semantic markup important?
a) Semantic HTML is most useful to the browsers to give better display on
different devices.
b) Semantic HTML is a better method for developers to distinguish different
types of data; and to better able to tie different sources of information
together into new web services.
c) As the web can be read equally well by both humans and computer, it
becomes more accessible since computers are better able to analyses its
contexts, index it and deliver it.
d) It helps the web users like visually impaired people, navigation web users
to ascertain proper meaning of the contents.
e) Webpage ranking to top on search results get improved thereby bringing
the web users closer to your web page.
Semantic Elements
A. Document Structure Tags
a) Div
Div Tag is a container that was mostly used with ‘id’ and ‘class’
attributes. However, with the release of HTML%, we have several
new tags to work with that provide semantic meaning in addition
to the grouping attributes offered by the div tag.
b) Header
Header is a container to be used for a web page header which
typically contains the site logo, heading, elements, and site
navigation.
c) Footer
Footer is a container to be used for a web page footer which
typically contains authorship, contact, and copyright information
in addition to navigational links and a link back to the top of the
web page.
d) Main
Main is a high-level container to be used to contain all of the
content that is unique to a single web page and not repeated
across multiple web pages.
e) Aside
Use to identify content that related to the main content on the
page but not part of the primary flow of the document.
f) Nav
Nav is the container to contain blocks of site navigation links. This
element is typically placed in the page header and footer, and may
also be used in an aside (sidebar) element as well.
g) Section
The section element is used to mark off sections of a document,
such as chapters or major sections of a long form posts.
h) Article
The <article> element is a good choice to contain entire blog
posts, news articles, and similar content. It identify a block of
content suitable for reuse and syndication.
Other tags
<hr>
B. Textual Meaning Tags
a) Headings
<h1> is the highest level, or most important heading in a document or
in its sections. It is followed by heading levels <h2> through <h6> in
order of descending importance.
b) Paragraphs
The HTML <p> element represents paragraph of text. Headings are
often followed by supporting paragraphs.
c) Strong
Text in any element of the page deserving prominent attention can be
marked as strong element. It assigns importance to the contained
word or phrase. It also makes the text bold.
d) Emphasis(em)
Em signifies emphasized contents. It is displayed in Italic Style. A
software reading the text would pronounce the words with a stressed
emphasis.
Other Tags
<abbr>, <acronym>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>,
<del>. <dfn>, <kbd>, <pre>, <samp>, <var>, and <br>.
Example of Semantic markup of element
<!DOCTYPE html>
<html>
<head>
<title>Paryavaran Activities</title>
<head>
<body>
C. Multimedia Type Tags
Multimedia can be almost anything you can hear or see. Examples are images,
music, sound, videos, records, films, animations, and more.
Web pages often contain multimedia elements of different types and formats.
Audio, video, and animation have been handled differently by the major
browsers.
a) Audio
Used to add one or more sources of audio content to a document and to
allow the browser to pick the best option based on the visitor’s device
and browser.
The HTML5 <audio> element specifies a standard way to embed an
audio in a web page. It supports audios of mp3, wav and ogg audio
format. Other formats may require plugins to play audio.
b) Video
Used to add one or more sources of video content to a document and to
allow the browser to pick the best option based on the visitor’s device
and browser.
The HTML5 <video> element specifies a standard way to embed a video
in a web page. It supports videos of mp4, webM and ogg video format.
Other formats may require plugins to play video.
c) Picture
Image (img)
Images are very important to beautify as well as to depict many
complex concepts in simple way on your web page. <img> tag is
used to insert image in the document. The <img> tag is an empty
tah and require ‘src’ and ‘alt’ attribute.
HTML5 supports formats like png,jpeg,gif etc.
<img src= “image/image23.jpg” alt= “baby-girl image”/>
<picture> element
The picture element is used to allow a web browser to pick the
best image from the available source options based on the results
of a media query. It works if atleast one <img> element is placed
inside the <picture> container. <img> element should be placed as
last element as <source> elements won’t work if placed after
<img>.
OTHER TAGS
<area>, <map>, <param> and <object>
Examples using multimedia elements:
<!DOCTYPE html>
<html>
<head>
<title>Paryavaran Activities</title>
</head>
<body>
<audio controls= “controls” autoplay= “autoplay”>
<source src=”horse.ogg” type= “audio/ogg”/>
<source src=”horse.mp3” type= “audio/mpeg”/>
Your browser does not support the audio element.
</audio>
<video width= “320” height= “240” controls= “controls”>
<source src=”movie.mp4” type= “video,mp4”/>
<source src=”movie.ogg” type= “video.ogg”/>
Your browser does not support the video tag.
</video>
<picture>
<picture>
<source media= “(min-width:1500px)” srcset= “images/a.png”/>
<source media= “(min-width:1200px)” srcset= “images/b.png”/>
<img src= “images/c.png” alt= “a cute kitte”/>
</body>
</html>
D. Correlation Tags
Several HTML elements are used to signal a correlation between multiple
elements. For example, the use of an ordered list (ol) tells the browser that the
items on the list are related to each other and need to appear in a specific
order.
Q.4) Lists
HTML uses following two kinds of lists:
1. Ordered Lists
2. Unordered Lists
1. Ordered Lists
Ordered list element display list of items that start with a number or
letter and continue in sequence.
Following options are available to start with sequence:
Arabic numbers (1,2,3,…)
Upper-case roman numbers (I,II,III,...)
Lower-case roman numbers (I,ii,iii,…)
Upper-case letters (A,B,C,…)
Lower-case letters (a,b,c,…)
To define the type of ordered list required, ‘type’ attribute is placed in
<ol> opening tag. Order sequence can be started at by using the ‘start’
attribute.
2. Unordered Lists
Unordered list element display the sequence of list items that start with
a bullet like a dot, circle or a square. Following options are available to
display sequence:
Disc ( )
Circle (o)
Square ( )
To define the type of list required, ‘type’ attribute is placed in <ul>
opening tag.
Q.5) Table
Table is used to arrange data like text, images, links etc. into columns and
rows of cells.
Data is placed in the cells created using opening and closing tag of
data cell <td>.
Data cells are placed in opening and closing tag of<tr> element to
form a row of cells.
Rows are placed in opening and closing tag of <table> element to
form a table of rows and columns.
Data cells with <td> tag can be replaced with <th> tag in the first
row if the table contains column headers.
By default table borders are set to 0, i.e. borders are not shown to
the table.
To set table border ‘border’ attribute is used.
EXAMPLE
<body>
<table border=”1”>
<tr> <th>State</th> <th>Language</th> </tr>
<tr> <th>Goa</th> <th>Konkani</th> </tr>
<tr> <th>Karnataka</th> <th>Kannada</th> </tr>
<tr> <th>Maharashtra</th> <th>Marathi</th> </tr>
</table>
</body>
Q.6) Figure
The figure element is used to group together a piece of content, such as
an image, chart, graph, or text, and a caption marked off by figcaption tags. By
nesting the caption and the content between figure tags a relationship
between the nested elements is identified.
Q.7) Address
This attribute is used to associate contact information with the parent
element that contains the address element. For Example, when added to a
article, the address element provides contact information for the article author,
and when added to a web page footer the address identifies contact
information for the web page owner.
Q.8) Anchor – <A>
The HTML anchor tag defines a hyperlink that links one page to another page.
The “herf” attribute is the most important attribute of the HTML a tag.
Appearance of HTML anchor tag.
An unvisited link is displayed underlined and blue.
A visited link displayed underlined and purple.
An active link is underlined and red.
OTHER TAGS
Link tag - <base>
List tags - <dl>, <dt>, <dd>,
Table tags – tbody, thead, tfoot, col, colgroup and caption
Form tags – form, input, textarea, select, option, optgroup, button, label,
fieldset and legend.
Q.9) CATEGORIES OF ELEMENTS
1. Container tags and Empty tags
Container Tags
Container tags come in pair. Beginning tag of the container tag is
called as opening tag and other tag in the pair with forward skash
character ‘/ ‘ is called as closing tag. The opening tag instructs the
browser to execute code on the text that follows it. The closing tag
is used to mark the end of the code execution. Tag <p></p>,
<h1></h1>, <div></div> are examples of container tags.
Example: <p>My first page</p>
Empty tag
Empty tags do n ot come in pair as they don’t have anything to
envelop. The examples of empty tags are <hr>, <br>, etc.
\
2. Block-level elements and Inline elements
Block-Level elements
Block-level element always starts on a new line and takes up the
full width available. It stretches out to the left and right as far as it
can by taking up the full width available. <p> element is the best
example of block-level element.
Examples of block-level elements:
<h1>
<p>
<div>
Inline Elements
Elements produced using inline markup tags does not start on a
new line unless it find room for itself to disdplay in the line. The
anchor (a) element is the most common inline element, since you
use them for links. An inline element can wrap some text inside a
paragraph without disrupting the flow of that paragraph.
Examples of Inline elements:
<span>
<a>
<img>
Q.10) Attributes of Elements
An attribute is used to define the characteristics of an element and
is placed inside the element’s opening tag. They are made up of two
parts: a name and a value.
Look at the below example:
<table border=1>
Table tag uses ‘border’ attribute to define its borders. Value of the
attribute is followed by ‘=’ sign. Value ‘1’ sets the thickness of border to 1
pixel.
Element specific attributes
Many HTML tags have unique set of their own attributes. For example,
<img> tag uses ‘src’. ‘alt’, ‘width’ etc.; <ol> tag uses ‘type’, ‘start’ etc.
<ol type= “1” start=1101>
<img src= “../images/kite.jpg” alt= “Flying kite Image 200px
%280px width”/>
Global Attributes/Core attributes
Global attributes can be used with almost every HTML Tag in
existence. The four core attributes that can be used on the
majority of HTML elements (although not all) are:
id
title
class
style
a) The id attributes:
The id attributes is used to uniquely identify any element
within a page (or style sheet). There are two primary reasons
that you might want to use an id attribute on an element:
Id an element carries an id attribute as a unique
identifier, it is possible to identify just that element
and its content.
If you have two elements of the same name within a
Web page (or style sheet), you can use the id
attribute to distinquish between elements that have
the same name.
b) The title attribute:
The title attribute gives a suggested title for the element. It is
often displayed as a tooltip or while the element is loading. The
behavior of this attribute will depend upon the element that
carriers it.
c) The style attribute
The style attribute akllows you to specify CSS rules within the
element. For example:
<p style= “font-family:arial; color: #FF0000:”>Some text…,</p>
d) The class attributes:
The class attribute is used to associate an element with a style
sheet, and specidies the class of element.
The value of the attribute may be a space-separated list of class
names. For example:
Class= “className21 className2 className3”
Internationalization Attributes
There are three internationalization attributes, which are available
to most (although not all) elements.
dir
lang
xml:lang
a) The dir attribute:
The dir attribute is used to specify the direction in which the
text should flow. It can take one of two values, as you can see
in the table that follows:
ltr – left to right (the default value)
rtl – Right to left(for languages such as Hebrew or Arabic
that are read right to left)
For Example:
<html dir=rtl>
b) The lang Attributes:
The lang attribute allows you to indicate the main language
used in a document, but this attribute was kept in HTML only
for backwards compatibility with earlier versions of HTML. This
attribute has been replaced by the xml:lang attribute in new
XHTML document.
c) The xml:lang Attribute:
The xml:lang attribute is the XHTML replacement for the lang
attribute. The value of the XML:lang attribute should be an IS)-
639 country code. E.g. in, us, uk, etc.
