Scribd
Upload
85 views4 pages

HTML5 (Part 1) : I. Introduction To HTML5

Uploaded by

Celvin Martirez
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
85 views4 pages

HTML5 (Part 1) : I. Introduction To HTML5

Uploaded by

Celvin Martirez
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/ 4

SH1802

HTML5 (Part 1)
I. Introduction to HTML5
• HMTL5 is the fifth version of HTML and is a core technology markup language of the internet
• It is used for structuring and presenting the content for World Wide Web.

A. New Features in HTML5


• The DOCTYPE declaration allows HTML5 files to be used for other web-based
programming languages, such as XML and SGML:
<!DOCTYPE HTML>
• The character encoding (CHARSET) declaration is simplified:
<META CHARSET="UTF-8">

B. New elements in HMTL5


• <ARTICLE> - Used to define an independent section, usually for text.
• <ASIDE> - Used to define content aside from the main page content.
• <AUDIO> - Used for audio playback.
• <CANVAS> - Used to draw visual graphics on the fly, via scripting (usually JavaScript).
• <DATALIST> - Specifies a list of predefined options for input controls.
• <EMBED> - Used to define a container for an external (non-HTML) applications.
• <FOOTER> - Used to define a footer for a document or section.
• <HEADER> - Used to define a header for a document or section.
• <NAV> - Used to define navigation section for hyperlinks.
• <PROGRESS> - Used to visually represent the progress of a task.
• <VIDEO> - Used for video content playback.

A. Web Forms in HTML5


• The Web Forms 2.0 specification allows for the creation of more powerful forms and more
compelling user experiences.
• Data pickers, color pickers, and numeric stepper controls have been added.
• Input field types now include email, search, and URL.
• New form methods, such as PUT and DELETE, are now supported.

II. Content Models


• In early versions of HTML, elements typically belonged in either the block level or inline
content model.
• HTML5 introduces seven (7) main content models to better segregate and/or process content:
o Metadata: Content that sets up the presentation or behavior of the rest of the content. These
elements are found in the head of the document.
Elements: <BASE>, <LINK>, <META>, <NONSCRIPT>, <STYLE>, <TITLE>
o Embedded: Content that imports other resources into the document.
Elements: <AUDIO>, <VIDEO>, <CANVAS>, <IFRAME>, <IMG>, <MATH>,
<OBJECT>, <SVG>
o Interactive: Content specifically intended for user interaction.

04 Handout 1 *Property of STI


[email protected] Page 1 of 4
SH1802

Elements: <A>, <AUDIO>, <VIDEO>, <BUTTON>, <DETAILS>, <EMBED>,


<IFRAME>, <IMG>, <INPUT>, <LABLE>, <OBJECT>, <SELECT>, <TEXTAREA>
o Heading: Defines a section header.
Elements: <H1>, <H2>, <H3>, <H4>, <H5>, <H6>, <HGROUP>
o Phrasing: This model has a number of inline level elements in common with HTML4.
Elements: <IMG>, <SPAN>, <STRONG>, <LABEL>, <BR/>, <SMALL>, <SUB>, and
more.
o Flow content: Contains the majority of HTML5 elements that would be included in the
normal flow of the document.
o Sectioning content: Defines the scope of headings, content, navigation, and footers.
Elements: <ARTICLE>, <ASIDE>, <NAV>, <SECTION>

III. HTML5 Page Structure

A. Page Structure in HTML5

Source: https://www.sololearn.com/Play/HTML/

B. The <HEADER> Element


• It is used inside the body tag to define text as belonging to a header section of an HTML5
document:
<!DOCTYPE HTML>
<HTML>
<HEAD></HEAD>
<BODY>
<HEADER>
<H1> Most important heading </H1>
<H3> Less important heading </H3>
</HEADER>
</BODY>
</HTML>

C. The <FOOTER> Element


• Defines a footer section in the document that can contain relevant information.
<FOOTER>…</FOOTER>
• The following information is usually provided between the footer element:

04 Handout 1 *Property of STI


[email protected] Page 2 of 4
SH1802

o Contact Information
o Privacy Policy
o Social Media Icons
o Terms of Service
o Copyright Information
o Sitemap and Related Documents

D. The <NAV> Element


• It is used to represent a section of a page that links to other pages or to certain sections
within the page. This would be a section with navigation links:
<NAV>
<UL>
<LI><A HREF="#">Home</A></LI>
<LI><A HREF="#">Services</A></LI>
<LI><A HREF="#">About us</A></LI>
</UL>
</NAV>

E. The <ARTICLE> Element


• It is a self-contained, independent piece of content that can be used and distributed
separately from the rest of the page or site.
• This element replaces the <DIV> element that was widely used in HTML4, along with an
id or class.
<ARTICLE>
<H1>The article title</H1>
<P>Contents of the article element </P>
</ARTICLE>

F. The <SECTION> Element


• An HTML5 element that is considered as the logical container of a page or article.
• Sections can be used to divide up content within an article; a homepage could have a section
for introducing the company, another for news items, and still another for contact
information.
• Each <SECTION> should be identified, typically by including a heading (H1-H6 element)
as a child of the <SECTION> element.
<ARTICLE>
<H1>Welcome</H1>
<SECTION>
<H1>Heading</H1>
<P>content or image</P>
</SECTION>
</ARTICLE>

G. The <ASIDE> Element


• It is a secondary or tangential content element which could be considered separate from but
indirectly related to the main content.
<ARTICLE>
<H1> Gifts for everyone </H1>
<P> This website will be the best place for choosing gifts </P>
<ASIDE>

04 Handout 1 *Property of STI


[email protected] Page 3 of 4
SH1802

<P> Gifts will be delivered to you within 24 hours </P>


</ASIDE>
</ARTICLE>

Reference:
SoloLearn.com – HTML. Retrieved on May 07, 2018 at
https://www.sololearn.com/Play/HTML/
W3schools.com – HTML5. Retrieved on May 15, 2018 at https://www.w3schools.com/html/
Educba.com – HTML5. Retrieved on May 20, 2018 at https://www.educba.com/html-versus-
html5/

04 Handout 1 *Property of STI


[email protected] Page 4 of 4

You might also like