[go: up one dir, main page]
Scribd
Upload
2 views24 pages

Web Development Prelim2

HTML5 is the fifth revision of the HTML standard, designed to improve multimedia support while maintaining readability and compatibility. It introduces new elements, attributes, and APIs, reduces the need for external plugins, and provides better support for media and web applications. HTML5 syntax is simplified, allowing for more flexible document structure and enhanced form controls.

Uploaded by

Patrick Docena
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views24 pages

Web Development Prelim2

HTML5 is the fifth revision of the HTML standard, designed to improve multimedia support while maintaining readability and compatibility. It introduces new elements, attributes, and APIs, reduces the need for external plugins, and provides better support for media and web applications. HTML5 syntax is simplified, allowing for more flexible document structure and enhanced form controls.

Uploaded by

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

HTML5

Difference between HTML and


HTML5
• HTML5 is the fifth revision of the HTML standard. The core aims of
HTML5 have been to ‘improve the language with support for the
latest multimedia while keeping it easily readable by humans and
consistently understood by computers and devices, such as web
browser, parsers, etc.’
• HTML5 supercedes HTML4, as well as XHTML1 and DOM level 2 HTML.
Additionally, as of December 2012, HTML5 is W3C Candidate
Recommendation.
• HTML5 aimed to address the variety of mixture of features introduced
by various specifications by various browsers. It also aimed to address
the many syntax errors in existing web documents.
Difference between HTML and
HTML5
The various changes in HTML5, as compared to previous versions:
• HTML5 includes detailed processing models to encourage more
interoperable implementations.
• HTML5 extends, improves and rationalises the markup available for
documents.
• HTML5 introduces markup and application programming interfaces
(APIs) for complex web applications.
• HTML5 is a potential candidate for cross-platform mobile applications.
• HTML5 makes it easy to include and handle multimedia and graphical
content on the web without having to resort to proprietary plugins
and APIs.
Difference between HTML and
HTML5
• HTML5 contains much better support for media, such as audio and
video tags.
• In HTML5, JS Geolocation API helps in identifying location.
• HTML5 defines detailed parsing rules, including error handling.
• HTML5 defines an HTML syntax that is compatible with HTML4 and
XHTML1 documents published on the web.
• HTML5 can use the XML syntax.
• New features of HTML5 were based on HTML, CSS, DOM, and
JavaScript.
Difference between HTML and
HTML5
• HTML5 has reduced need for external plugins, like flash.
• HTML5 has more markup to replace scripting.
• HTML5 is device independent.
• HTML5 has the canvas element for drawing.
• HTML5 has better support for local offline storage.
• HTML5 has new content specific elements, like article, footer, header,
NAV, section.
• HTML5 has new form controls, like calendar, date, time, email, URL,
search.
Difference between HTML and
HTML5
• HTML5 is oriented towards flexible parsing and compatibility.
• HTML5 has the ability to use inline SVG and MathML in text/html.
• HTML5 has global attributes that can be applied for every element,
such as id, tabindex, hidden, data-*.
• HTML5 does not contain deprecated elements, such as acronym,
applet, basefont, big, center, dir, font, frame, frameset, isindex,
noframes, strike, tt.
HTML5 Basic Syntaxes
• The HTML5 language has a “custom” HTML syntax that is compatible
with HTML4 and XHTML1 documents published on the web, but is not
compatible with the more esoteric SGML features of HTML4. HTML5 is
coming with lots of flexibility and would support the following:
➢ Uppercase tag names
➢ Quotes are optional for attributes
➢ Attributes values are optional
➢ Closing empty elements are optional
HTML5 Basic Syntaxes
• The DOCTYPE – DOCTYPEs in older version of HTML were longer
because the HTML language was SGML based and therefore
required a reference to a DTD.
• HTML5 authors would use simple syntax to specify DOCTYPE as follows:
- <!DOCTYPE html>
• Character Encoding – HTML5 authors can use simple syntax to specify
Character Encoding as follows:
- <meta charset=“UTF-8”>
HTML5 Basic Syntaxes
• The <script> tag – it’s common practice to add a type attribute with a
value of “text/javascript” to script elements as follows.

• HTML5 removes extra information required and you can use simply
following syntax.
HTML5 Basic Syntaxes
• The <link> tag – so far you were writing <link> as follows.

• HTML5 removes extra information required and you can use simply
following syntax.
HTML5 Basic Syntaxes
• HTML5 elements – are marked up using start tags and end tags. Tags
are delimited using angle brackets with the tag name in between.
The difference between start tags and end tags is that the latter
includes a slash before the name. Following is the example of an
HTML5 element.

• HTML5 tag names are case insensitive and may be written in all
uppercase or mixed case, although the most common convention is
to stick with lower case.
HTML5 Basic Syntaxes
• HTML5 attributes – elements may contain attributes that are used to
set various properties of an element. Some attributes are defined
globally and can be used on any element, while others are defined
for specific elements only. All attributes have a name and a value
and look like as shown below in the example. Following is the
example of an HTML5 attributes which illustrates how to mark up a div
element with an attribute named class using a value of “example”.
HTML5 Basic Syntaxes
• HTML5 Document
The following tags have been introduced for better structure
• section – this tag represents a generic document or application
section. It can be used together with h1-h6 to indicate the document
structure.
• article – this tag represents an independent piece of content of a
document, such as blog entry or newspaper article.
• aside - this tag represents a piece of content that is only slightly
related to the rest of the page.
HTML5 Basic Syntaxes
• header – this tag represents header of a section
• footer – this tag represents a footer for a section and can contain
information about the author, copyright information, etc.
• nav – this tag represents a section of the document intended for
navigation.
• dialog – this tag can be used to mark up a conversation
• figure – this tag can be used to associate a caption together with
some embedded content, such as graphic or video.
HTML5 Attributes
• Standard Attributes – the attributes
listed below are supported
by almost all the HTML5 tags.
HTML5 Attributes
HTML5 Attributes
Web Forms of HTML5
• Form elements and attributes in HTML5 provide a greater degree of
semantic mark-up than HTML4 and remove a great deal of the need
for tedious scripting and styling that was required in HTML4.
• The <input> element – has new values for the type attribute.
• search: the element represents search entry field. Line breaks are
automatically stripped from input value, but no other syntax is
enforced.
• tel: the element represents a control for editing a telephone number.
Line breaks are automatically stripped from the input value, but no
other syntax is enforced, because telephone numbers vary widely
internationally. You can use attributes such pattern and maxlength to
restrict values entered in the control.
Web Forms of HTML5
• url: the element represents a control for editing URL. Line breaks and
leading and trailing whitespaces are automatically stripped from the
input value.
• email: the element represents one email address. Line breaks are
automatically stripped from the input value.
Web Forms of HTML5
• The <input> element also has new attributes:
• list: the ID of a <datalist> element whose content, <option> elements,
are to be used as hints and are displayed as proposals in the
suggestion area of the input field.
• pattern: a regular expression that the control’s value is checked
against, which can be used with type value of text, tel, search, url
and email.
• form: a string indicating which <form> element this input is part of an
input can only be in one form.
• formmethod: a string indicating which HTTP method (GET or POST)
should be used when submitting.
Web Forms of HTML5
• Text input – this segment define a one line input the user can enter
into the box (textbox).
Web Forms of HTML5
• Checkboxes – this section allows the user to select multiple options to
choose from a limited numbers of options.
Web Forms of HTML5
• Radio <input> element
Reference
• W3schools
HyperText Markup Language
• Beginning Web Programming with HTML, XHTML, and CSS
Ducket, J, (2011). John Wiley & Sons

You might also like