Scribd
Upload
19 views

Web Development

The document discusses HTML5 semantics and semantic tags. It introduces new HTML5 elements like <header>, <footer>, <nav> and <aside> that were added to improve semantics over generic tags like <div> in HTML4. It also discusses semantic concepts like linguistic semantics, semantic units and surveys done on semantic issues with earlier HTML versions.

Uploaded by

ccctechvoccarcar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

Web Development

The document discusses HTML5 semantics and semantic tags. It introduces new HTML5 elements like <header>, <footer>, <nav> and <aside> that were added to improve semantics over generic tags like <div> in HTML4. It also discusses semantic concepts like linguistic semantics, semantic units and surveys done on semantic issues with earlier HTML versions.

Uploaded by

ccctechvoccarcar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Lesson 2: HTML5 Semantics

This work by Google Web Academy is made available under the terms of the Creative Commons
Attribution 3.0 Unported license (http://creativecommons.org/licenses/by/3.0/). You can change it,
transmit it and show it to other people; just always give credit to Google ("Attribution"). This license
does not cover use of the Google Brand Features, which requires Google's explicit written consent and is
subject to Google's brand guidelines, which you can find here:
http://www.google.co.uk/permissions/guidelines.html

Trademarks

Names marked ™ or ® and other company and product names may be trademarks or registered
trademarks of their respective vendors or organizations.

Publication Information

Printed: November 2012

Information in this guide is subject to change without notice and does not constitute a commitment on
the part of Google Web Academy. It is supplied on an “as is” basis without any warranty of any kind,
either explicit or implied. Information may be changed or updated in this guide at any time.

Contents

Opening
Quiz
HTML5 Semantics
HTML5 Semantic Tags for Structure
Challenge
Roadmap
Key Terms
Linguistics
Semantic Units
Semantic Issues
New Elements
Obsolete & Repurposed Elements
Simplicity: <script>
Simplicity: charset
Simplicity: <html>
Simplicity: <doctype>
<section>
<article>
<header>
<hgroup>
<footer>
<nav>
<aside>
HTML5 vs. HTML4
Browser Support

Lesson 2: HTML5 Semantics


Opening
Quiz

Please answer the question below based on the HTML code in this slide. Choose only one
option.

What’s the problem with this HTML code?

A) There are too many divS.

B) The divS have no inherent meaning.

C) It looks good to me.

D) I thought this was an HTML5 course.

E) “Bottom” and “top” should be named “footer” and “header”.


Lesson 2: HTML5 Semantics
HTML5 Semantics Tags for Structure

Amongst other difficulties, deciphering the meaning of a <div> element when reading HTML
code has always been an issue. For this reason HTML developers introduced several new tags in HTML5
to improve upon the last major version, HTML4.

In this module, you will learn to:

Distinguish between new and obsolete HTML elements.


Choose the best element for good semantics.
Structure pages with new elements.

Challenge
In this course, you work at a web technology company that has undergone hard economic
times. The CEO, your boss, is considering letting you go because he doesn’t have the income to pay
everyone, and the company has had negative profits the last two quarters. The CEO is pondering
whether or not to shut down. At the end of the week, the CEO will also make a decision about whether
he will keep employing you or let you go. It all depends on the latest app you are making. There are two
groups coming in to see the app: one potential customer is considering purchasing the app from your
company, the other is considering purchasing the company and turning it around if they like the app.

The are coming in tomorrow to see the progress on the structure of the app which uses HTML5.
To be ready to show them the structure tomorrow afternoon, you have to finish it by TOMORROW
MORNING!

Roadmap
Key Terms
Throughout this lesson, the terms shown on this slide are used. Since this is a semantics class,
let's make sure that everyone has the same understanding about what they mean.

Linguistics

In linguistics, semantics is the study of meaning.

As was seen in the quiz, each div has a different meaning, though the HTML5 code uses the
same <div> tag in each case.

Therefore, semantics in HTML refers to the process and result of giving structure and meaning to
web page content.

Questions to Consider

What are some ways that structure and meaning were given to each div in the quiz?
How can semantics be improved?

Semantic Units
Two units of HTML semantic structure are tags and elements.

Tags are commands enclosed within “<>” signs. Tags describe how a web page should be
formatted or define a hyperlink. Examples include <div> (which has no specific meaning) and <p> which
means paragraph.

Elements include a start (opening) tag, the content to be formatted, and an end (closing) tag.
Some elements do not use end tags. Let’s create <p> and <div> elements.

<p>This is a p element.</p>

<div>This is a div element.</div>

Semantic Issues
In 2005, Google conducted a survey in an effort to make improvements upon earlier versions of
HTML. In this survey, Google analyzed one billion pages to discover what class names were used on
<div> elements as well as other elements.

Three years later in 2008, Opera MAMA conducted its own survey. Opera MAMA analyzed
three million URLs to discover what the most-used class names and IDs were.

Both surveys resulted in two findings. First, developers lacked specific elements to mark up
web pages. Secondly, because of the first problem, developers just used the <div> element and gave
meaning to each <div> element using descriptive classes and IDs.

You might also like