Scribd
Upload
494 views

Introduction To HTML5

HTML is a markup language used to define the structure and layout of web pages. It uses tags to surround elements and provide semantic meaning. HTML5 is the newest version that aims to improve support for all devices and content types. It incorporates features from previous versions and adds new tools for developers.

Uploaded by

harini
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
494 views

Introduction To HTML5

HTML is a markup language used to define the structure and layout of web pages. It uses tags to surround elements and provide semantic meaning. HTML5 is the newest version that aims to improve support for all devices and content types. It incorporates features from previous versions and adds new tools for developers.

Uploaded by

harini
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 23

Introduction to

HTML5
HTML (Hypertext Markup Language) uses a markup system composed of
elements which represent specific content.
Markup means that with HTML you declare what is presented to a viewer, not
how it is presented.
An element usually consists of an opening tag, a closing tag which contain the
element's name surrounded by angle brackets, and the content in between:
<element_name>...content...</element_name>
There are some HTML elements that don't have a closing tag or any contents.
These are called void elements.
Void elements include <img>, <meta>, <link> and <input>.
Element names can be thought of as descriptive keywords for the content
they contain, such as video, audio, table, footer.
A HTML page may consist of potentially hundreds of elements which are then
read by a web browser, interpreted and rendered into human readable or
audible content on the screen.
Elements: video, audio, table, footer
Tags: <video>, <audio>, <table>, <footer>, </html>, </body>
HTML files can be created using any text editor. The files must be saved with a .html or
.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
<!DOCTYPE> Defines the HTML version used in the document. In this case it is
HTML5.
<html>
Opens the page. No markup should come after the closing tag (</html>). The lang
attribute declares the primary language of the page using the ISO language codes
(en for English).
See the Content Language topic for more information.
<head>
Opens the head section, which does not appear in the main browser window but
mainly contains information about the HTML document, called metadata. It can also
contain imports from external stylesheets and scripts. The closing tag is </head>.
<meta>
Gives the browser some metadata about the document. The charset attribute declares
the character encoding.
Modern HTML documents should always use UTF-8, even though it is not a
requirement.
In HTML, the <meta> tag does not require a closing tag.
<title> The title of the page. Text written between this opening and the closing tag
(</title>) will be displayed on the tab of the page or in the title bar of the browser.
<body> Opens the part of the document displayed to users, i.e. all the visible or
audible content of a page. No content should be added after the closing tag </body>.
History of HTML

1991 HTML first published

1995 HTML 2.0


After HTML 4.01 was released, focus
shifted to XHTML and its stricter standards.
1997 HTML 3.2

1999 HTML 4.01 XHTML 2.0 had even stricter standards


than 1.0, rejecting web pages that did not
2000 XHTML 1.0 comply. It fell out of favor gradually and
was abandoned completely in 2009.
2002
- XHTML 2.0
HTML5 is much more tolerant and can
2009 handle markup from all the prior versions.

Though HTML5 was published officially in 2012, it


2012 HTML5
has been in development since 2004.
What is HTML5?
 HTML5 is the newest version of HTML, only recently
gaining partial support by the makers of web browsers.
 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.
Goals of HTML5

 Support all existing web pages. With HTML5, there is no


requirement to go back and revise older websites.
 Reduce the need for external plugins and scripts to show
website content.
 Improve the semantic definition (i.e. meaning and
purpose) of page elements.
 Make the rendering of web content universal and
independent of the device being used.
 Handle web documents errors in a better and more
consistent fashion.
Doctypes - short for 'document type' - help browsers to understand the version of
HTML the document is written in for better interpretability.
Doctype declarations are not HTML tags and belong at the very top of a
document.
This topic explains the structure and declaration of various doctypes in HTML.
The <!DOCTYPE> declaration should always be included at the top of the HTML
document, before the <html> tag.
<!DOCTYPE html>
HTML5 is not based on SGML (Standard Generalized Markup Language), and
therefore does not require a reference to a DTD (Document Type Definition).
HTML 5 Doctype declaration:
<!DOCTYPE html>
Case Insensitivity
A DOCTYPE must consist of the following components, in this order:
A string that is an ASCII case-insensitive match for the string "<!DOCTYPE".
therefore the following DOCTYPEs are also valid:
<!doctype html>
<!dOCtyPe html>
<!DocTYpe html>
HTML provide only plain paragraph tags, but six separate header tags to indicate
headings of various sizes and thicknesses.
Enumerated as heading 1 through heading 6, heading 1 has the largest and
thickest text while heading 6 is the smallest and thinnest, down to the paragraph
level.
Headings can be used to describe the topic they precede and they are defined
with the <h1> to <h6> tags.
Headings support all the global attributes.
<h1> defines the most important heading.
<h6> defines the least important heading.
Defining a heading:
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3>
<h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
Correct structure matters
Search engines and other user agents usually index page content based on heading
elements, for example to create a table of contents, so using the correct structure for
headings is important.
In general, an article should have one h1 element for the main title followed by h2
subtitles – going down a layer if necessary.
If there are h1 elements on a higher level they shoudn't be used to describe any lower
level content.
Example document (extra intendation to illustrate hierarchy):
<h1>Main title</h1>
<p>Introduction</p>
<h2>Reasons</h2>
<h3>Reason 1</h3>
<p>Paragraph</p>
<h3>Reason 2</h3>
<p>Paragraph</p>
<h2>In conclusion</h2>
<p>Paragraph</p>
<p> Defines a paragraph
<br> Inserts a single line break
<pre> Defines pre-formatted text
Paragraphs are the most basic HTML element.
The HTML <p> element defines a paragraph:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the output by adding extra spaces or extra lines in
your HTML code.
The browser will remove any extra spaces and extra lines when the page is
displayed:
<p>This is another paragraph, extra spaces will be removed by browsers</p>
While most HTML tags are used to create elements, HTML also provides in-text
formatting tags to apply specific
text-related styles to portions of text.
The <mark> element is new in HTML5 and is used to mark or highlight text in a
document "due to its relevance in another context".
The most common example would be in the results of a search were the user has
entered a search query and results are shown highlighting the desired query.
<p>Here is some content from an article that contains the <mark>searched query</mark>
that we are looking for. Highlighting the text will make it easier for the user to
find what they are looking for.</p>
Bold Text
To bold text, use the <strong> or <b> tags:
<strong>Bold Text Here</strong>
or
<b>Bold Text Here</b>
What’s the difference? Semantics. <strong> is used to indicate that the text is
fundamentally or semantically important to the surrounding text, while <b>
indicates no such importance and simply represents text that should be
bolded.
If you were to use <b> a text-to-speech program would not say the word(s) any
differently than any of the other words around it - you are simply drawing
attention to them without adding any additional importance. By using
<strong>, though, the same program would want to speak those word(s) with a
different tone of voice to convey that the text is important in some way.
Italic Text
To italicize text, use the <em> or <i> tags:
<em>Italicized Text Here</em>
or
<i>Italicized Text Here</i>
<em> is used to indicate that the text should have extra emphasis that should be
stressed, while <i> simply represents text which should be set off from the normal text
around it.
For example, if you wanted to stress the action inside a sentence, one might do so by
emphasizing it in italics via <em>: "Would you just submit the edit already?"
But if you were identifying a book or newspaper that you would normally italicize
stylistically, you would simply use
<i>: "I was forced to read Romeo and Juliet in high school.
Underlined Text
While the <u> element itself was deprecated in HTMl 4, it was reintroduced with
alternate semantic meaning in
HTML 5 - to represent an unarticulated, non-textual annotation. You might use such a
rendering to indicate misspelled text on the page, or for a Chinese proper name mark.
<p>This paragraph contains some <u>mispelled</u> text.</p>
To mark some expression as an abbreviation, use <abbr> tag:
<p>I like to write <abbr title="Hypertext Markup Language">HTML</abbr>!</p>
If present, the title attribute is used to present the full description of such
abbreviation.
To mark text as inserted, use the <ins> tag:
<ins>New Text</ins>
To mark text as deleted, use the <del> tag:
<del>Deleted Text</del>
To strike through text, use the <s> tag:
<s>Struck-through text here</s>
To offset text either upward or downward you can use the tags <sup> and <sub>.
To create superscript:
<sup>superscript here</sup>
To create subscript:
<sub>subscript here</sub>
Specifies where to open the link, e.g. in a new tab or window. Possible values are
_blank, _self,
_parent, _top, and framename (deprecated). Forcing such behaviour is not recommended
since it
violates the control of the user over a website.
title
Specifies extra information about a link. The information is most often shown as a
tooltip text when
the cursor moves over the link. This attribute is not restricted to links, it can be used on
almost all
HTML tags.
download
Specifies that the target will be downloaded when a user clicks on the hyperlink. The
value of the
attribute will be the name of the downloaded file. There are no restrictions on allowed
values, and the
browser will automatically detect the correct file extension and add it to the file (.img,
.pdf, etc.). If the
value is omitted, the original filename is used.
New Elements in HTML5

<article> <figcaption> <progress>


<aside> <footer> <section>
<audio> <header> <source>
<canvas> <hgroup> <svg>
<datalist> <mark> <time>
<figure> <nav> <video>

These are just some of the new elements introduced in HTML5. We


will be exploring each of these during this course.
Other New Features in HTML5
 Built-in audio and video support (without plugins)
 Enhanced form controls and attributes
 The Canvas (a way to draw directly on a web page)
 Drag and Drop functionality
 Support for CSS3 (the newer and more powerful version
of CSS)
 More advanced features for web developers, such as
data storage and offline applications.
First Look at HTML5
Remember the DOCTYPE declaration from XHTML?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

In HTML5, there is just one possible DOCTYPE declaration and it is simpler:

<!DOCTYPE html>

Just 15 characters!

The DOCTYPE tells the browser which type and version of document to
expect. This should be the last time the DOCTYPE is ever changed. From
now on, all future versions of HTML will use this same simplified declaration.
The <html> Element
This is what the <html> element looked like in XHTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"


lang="en">

Again, HTML5 simplifies this line:

<html lang="en">

The lang attribute in the <html> element declares which language the page
content is in. Though not strictly required, it should always be specified, as it
can assist search engines and screen readers.

Each of the world’s major languages has a two-character code, e.g. Spanish = "es",
French = "fr", German = "de", Chinese = "zh", Arabic = "ar".
The <head> Section
Here is a typical XHTML <head> section:
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>My First XHTML Page</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

And the HTML5 version:

<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>

Notice the simplified character set declaration, the shorter CSS stylesheet link
text, and the removal of the trailing slashes for these two lines.
Basic HTML5 Web Page
Putting the prior sections together, and now adding the <body> section and
closing tags, we have our first complete web page in HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>HTML5 is fun!</p>
</body>
</html>

Let's open this page in a web browser to see how it looks…


Viewing the HTML5 Web Page

Even though we used HTML5, the page looks exactly the same in a web
browser as it would in XHTML. Without looking at the source code, web
visitors will not know which version of HTML the page was created with.

You might also like