Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass

The document discusses new features in HTML5 including improved semantics, multimedia support, and interactivity. It focuses on new semantic sectioning elements like <header>, <nav>, <section>, <article>, and <footer> that can be used multiple times and provide a more complex page structure than traditional <div> elements. The document also covers adding audio and video to pages using the new <audio> and <video> tags, and supporting different file formats across browsers.

Uploaded by

Febbraio Primo Dator

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOC, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

75 views4 pages

Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass

Uploaded by

Febbraio Primo Dator

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOC, PDF, TXT or read online on Scribd

You are on page 1/ 4

Advanced Online Media

Dr. Cindy Royal

Texas State University - San Marcos
School of Journalism and Mass

HTML5/CSS3
HTML5 is the most recent version of Hypertext Markup Language. It's evolution has been varied
and meandering. Early versions of HTML presented a limited number of tags that allowed for
development of basic Web pages. XHTML came along after HTML 4, and that added some
much needed structure to the language. Now HTML5 provides new features that offer improved
semantics, better multimedia support and improved interactivity and graphics. However, it will be
some time before all browsers support HTML5. So for now, be aware of the impending features
and integrate as applicable.

Semantics
HTML5 provides some great new structural tags that change the way you will use the generic
<div> in the future. The elements are called sectioning elements.

<header> - a container for a group of introductory or navigational aides.

<nav> - a container intended for major navigational elements.
<section> - a container to group together thematically related content.
<article> - much like <section>, this is a container for self-contained related content.
<aside> - a container for tangentially related content.
<footer> - a container that should hold information on the containing element.

Also, in html, tags used to be known as inline or block elements. Inline elements, or those that
can be contained within another element without creating a new “block”, are now called text-
level elements. Examples are <img> and <a>. Block elements forced a new block when they
are closed. They are now referred to as grouping elements. Examples include <p>, all level
headings (<h1> etc), <li>...

Tags are no longer considered deprecated, but many are now obsolete (font, frames, etc).

The new sectioning elements don't exactly correspond with the standard box model used in
traditional websites: a header with a logo and intro material in it, a navigation sections, content
areas and a footer. Instead, these elements support more complex page outlines for blogs,
social media formats and RSS feeds.

The important thing is to attempt to use the elements properly based on the meaning of the
content (with no regard to how it will look – that will be handled by CSS).

Traditionally, we may have used the following div model for a Web page:
<html>
<head>
...title and CSS links go in head of document
</head>
<body>
<div id=”header”>
</div>
<div id=”nav”>
</div>
<div id=”section”>
</div>
<div id=”footer>
</div>
</body>
</html>

Of course, the stylesheet defines what the page looks like.

The ids for the divs could have been named anything we wanted, but I applied the names to
correspond to the new structural tags. A sidebar could have also been added with
<div id=”aside”></div>

But HTML5 does not simply specify that you directly replace divs as above with the new tags.
Each has a particular meaning as stated above. And, with divs and ids, each name could only
be used once, to define the size and position of the box to which it corresponded. But in HTML5,
each of the new sectioning elements can be used multiple times, with ids or classes to
designate unique qualities.

You can do this, but it's not exactly the way the sectioning elements were meant to be used.

Some clarifications
You can use <header> for the top section of your page, but sections can also have headers.
Plus, your “navigational aides” should also go in the <header>

<header>//include image or heading for top of page

<nav> //include nav bar items
</nav>
</header>
<section>
<header>
<h2>head of section, like the title of blog</h2>
</header>
<p>Content for the section</p>
<footer>closing material, author info, date, etc.
</footer>
</section>
<footer>
</footer>

May use classes or ids to style these appropriately.

You are seeking to develop an outline that can be interpreted by things like RSS feeds, so
structure matters. Sometimes, you want items on the page to be eliminated from the outline. For
this, you use <hgroup>. This only recognizes the 1st element in the tag and ignores the rest in
regard to the page outline.

Rich Media
Audio
It can be as simple as this:
<audio src=”music.mp3></audio>

which creates a player without having to use a plugin. There are attributes like autoplay and
loop that can also be used (but don't). The attribute controls adds controls to the browser-
generated player, and there is JavaScript that allows you to customize the player's controls.

The biggest catch with audio is the file formats supported by browsers.

Safari – mp3
Firefox - .ogg

.ogg is a Vorbus codec – open source. So, you need to include both versions.

And, browsers like IE still need Flash, so the embed code can be added. It's also a good idea to
add the direct link to the audio file at the bottom of the stack, as a last resort.

Video
Video works much the same way, with the same type of attributes:

<video scr=”movie.mp4”></video>
You can add autoplay, loop or controls.You can also add width and height to control the size of
the player

You can also add a poster image to be in the player before the the video starts.
<video controls poster=”placeholder.jpg” width=”360” height=”240”>
<source src=”movie.mp4” type=”video/mpeg” />
<source src=”movie.ogv” type=”video/ogg />

</video>
And you would also add the Flash embed for IE and a direct link to the file, if you wanted to
support the widest range of browsers.

The presence of the <video> tag allows you to customize the look with JavaScript and CSS.

Dragon City - Lua 2
No ratings yet
Dragon City - Lua 2
14 pages
Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with Ease
From Everand
Hypertext Markup Language (HTML) Fundamentals: How to Master HTML with Ease
Steven Bright
No ratings yet
HTML5 2
No ratings yet
HTML5 2
10 pages
HTML
No ratings yet
HTML
5 pages
Keywords: Markup Language, Forms, Website, Web Page
No ratings yet
Keywords: Markup Language, Forms, Website, Web Page
17 pages
HTML 5.0: Tushar Shinde (B.E.I.T)
No ratings yet
HTML 5.0: Tushar Shinde (B.E.I.T)
8 pages
HTML5
No ratings yet
HTML5
31 pages
07 - HTML5 Lecture4
No ratings yet
07 - HTML5 Lecture4
57 pages
Html5 Quick Learning Quide
No ratings yet
Html5 Quick Learning Quide
6 pages
Chapter 4 - HTML 5 and JSP
No ratings yet
Chapter 4 - HTML 5 and JSP
53 pages
Wa Html5 PDF
No ratings yet
Wa Html5 PDF
33 pages
Wa Html5 PDF
No ratings yet
Wa Html5 PDF
33 pages
Wa Html5 PDF
No ratings yet
Wa Html5 PDF
33 pages
Wa Html5 PDF
No ratings yet
Wa Html5 PDF
33 pages
Wa Html5 PDF
No ratings yet
Wa Html5 PDF
33 pages
Chapter 1 Introduction To HTML, HTTP and PHP
No ratings yet
Chapter 1 Introduction To HTML, HTTP and PHP
78 pages
FALLSEM2021-22 ITE1002 ETH VL2021220100575 Reference Material I 18-Aug-2021 Introduction To HTML 5
No ratings yet
FALLSEM2021-22 ITE1002 ETH VL2021220100575 Reference Material I 18-Aug-2021 Introduction To HTML 5
56 pages
WT 3
No ratings yet
WT 3
51 pages
HTML 5 and CSS3
No ratings yet
HTML 5 and CSS3
40 pages
Day1 html5 Intro New
No ratings yet
Day1 html5 Intro New
60 pages
Unit 2
No ratings yet
Unit 2
26 pages
Wa Html5 PDF
No ratings yet
Wa Html5 PDF
33 pages
Wa Html5 PDF
No ratings yet
Wa Html5 PDF
33 pages
Wa Html5 PDF
No ratings yet
Wa Html5 PDF
37 pages
HTML
No ratings yet
HTML
35 pages
70-480 Exam Notes
No ratings yet
70-480 Exam Notes
19 pages
HTML, Css & Js Guest Ppt
No ratings yet
HTML, Css & Js Guest Ppt
219 pages
HTML and Css
No ratings yet
HTML and Css
27 pages
MM211 - Lecture 03 HTML 1
No ratings yet
MM211 - Lecture 03 HTML 1
58 pages
Glossary v3
No ratings yet
Glossary v3
4 pages
Lenguaje de Marcado
No ratings yet
Lenguaje de Marcado
53 pages
FU_Lecture_HTML5_01
No ratings yet
FU_Lecture_HTML5_01
30 pages
html5_note
No ratings yet
html5_note
110 pages
HTML5 Tutorial .Powerpoint
100% (1)
HTML5 Tutorial .Powerpoint
20 pages
HTML 5&css 3
No ratings yet
HTML 5&css 3
158 pages
UNIT 1-HTML5&CSS3
No ratings yet
UNIT 1-HTML5&CSS3
40 pages
HTML and Css Assignment (1)
No ratings yet
HTML and Css Assignment (1)
39 pages
HTML5
No ratings yet
HTML5
32 pages
Documento 1 de HTML5
No ratings yet
Documento 1 de HTML5
20 pages
Web Design and Development Lecture 6 - HTML5
No ratings yet
Web Design and Development Lecture 6 - HTML5
42 pages
IntroHTML Part1
No ratings yet
IntroHTML Part1
37 pages
HTMLCSSJS 3
No ratings yet
HTMLCSSJS 3
113 pages
Html5: QuickStudy Laminated Reference Guide
From Everand
Html5: QuickStudy Laminated Reference Guide
Robin Nixon
5/5 (1)
Hypertext Markup Language (HTML) : Structure of HTML Documents
No ratings yet
Hypertext Markup Language (HTML) : Structure of HTML Documents
8 pages
HTML5 Ibm
No ratings yet
HTML5 Ibm
22 pages
WT 1st Unit
100% (1)
WT 1st Unit
69 pages
unit1_0
No ratings yet
unit1_0
39 pages
Html5 Feature of Internet
No ratings yet
Html5 Feature of Internet
27 pages
Unit 2WD
No ratings yet
Unit 2WD
8 pages
Chapter 2.part1
No ratings yet
Chapter 2.part1
62 pages
Objective: Introduction To HTML: Prerequisites
No ratings yet
Objective: Introduction To HTML: Prerequisites
35 pages
James Learning Javascript Programming
From Everand
James Learning Javascript Programming
James Lombard
No ratings yet
Web Devlopment
From Everand
Web Devlopment
Netra
No ratings yet
HTML5 & CSS3 For Beginners: Your Guide To Easily Learn HTML5 & CSS3 Programming in 7 Days
From Everand
HTML5 & CSS3 For Beginners: Your Guide To Easily Learn HTML5 & CSS3 Programming in 7 Days
i Code Academy
4/5 (11)
CSS Grid Layout: 5 Practical Projects
From Everand
CSS Grid Layout: 5 Practical Projects
Craig Buckler
No ratings yet
HTML in 30 Pages
From Everand
HTML in 30 Pages
U.Q. Magnusson
4.5/5 (14)
HTML& CSS for Beginners: Learn the Fundamentals of Computer Programming
From Everand
HTML& CSS for Beginners: Learn the Fundamentals of Computer Programming
Jo Foster
No ratings yet
Coding JavaScript
From Everand
Coding JavaScript
Tom Henricksen
No ratings yet
Cooking up the web with HTML and JavaScript
From Everand
Cooking up the web with HTML and JavaScript
Tom Henricksen
No ratings yet
Html5 for Beginners: A Step-By-Step Guide
From Everand
Html5 for Beginners: A Step-By-Step Guide
Zack Mark Lakeman
No ratings yet
Quick Start Basic HTML and JavaScript
From Everand
Quick Start Basic HTML and JavaScript
Tom Henricksen
No ratings yet
HAP 1 Notes
No ratings yet
HAP 1 Notes
16 pages
Annexure II (Project Proposal) Sachin v2
No ratings yet
Annexure II (Project Proposal) Sachin v2
3 pages
Isogen Symbol Keys
No ratings yet
Isogen Symbol Keys
93 pages
Brujah - White Wolf Wiki - Fandom
No ratings yet
Brujah - White Wolf Wiki - Fandom
131 pages
Taarak Mehta
No ratings yet
Taarak Mehta
1 page
Sun Silk Gang of Girls
No ratings yet
Sun Silk Gang of Girls
17 pages
Chem Pu2 DWD Pu2
No ratings yet
Chem Pu2 DWD Pu2
4 pages
Chandigarh TGT Paper Solution
No ratings yet
Chandigarh TGT Paper Solution
7 pages
Videobb Séries
No ratings yet
Videobb Séries
4 pages
2013 Marty Orgel Resume March
No ratings yet
2013 Marty Orgel Resume March
2 pages
Conjuring Movie Review
No ratings yet
Conjuring Movie Review
10 pages
Investigative Reporting Syllabus
No ratings yet
Investigative Reporting Syllabus
9 pages
Day 20 (Time and Work 01) (51 Days 51 Marathon)
No ratings yet
Day 20 (Time and Work 01) (51 Days 51 Marathon)
4 pages
History Through Mindmaps
No ratings yet
History Through Mindmaps
11 pages
JEE Questions Determinants
No ratings yet
JEE Questions Determinants
10 pages
District Calendar
No ratings yet
District Calendar
1 page
12th Maths Important Questions PDF Download
100% (2)
12th Maths Important Questions PDF Download
2 pages
Test 2
No ratings yet
Test 2
5 pages
Deep Purple Soldier of Fortune Guitar Chords
No ratings yet
Deep Purple Soldier of Fortune Guitar Chords
3 pages
Die Gotische Bibel Gotisch-Griechisch-Deutsches Wörterbuch Streitberg 1910
No ratings yet
Die Gotische Bibel Gotisch-Griechisch-Deutsches Wörterbuch Streitberg 1910
204 pages
Brianna Lee Hintze: Education
No ratings yet
Brianna Lee Hintze: Education
1 page
LINGUINI WHY! ? - (YTP) Ratasoup REACTION! - YouTube
No ratings yet
LINGUINI WHY! ? - (YTP) Ratasoup REACTION! - YouTube
1 page
Cartile LuJimmy
No ratings yet
Cartile LuJimmy
10 pages
School Bus Graveyard Weed House - Google Search
No ratings yet
School Bus Graveyard Weed House - Google Search
1 page
Envelope Size Chart
No ratings yet
Envelope Size Chart
1 page
Onyenweanyi Mee Ebere - FadaBarto
No ratings yet
Onyenweanyi Mee Ebere - FadaBarto
1 page
Rebecca's Resume
No ratings yet
Rebecca's Resume
3 pages
Module 4 Year 1 A
No ratings yet
Module 4 Year 1 A
10 pages
Yahoo and Microsoft Notification Award
No ratings yet
Yahoo and Microsoft Notification Award
2 pages