Understanding the HTML5 Doctype

 A Document Type Declaration, or DOCTYPE for

short, is an instruction to the web browser about
the version of markup language in which a web
page is written.
 A DOCTYPE declaration appears at the top of a web
page before all other elements.
 According to the HTML specification or standards,
every HTML document requires a valid document
type declaration to insure that your web pages are
displayed the way they are intended to be displayed.
 HTML Element Syntax

 An HTML element is an individual component of

an HTML document.
 It represents semantics, or meaning. For example,
the title element represents the title of the
document.
 Most HTML elements are written with a start
tag (or opening tag) and an end tag (or closing tag),
with content in between.
 HTML Element Syntax(contd.)

 Elements can also contain attributes that defines its

additional properties.
 For example, a paragraph, which is represented by
the p element, would be written as:<div
style="background-
color: lightgreen">This is second div</div>
 HTML Tags Vs Elements

 Technically, an HTML element is the collection of

start tag, its attributes, an end tag and everything in
between.
 On the other hand an HTML tag (either opening or
closing) is used to mark the start or end of an
element, as you can see in the illustration in
previous slide.
 However, in common usage the terms HTML
element and HTML tag are interchangeable
 Case Insensitivity in HTML Tags and Attributes

 In HTML, tag and attribute names are not case-

sensitive (but most attribute values are case-
sensitive).
 It means the tag <P>, and the tag <p> defines the
same thing in HTML which is a paragraph.

<p>This is a paragraph.</p>
<P>This is also a valid paragraph.</P>
 Empty HTML Elements

 Empty elements (also called self-closing or void elements)

are not container tags — that means, you can not write
<hr>some content</hr> or <br>some content</br>.
 A typical example of an empty element, is the <br>
element, which represents a line break. Some other
common empty elements are <img>, <input>, <link>,
<meta>, <hr>, etc.

<p>This paragraph contains <br> a line break.</p>

<img src="images/sky.jpg" alt="Cloudy Sky">
<input type="text" name="username">
 Nesting HTML Elements

 Most HTML elements can contain any number of

further elements (except empty elements), which are,
in turn, made up of tags, attributes, and content or
other elements.
 The following example shows some elements nested
inside the <p> element.

<p>Here is some <b>bold</b> text.</p>

<p>Here is some <em>emphasized</em> text.</p>
<p>Here is some <mark>highlighted</mark> text.</p>
 Nesting HTML Elements(contd.)

<p><strong>These tags are nested

properly.</strong></p>
<p><strong>These tags are not nested
properly.</p></strong>
 Writing Comments in HTML

Comments are usually added with the purpose of

making the source code easier to understand.
It may help other developer (or you in the future
when you edit the source code) to understand what
you were trying to do with the HTML.
Comments are not displayed in the browser.
<!-- This is an HTML comment -->
<!-- This is a multi-line HTML comment
that spans across more than one line -->
<p>This is a normal piece of text.</p>
 HTML Elements Types

Elements can be placed in two distinct groups: block

level and inline level elements. The former make up
the document's structure, while the latter dress up
the contents of a block.
Also, a block element occupies 100% of the available
width and it is rendered with a line break before and
after. Whereas, an inline element will take up only as
much space as it needs.
 HTML Elements Types(contd.)

The most commonly used block-level elements are

<div>, <p>, <h1> through <h6>, <form>, <ol>,
<ul>, <li>, and so on. Whereas, the commonly used
inline-level elements are <img>, <a>, <span>,
<strong>, <b>, <em>, <i>, <code>, <input>,
<button>, etc.
span tag is a generic inline container element. You
use this element to wrap sections of text for styling
purposes or to add attributes to a section of text
without creating a new line of content. It is similar —
but not the same as — the <div> tag.
 HTML Attributes

Attributes define additional characteristics or

properties of the element such as width and height of
an image.
Attributes are always specified in the start tag (or
opening tag) and usually consists of name/value
pairs like name="value".
Attribute values should always be enclosed in
quotation marks.
 HTML Attributes(contd.)

<img src="images/smiley.png" width="30"

height="30" alt="Smiley">
<a href="https://www.google.com/" title="Search
Engine">Google</a>
<abbr title="Hyper Text Markup
Language">HTML</abbr>
Abbr tag defines an abbreviation or an
acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP",
"ATM".
<input type="text" value="John Doe">
 HTML Headings

<h1>Heading level 1</h1>

<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
 Formatting Text with HTML

<p>This is <b>bold text</b>.</p>

<p>This is <strong>strongly important text</strong>.</p>
<p>This is <i>italic text</i>.</p>
<p>This is <em>emphasized text</em>.</p>
<p>This is <mark>highlighted text</mark>.</p>
<p>This is <code>computer code</code>.</p>
<p>This is <small>smaller text</small>.</p>
<p>This is _subscript and
^superscript text.</p>
<p>This is <del>deleted text</del>.</p>
<p>This is <ins>inserted text</ins>.</p>
 Formatting Quotations

Blockquotes are generally displayed with indented

left and right margins, along with a little extra space
added above and below.

<blockquote>
<p>Learn from yesterday, live for today, hope for
tomorrow. The important thing is not to stop
questioning.</p>
<cite>— Albert Einstein</cite>
</blockquote>
 Showing Abbreviations

You can use the <abbr> tag to denote an

abbreviation

<p>The <abbr title="World Wide Web

Consortium">W3C</abbr> is the main international
standards organization for the <abbr title="World
Wide Web">WWW or W3</abbr>. It was founded by
Tim Berners-Lee.</p>
 Managing White Spaces

<p>This paragraph has

multiple&nbsp;&nbsp;&nbsp;spaces.</p>
<p>This paragraph has
multiple<br><br>line<br><br><br>breaks.</p>
 Defining Preformatted Text

 Sometimes, using &nbsp;, <br>, etc. for managing spaces isn't

very convenient.
 Alternatively, you can use the <pre> tag to display spaces,
tabs, line breaks, etc. exactly as written in the HTML file.
 It is very helpful in presenting text where spaces and line
breaks are important like poem or code.
<pre>
Twinkle, twinkle, little star,
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky.
</pre>
 Creating Links in HTML

A link or hyperlink is a connection from one web

resource to another.
Links allow users to move seamlessly from one page to
another, on any server anywhere in the world.
A link has two ends, called anchors. The link starts at the
source anchor and points to the destination anchor,
which may be any web resource, for example, an image,
an audio or video clip, a PDF file, an HTML document or
an element within the document itself, and so on.
<a href="https://www.google.com/">Google Search</a>
 Working with Image Maps

An image map allows you to define hotspots on an

image that acts just like a hyperlink.
The basic idea behind creating image map is to
provide an easy way of linking various parts of an
image without dividing it into separate image files.
For example, a map of the world may have each
country hyperlinked to further information about
that country.
The HTML <map> tag defines an image map.
 Working with Image Maps(contd.)

The image is inserted using the <img> tag. The only

difference from other images is that you must add
a usemap attribute
 Creating Tables in HTML

HTML table allows you to arrange data into rows

and columns.
They are commonly used to display tabular data like
product listings, customer's details, financial reports,
and so on.
You can create a table using the <table> element.
Inside the <table> element, you can use
the <tr> elements to create rows, and to create
columns inside a row you can use the <td> elements.
You can also define a cell as a header for a group of
table cells using the <th> element.
 Working with HTML Lists

HTML lists are used to present list of information in

well formed and semantic way. There are three
different types of list in HTML and each one has a
specific purpose and meaning.
Unordered list — Used to create a list of related
items, in no particular order.
Ordered list — Used to create a list of related
items, in a specific order.
Description list — Used to create a list of terms
and their descriptions.
 HTML Forms

 HTML Forms are required to collect different kinds of user

inputs, such as contact details like name, email address, phone
numbers, or details like credit card information, etc.
 The most frequently used input types are described below.
- Text fields
- Password fields
- Radio buttons
- Checkboxes
- file
- Textarea
- select box
- submit button and reset button
 Grouping Form Controls

You also group logically related controls and labels

within a web form using the <legend> element.
Grouping form controls into categories makes it
easier for users to locate a control which makes the
form more user-friendly.
 HTML 5 new input elements

 color
 date
 datetime-local
 email
 month
 number
 range
 search
 tel
 time
 url
 week
 HTML 5 audio

Using the HTML5 audio Element

Using the object Element
Using the embed Element
 HTML 5 video

Using the HTML5 video Element

Using the object Element
Using the embed Element
Embedding the YouTube Videos
 HTML 5 elements

<article> Represents an independent piece of content of a document, such as a blog

entry or newspaper article
<aside > Represents a piece of content that is only slightly related to the rest of the
page.
<audio> Defines an audio file.
<canvas> This is used for rendering dynamic bitmap graphics on the fly, such as graphs
or games.
<command> Represents a command the user can invoke.
<datalist> Together with the a new list attribute for input can be used to make
comboboxes
<details> Represents additional information or controls which the user can obtain on
demand
<embed> Defines external interactive content or plugin.
<figure> Represents a piece of self-contained flow content, typically referenced as a
single unit from the main flow of the document.
<footer> Represents a footer for a section and can contain information about the
author, copyright information, et cetera.
<header> Represents a group of introductory or navigational aids.
 HTML 5 elements

<hgroup> Represents the header of a section.

<keygen> Represents control for key pair generation.
<mark> Represents a run of text in one document marked or highlighted for
reference purposes, due to its relevance in another context.
<meter> Represents a measurement, such as disk usage.
<nav> Represents a section of the document intended for navigation.
<output> Represents some type of output, such as from a calculation done
through scripting.
<progress> Represents a completion of a task, such as downloading or when
performing a series of expensive operations.
<ruby> Together with <rt> and <rp> allow for marking up ruby annotations.
<section> Represents a generic document or application section
<time> Represents a date and/or time.
<video> Defines a video file.
<wbr> Represents a line break opportunity.