Select Lesson
section
, header
, footer
Lists Quiz
5 min
Lesson 9. Google style guide for HTML
15 min
Google Style Guide for HTML
10 min
Style guide activity (classroom)
10 min
Page structure
5 min
Structural tag—section
5 min
Structural tag—header
, footer
5 min
Lesson 10. header
, footer
& section
tags
15 min
Section Quiz
5 min
head
, header
and heading
elements
5 min
Label the Parts of a Web Page
5 min
Sections HTML/CSS
Level Onesection
, header
, footer
Lists Quiz
5 min
Lesson 9. Google style guide for HTML
15 min
Google Style Guide for HTML
10 min
Style guide activity (classroom)
10 min
Page structure
5 min
Structural tag—section
5 min
Structural tag—header
, footer
5 min
Lesson 10. header
, footer
& section
tags
15 min
Section Quiz
5 min
head
, header
and heading
elements
5 min
Label the Parts of a Web Page
5 min
60 min
Structural tags—section
, header
, footer
There are conventions for the best way to lay out your code for it to be easy for others to read and quick to use. Structural tags, like <section></section>
, are used to organize your text.
Code Avengers Quiz
Lists Quiz
HTML/CSS 1 Lesson
Lesson 9. Google style guide for HTML
Concepts
Google Style Guide for HTML
The Google Style Guide is a set of rules for how to write code in a way that is easy for others to read.
These rules are the style guidelines followed by Google Code Projects (
code.google.com
) and we should use them too. It's best practise to follow these conventions.
One of the recommendations by the Google style guide is to not use all optional tags. For example, the following basic webpage includes all optional tags:
<!DOCTYPE html>
<html>
<head>
<title>Hello HTML</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Now if we remove all the optional stuff, as the Google style guide says we should, we get:
<!DOCTYPE html>
<title>Hello HTML</title>
<p>Hello World!
The second example is less cluttered and so it is much easier to read.
Activity
Style guide activity (classroom)
Get into a group of 4 and go to the Google style guide site.
Each of you pick a different rule and write it in a shared document or on paper.
Write an example of not following the rule and and an example following the rule that is different from the instructions.
Share that your example with each other.
Can any of you improve or help each other? Share you group's examples with the class.
Concepts
Page structure
In this section we will start to look at the overall structure of the HTML content.
1. Header
<header>
Webpage heading, icon, navigation bar
</header>
2. Navigation
<nav>
links to other web pages
</nav>
3. Sidebar Section (not shown)
<section id="sidebar1">
Can be a nav bar, or often info that you always want people to be able to see, floats to the left.
</section>
4. Section (main)
A webpage can have different sections, they usually contain a heading and text
<section id="main">
<h2>Part 1</h2>
<p>It all began...
</section>
5. Aside
Asides are used for slightly off topic comments to the readers. Usually they form a sidebar.
<aside>
<h2>Random Encounter</h2>
<p>Speaking of tea, you will never guess who I saw at the tea house....
</aside>
6. Footer
Information about author, contact info, date, copyright ©/Creative Commons →
<footer>
Webpage written by Code Avengers, 2016
</footer>
HTML5 Doctor → is an older website with useful articles to read about HTML 5. Below are some useful links to help your understanding of when to use structural tags and what semantics are.
Here is a link to a flowchart on using sectioning tags → by @riddle and @boblet
To better your understanding read this article "Let’s Talk about Semantics"→, by Mike Robinson, published Wednesday, April 18th, 2012
Concepts
Structural tag—section
The HTML <section></section>
tags are put around part of a page that is about the same topic. It is used to thematically break down your web page.
A thematic break down: A webpage on "Sciences taught at school" might have sections on Earth Science, Chemistry, Biology and Physics.
A webpage can be made up of many sections which help to give structure, organization and hierarchy to a web page, making it easier for users to browse.
Concepts
Structural tag—header
, footer
The header and footer elements:
- header tags are put around the site logo, heading text and navigation links that appear at the top of the page.
- footer tags are put around information at the bottom of the page such as copyright info, author's name, contact information and navigation links.
Footer section <footer> </footer>
Footer
is a
structural
tag used for the banner at the bottom of the webpage. It usually contains website information like author, date modified, links to around the site, contact information, whatever you need.
Required attributes | None |
Tag placement | Bottom of page (body) |
Tag type | Start and end tag |
Header section <header> </header>
Header
is a
structural
tag used for the banner at the top of the webpage. It usually contains the name of the web page, a logo and a navigation bar to the rest of the website.
Required attributes | None |
Tag placement | Bottom of page (body) |
Tag type | Start and end tag |
HTML/CSS 1 Lesson
Lesson 10. header
, footer
& section
tags
Lets actually learn these concepts, rather than just read about them.
Code Avengers Quiz
Section Quiz
Extension: Concepts
head
, header
and heading
elements
Heads up!
We have learned a lot of elements that sound similar. Don't be confused!
Head <!--optional <head></head>-->
The head element is an element that goes around the content at the top of our code.
The things in <head>
element are invisible on our webpage but do important things.
We do not write the <head></head>
tags but it is important to know that it is there.
We write all the things for the computer to read at the top of the page. <title>
, <meta>
, <style></style>
, <link>
Header <header></header>
This element is used at the top section on the webpage- the visible part. It usually contains a heading, logo and other things.
It is written at the top of the <body>
section.
Heading tags <h1></h1>, <h2></h2>, ... <h5></h5>, <h6></h6>
There are six heading
tags that should be used in a hierarchy.
<h1>h1 Is the first heading, usually the title of the page</h1>
<h2>h2 should be used next as a heading.</h2>
<h3></h3>
Let us see an example.
Here is the relevant code for our webpage that is keeping a food diary for days of the week.
Notice that the head content is invisible, our header section has a grey background and see the hierarchy of the headings
.
Code Avengers Quiz
Label the Parts of a Web Page
Resources
Guide
- download
- new file
- upload media
- rename
- delete
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+F+F