1|Page
Unit-2
HTML, XHTML & HTML5
2.1 Introduction
HTML:
HTML, otherwise known as Hyper Text Markup Language, is the language used to
create Web pages. Using HTML, we can create a Web page with text, graphics,
sound, and video.
XHTML:
XHTML stands for EXtensible Hyper Text Markup Language. The XHTML was
developed by World Wide Web Consortium (W3C). It is almost identical to HTML
but stricter than HTML. XHTML is a family of XML languages. XHTML is introduced
to combine the strengths of HTML and XML. XHTML is HTML redesigned as XML.
It does not allow omission of any tags or use of attribute minimization. XHTML
requires that there be an end tag to every start tag and all nested tags must be
closed in the right order. For example, while <br> is valid in HTML, it would be
required to write <br /> in XHTML.
The Most Important Differences from HTML
<!DOCTYPE> is mandatory
The xmlns attribute in <html> is mandatory
<html>, <head>, <title>, and <body> are mandatory
Elements must always be properly nested
Elements must always be closed
Elements must always be in lowercase
Attribute names must always be in lowercase
Attribute values must always be quoted
Attribute minimization is forbidden
Jhalnath Chapagain | GOMENDRA MULTIPLE COLLEGE
2|Page
HTML 5
HTML5 is the newest version of HTML. It incorporates all features from earlier
versions of HTML, including the stricter XHTML. It adds a diverse set of new tools
for the web developer to use. It is still a work in progress. HTML5 is supported by
all modern browsers. HTML5 is more device friendly. It is easy for use. HTML5 can
help creating attractive websites with CSS, JavaScript, etc. The new standards were
specified for playing multimedia (animation, audio, video) directly in the browser
without having to install additional plug-ins.
<header> <footer> <progress>
<section> <header> <source>
<article> <mark> <video>
<audio> <nav>
<canvas> <datalist>
Sections in HTML
<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
Jhalnath Chapagain | GOMENDRA MULTIPLE COLLEGE
3|Page
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
Document Metadata
Metadata is data about data. It is information that describes some other
information in a meaningful way. The meta tag is used in an HTML document to
provide high level metadata about the web page: information that describes the
web page in a meaningful way that can be understood by web browsers.
An HTML document head element is used to provide information about a web
page to web browsers and search engines, and to link external resources to the
page. It does not contain content that is visible on the web page, but that doesn’t
mean that it is unimportant. Proper web page head structure is critical for search
engine optimization and website accessibility.
The META elements can be used to include name/value pairs describing
properties of the HTML document, such as author, expiry date, a list of keywords,
document author etc.
The <meta> tag is used to provide such additional information. This tag is an
empty element and so does not have a closing tag but it carries information
within its attributes.
<meta name="title" content="Gomendra Multiple college">
<meta name="description" content="Gomendra Multiple College is the pioneer IT and
management college of Eastern Nepal providing quality services.">
<meta name="keywords" content="IT College, Gomendra Multiple College, Birtamode IT
college, BBA, BCA">
<meta http-equiv="Content-Type" content="text/html, charset=utf-8">
<meta name="language" content="English">
<meta name="author" content=” put Name of author-here">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Jhalnath Chapagain | GOMENDRA MULTIPLE COLLEGE
4|Page
Grouping Content
Up to this point, all of the HTML elements we've added are contained within the
opening and closing <body> tags in our HTML document. In this section, we'll
learn how to group related elements into containers.
Grouping our HTML content in containers makes it easier for us to target our
elements with class and id selectors. This, in turn, makes it easier for us to
position and style HTML via CSS.
There are a number of additional tags that allow us to group related HTML
content together. Some examples include <header>, <section>, <article> and
<footer>. All of these HTML elements (including <div>) have no effect on the
HTML content itself, but instead group and contain other elements.
<div> (content division tag)
The <div> tag is used to group other HTML content together. The <div> element
doesn't add or change the content of our HTML. The <div> element, therefore, is
mainly used to group content for targeting with CSS.
<div class=”modal-container”>
<h1>Modal Title</h1>
<p>Text goes here</p>
</div>
<section>
The <section> element is slightly more specific than a <div>. It is applied to a
generic section of content that can be grouped together in a semantically
meaningful way.
A general thumb rule is that the section element is appropriate only if the
element’s contents are listed explicitly in the document’s outline.
Jhalnath Chapagain | GOMENDRA MULTIPLE COLLEGE
5|Page
Because the contents of a <section> are meaningful when grouped together, they
should have a “theme”. A <section>’s “theme” should be defined by including a
heading element within the element, often immediately after the opening tag.
<section class=”contact”>
<h1>Enter Your Details</h1>
<form> <!– … –> </form>
</section>
<article>
The <article> element is even more specific than a <section>. It is also applied to a
section of content that is semantically related, and should also have a heading.
However, this section of content should additionally be “self-contained”. This
means that the contents of an <article> should be able to be isolated from the
rest of the page and still be meaningful.
<article class=”blog”>
<h1>Blog Detail</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit…</p>
<p>Quae similitudo in genere etiam humano apparet. Est, ut dicis, inquam…</p>
</article>
div or article or section
If the content within the element is not semantically related, then use a <div>. If
the semantically related content is also able to be self-contained, then use an
<article>. Otherwise, use a <section>.
Jhalnath Chapagain | GOMENDRA MULTIPLE COLLEGE
6|Page
Text-level semantics
Element Description
<a> Turn text into hypertext using the a element.
<strong> Imply any extra importance using the strong element.
<code> Define inline code snippets using the code element .
<mark> Highlight text with no semantic meaning using the mark element.
<abbr> Define an abbreviation using the abbr element with a title.
Jhalnath Chapagain | GOMENDRA MULTIPLE COLLEGE
7|Page
<small> De-emphasize text for small print using the small element.
<sup> Mark up typographical conventions with specific meanings
<sub> Mark up typographical conventions with specific meanings
Other text-level semantics are:
<b>,<i>,<br>,<u>,<s>(strike), cite, etc.
<! DOCTYPE html>
<html lang="en">
<head><title>Text Level Semantics - Part 1</title>
</head>
<body>
<p>This is some plain text</p>
<p>This is some text with <em>emphasis</em></p>
<p>This is some text with the <strong>important part highlighted</strong></p>
<p><small>This is some small print</small></p>
<p><s>This is some incorrect text</s></p><!—Strike through>
<p><q>This is a quote from a book</q> - <cite>The Author</cite></p>
</body>
</html>
Other text-level semantics are: I, b, u, kbd, mark
Embedded content
Embedded content is content that imports another resource into the document,
or content from another vocabulary that is inserted into the document.
Jhalnath Chapagain | GOMENDRA MULTIPLE COLLEGE
8|Page
<video>
The <video> tag is used to embed video content in a document, such as a movie
clip or other video streams.
The <video> tag contains one or more <source> tags with different video sources.
The browser will choose the first source it supports.
The text between the <video> and </video> tags will only be displayed in
browsers that do not support the <video> element.
<video width="520" height="450" controls>
<source src="actionmovie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
There are three supported video formats in HTML: MP4, WebM, and OGG.
<audio>
The <audio> HTML element is used to embed sound content in documents. It may
contain one or more audio sources, represented using the src attribute or the
<source> element: the browser will choose the most suitable one. It can also be
the destination for streamed media, using a Media Stream.
<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
Jhalnath Chapagain | GOMENDRA MULTIPLE COLLEGE
9|Page
<iframe>
The iframe element permits to embed another HTML page in a page creating a
new browsing context (i.e. a new environment is created for the loading of this
page).
This new environment is nested (meaning that it's inside the environment of the
page where the iframe appears) creating a hierarchy of environment (known also
as browsing context).
Example:
<iframe src="[Link]" height="200" width="300"></iframe>
Tabular Data
HTML tables allow web developers to arrange data into rows and columns. Each
table row is defined with the <tr> tag. A table header is defined with the <th> tag.
By default, table headings are bold and centered. A table data/cell is defined with
the <td> tag. The HTML tables allow web authors to arrange data like text,
images, links, other tables, etc. into rows and columns of cells.
The value of the colspan attribute represents the number of columns to [Link]
value of the rowspan attribute represents the number of rows to span. Cell
spacing is the space between cells while cell padding is the space around the
contents of a cell
To control both types of spacing, use the CELLSPACING =n and CELLPADDING=n
attributes in the <TABLE> tag
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
Jhalnath Chapagain | GOMENDRA MULTIPLE COLLEGE
10 | P a g e
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
Dividing Table into Horizontal Sections
We can also create a horizontal section consisting of one or more rows. This
allows us to format the rows all at once
To create a horizontal section, type <thead>, <tbody>, or <tfoot> before the first
<tr> tag of the section
Forms
An HTML form is used to collect user input. The user input is most often sent to a
server for processing. A form may be used to collect personal information,
opinions in polls, user preferences and other kinds of information. The <form>
element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.
Jhalnath Chapagain | GOMENDRA MULTIPLE COLLEGE
11 | P a g e
Text Boxes
To create a text box, type <input type=“text” name=“name” value=“value” size=n
maxlength=n>
The name, value, size and maxlength attributes are optional.
Text areas
To create larger text areas, type <textarea name=“name” rows=n1 cols=n2 wrap>
Default Text </textarea>, where n1 is the height of the text box in rows and n2 is
the width of the text box in characters.
The WRAP attribute causes the cursor to move automatically to the next line as the
user types.
Radio Button
To create a radio button, type <input type=“radio” name=“name”
value=“data”>Label, where “data” is the text that will be sent to the server if the
button is checked and “Label” is the text that identifies the button to the user.
If we give a group of radio buttons the same name, the user will only be able to
select one button at a time.
Checkboxes
To create a checkbox, type <input type=“checkbox” name=“name”
value=“value”>Label
The checkbox is shown as a square box that is ticked (checked) when activated.
Checkboxes are used to let a user select one or more options of a limited number
of choices.
Drop-down Menus
To create a drop-down menu, type <select name=“name” size=n multiple>
Then type <option value= “value”>Label
In this case the size attribute specifies the height of the menu in lines and multiple
allows users to select more than one menu option.
Jhalnath Chapagain | GOMENDRA MULTIPLE COLLEGE
12 | P a g e
<b>favorite fruit:</b>
<select>
<option value="mangoes">mangoes </option>
<option value="papaya">papaya </option>
<option value="guava">guava </option>
<option value="banana"> banana</option>
<option value="pineapple">pineapple</option>
</select>
Submit Button
To create a submit button, type <input type=“submit”>
If we would like the button to say something other than submit, we use the value
attribute for example, <input type=“submit” value=“buy now!”> would create a
button that says “buy now!”. Submit button is used whenever we want to submit
a form.
Reset Button
To create a reset button, type <input type=“reset”>
If we would like the button to say something other than Reset, we use the value
attribute for example, <input type=“reset” value=“clear”> would create a button
that says “clear”. The reset button is used to clear all inputs by the user.
Other form element includes password input, file input, date, email, Number, range
,color, search, tel etc.
Jhalnath Chapagain | GOMENDRA MULTIPLE COLLEGE
13 | P a g e
Interactive elements
The details element and Summary element
The <details> element in HTML creates a widget that contains additional
information that is only visible when the widget is in the “open” state. There are no
restrictions on the content that can be included inside the <details> element.
The <details> element supports the open attribute that specifies whether the
content should be visible to the user. The contents are hidden by default.
<html>
<head>
<title> details element</title>
</head>
<body>
<details>
<summary>Learning About the Details Tag</summary>
<p>This paragraph will only be visible when the tag is opened.
If you click on the triangle again, this paragraph
will disappear again.
</p>
</details>
</body>
</html>
The <summary> element creates a visible heading. When you click on the small
triangle to the left of this heading, the open attribute of the <details> element
changes, and the contents of the <details> element becomes visible. Similarly,
clicking on the triangle again changes the state of the open attribute, and the
contents of the <details> element become invisible again.
EMBED element
Jhalnath Chapagain | GOMENDRA MULTIPLE COLLEGE
14 | P a g e
The <embed> tag defines a container for an external resource, such as a web page,
a picture, a media player, or a plug-in application.
An embedded image:
<embed type="image/jpg" src="pic_trulli.jpg" width="300" height="200">
An embedded HTML page:
<embed type="text/html" src="[Link]" width="500" height="200">
An embedded video:
<embed type="video/webm" src="video.mp4" width="400" height="300">
<label> element
When writing in HTML, the <label> tag is used to create labels for items in a user
interface. Used within <input> tags on a form, the <label> tag is additionally useful
because it extends the clickable area of control elements, like buttons. Ex.
<h3>Which type of pet do you prefer?</h3>
<form>
<label for="dogs">Dogs</label>
<input type="radio" name="animal" id="dogs" value="dogs"><br><br>
<label for="cats">Cats</label>
<input type="radio" name="animal" id="cats" value="cats"><br><br>
<input type="submit" value="Submit">
</form>
Jhalnath Chapagain | GOMENDRA MULTIPLE COLLEGE
15 | P a g e
List
Ordered Lists
Unordered Lists
Ordered Lists
Ordered lists are a list of numbered items. To create an ordered list, type:
<ol>
<li> this is step one.</li>
<li> this is step two. .</li>
<li> this is step three. .</li>
</ol>
Here’s how it would look on the Web:
The<ol type= “ ”> attribute allows us to change the kind of symbol that appears
in the list.
A is for capital letters
a is for lowercase letters
I is for capital roman numerals
i is for lowercase roman numerals
Unordered Lists
An unordered list is a list of bulleted items
To create an unordered list, type:
<ul>
<li> first item in list</li>
Jhalnath Chapagain | GOMENDRA MULTIPLE COLLEGE
16 | P a g e
<li> second item in list</li>
<li> third item in list</li>
</ul>
Here’s how it would look on the Web:
The <ul type= ” ” >attribute allows us to change the type of bullet that appears
circle corresponds to an empty round bullet
square corresponds to a square bullet
disc corresponds to a solid round bullet; this is the default value.
Links
A link lets us move from one page to another, play movies and sound, send email,
download files, and more….
Anchors(<a>) also enable a user to jump to a specific place on a Web site. To create
the anchor itself, type <a name=“anchor name”>label</a> at the point in the Web
page where we want the user to jump to.
To create the link, type <a href=“#anchor name”>label</a> at the point in the text
where we want the link to appear.
Jhalnath Chapagain | GOMENDRA MULTIPLE COLLEGE
17 | P a g e
A link has three parts: a destination, a label, and a target
To create a link type
<a href=“[Link]”> label </a>
In the above link, “[Link]” is the destination. The destination specifies the
address of the Web page or file the user will access when he/she clicks on the link.
The label is the text that will appear underlined or highlighted on the page.
Link to an Email
<a href="[Link] email</a>
Absolute URLs and Relative URLs
full URL to link to a web page is an absolute URL.
<a href="[Link]
Link to a page located in the html folder on the current web site is Relative URL.
<a href="/project/[Link]">home Page</a>
We can insert the image using <img> (inside <a>) to use an image as a link.
HTML Links - The target Attribute
The target attribute specifies where to open the linked document.
_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
E.x.
<a href="[Link] target="_blank">Visit Youtube</a>
Jhalnath Chapagain | GOMENDRA MULTIPLE COLLEGE
18 | P a g e
Images
Images are very important to beautify as well as to depict many complex concepts
in simple way on our web page.
Syntax:
<img src="url" alt="alternatetext">
The required src attribute specifies the path (URL) to the image. The broken link
icon and the alt text are shown if the browser cannot find the image.
We can use width and height attribute to adjust size of an image in webpage.
Example:
<img src="[Link]" alt="Top mountains in the world" width="500"
height="600">
Images in Another Folder
If we have our images in a sub-folder, we must include the folder name in the src
attribute.
<img src="/images/[Link]" alt=”Forest”>
Images on Another Server/Website
To point to an image on another server, we must specify an absolute (full) URL in
the src attribute.
<img src="[Link]
1ec7e8897bad?ixlib=rb-
1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=for
mat&fit=crop&w=388&q=80" alt="Chairs">
Jhalnath Chapagain | GOMENDRA MULTIPLE COLLEGE