1 HTML

Understanding HTML5
Mark-up Language
• Markup languages are designed for the processing, definition and
presentation of text. The language specifies code for formatting, both
the layout and style, within a text file.
• The code used to specify the formatting are called tags.
• It is human-readable, meaning markup files contain standard words,
rather than typical programming syntax.
• While several markup languages exist, the two most popular
are HTML and XML.
Difference between HTML and XML
HTML XML
HTML is a markup language used for creating webpages. The XML is used for storing structured data, rather than formatting
contents of each webpage are defined by HTML tags. Basic information on a page. While HTML documents use
page tags, such as <head>, <body>, and <div> define sections predefined tags (like the examples above), XML files use
of the page, while tags such as <table>, <form>, <image>, custom tags to define elements. For example, an XML file that
and <a> define elements within the page. stores information about computer models may include the
following section:
<a href="http://www.techwyvern.xyz">techwyven.xyz</a> <computer>

<manufacturer>Dell</manufacturer>
<model>XPS 17</model>
<components>
<processor>2.00 GHz Intel Core i7</processor>
<ram>6GB</ram>
<storage>1TB</storage>
</components>
</computer>
What is HTML?
• HTML is the standard markup language for creating Web pages.

• HTML stands for Hyper Text Markup Language
• HTML describes the structure of Web pages using markup
• HTML elements are the building blocks of HTML pages
• HTML elements are represented by tags
• HTML tags label pieces of content such as "heading", "paragraph",
"table", and so on
• Browsers do not display the HTML tags, but use them to render the
content of the page
HTML Versions
• HTML 1.0: This was the barebones version of HTML and the very first release of the
language.
• HTML 2.0: This version was introduced in 1995. It gradually evolved, allowing extra
capabilities including form-based file upload, tables, client-side image maps and
internationalization.
• HTML 3.2: In an attempt to ensure development of standards for the World Wide
Web, the World Wide Web Consortium (W3C) was founded by Tim Berners-Lee in
1994. By 1997, they published HTML 3.2.
• HTML 4.0: Later in 1997, the W3C released HTML 4.0 — a version that adopted
many browser-specific element types and attributes.
• HTML 4.0 was later reissued with minor edits in 1998.
• HTML 4.01: In December 1999, HTML 4.01 was released.
• XHTML: The specifications were introduced in 2000 and it was recommended to be
used as the joint-standard with HTML 4.01. It incorporated XML to ensure code is
properly written and to ensure interoperability between programming languages.
• HTML5: The W3C published HTML5 as a recommendation in October 2014 and
later released HTML 5.1 in November 2016.
Basic Structure of HTML
<!DOCTYPE html> • The <!DOCTYPE html> declaration defines

<html> this document to be HTML5
<head> • The <html> element is the root element of an
HTML page
<title>Page Title</title> • The <head> element contains meta
</head> information about the document
<body> • The <title> element specifies a title for the
document
<h1>My First Heading</h1>
• The <body> element contains the visible page
<p>My first paragraph.</p> content
</body> • The <h1> element defines a large heading
</html> • The <p> element defines a paragraph
Basic Structure of HTML
• An HTML document has two* main
parts:
• head. The head element contains title
and meta data of a web document.
• body. The body element contains the
information that you want to display
on a web page.
• In a web page, the first tag
(specifically, <html>) indicates the
markup language that is being used
for the document.
• The <head> tag contains
information about the web page.
Lastly, the content appears in the
<body> tag.
HTML PGE STRUCTURE
HTML Tags
• HTML tags are element names surrounded by angle brackets:
• <tagname>content goes here...</tagname>
• HTML tags normally come in pairs like <p> and </p>
• The first tag in a pair is the start tag, the second tag is the end tag
• The end tag is written like the start tag, but with a forward slash inserted
before the tag name
HTML 5
• HTML5 is the next major revision of the HTML standard superseding
HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for
structuring and presenting content on the World Wide Web.
• HTML5 is a cooperation between the World Wide Web Consortium
(W3C) and the Web Hypertext Application Technology Working
Group (WHATWG).
• The new standard incorporates features like video playback and drag-
and-drop that have been previously dependent on third-party browser
plug-ins such as Adobe Flash, Microsoft Silverlight, and Google
Gears.
New Features
• New Semantic Elements − These are like <header>, <footer>, and <section>.
• Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced for
<input> tag.
• Persistent Local Storage − To achieve without resorting to third-party plugins.
• WebSocket − A next-generation bidirectional communication technology for web applications.
• Server-Sent Events − HTML5 introduces events which flow from web server to the web browsers
and they are called Server-Sent Events (SSE).
• Canvas − This supports a two-dimensional drawing surface that you can program with JavaScript.
• Audio & Video − You can embed audio or video on your webpages without resorting to third-party
plugins.
• Geolocation − Now visitors can choose to share their physical location with your web application.
• Microdata − This lets you create your own vocabularies beyond HTML5 and extend your web
pages with custom semantics.
• Drag and drop − Drag and drop the items from one location to another location on the same
webpage
HTML5 - Syntax
• HTML 5 language has a "custom" HTML syntax that is compatible with HTML 4
and XHTML1 documents published on the Web, but is not compatible with the
more esoteric SGML features of HTML 4.
• HTML 5 does not have the same syntax rules as XHTML where we needed lower
case tag names, quoting our attributes, an attribute had to have a value and to close
all empty elements.
• HTML5 comes with a lot of flexibility and it supports the following features −
• Uppercase tag names.
• Quotes are optional for attributes.
• Attribute values are optional.
• Closing empty elements are optional.
The DOCTYPE
• DOCTYPEs in older versions of HTML were longer because the HTML language was SGML
based and therefore required a reference to a DTD.
• HTML 5 authors would use simple syntax to specify DOCTYPE as follows −
• <!DOCTYPE html>
• The above syntax is case-insensitive.
About HTML 5
• HTML5 supports both audio and video whereas none of these was a part of
HTML
• HTML does not allow JavaScript to run within the web browser whereas
HTML5 provides full support for JavaScript to run in the background.
• In HTML5, inline MathML and SVG can be used in text whereas this
wasn’t possible in HTML.
• HTML5 supports new kinds of form controls, for example: dates and times,
email, number, range, tel, url, search etc.
• There are many new elements introduced in HTML5. Some of the most
important ones are: summary, time, audio, details, embed, figcaption, figure,
footer, header, article, canvas, nav, output, section, source, track, video, etc..
Next Topic
Meta Tags

1 HTML

Uploaded by

Copyright:

Available Formats

1 HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

1 HTML

Uploaded by

Copyright:

Available Formats

Understanding HTML5

<a href="http://www.techwyvern.xyz">techwyven.xyz</a> <computer>

• HTML is the standard markup language for creating Web pages.

<!DOCTYPE html> • The <!DOCTYPE html> declaration defines

You might also like