More General HTML Structure
Head section <head> element
Title tag
Meta tags
Favicon
Links to styles and scripts
Title tag
<TITLE> will be used by search engines for SEO and appears in the
results of a search
SEO Guidelines for title tags:
Always code a title tag in the head section.
Make it unique for each page
The title should include the one or two keywords that you
want the page ranked for.
Max 65 characters
Favicon
Appears to the left of the title
Typically call image favicon.ico
The required rel attribute specifies the relationship between the
current document and the linked document/resource.
Has two attributes: rel (relationship) and href
<link rel="icon" href="images/favicon.ico">
Metadata
1. Need to have charset meta for HTML5
<meta charset=utf-8">
2. Next two tags used for search engine optimization:
a. Description
<meta name="description" content="A yearly lecture series with
speakers that present new information on a wide range of subjects”>
b. Keywords
<meta name="keywords" content="san joaquin, town hall, speakers,
lectures, luncheons">
**Must always include in every webpage and needs to be different**
SEO Guidelines for meta tags
Be clear, indicate what the page is about
No more than 6 keywords
Algorithms change frequently for SEO but these provide a good
foundation that most algorithms use
Body Section
There are 2 different approaches you will see in the body section
1. Div/Span is the precursor to HTML5 and you will run across these
2. HTML5 Semantic elements
A block element for structuring a web page
• Div
o Block element to divide your webpage into divisions
o Used before preset HTML5 elements
o id attribute is often used to describe/identify the type of
segment you are working with (will also be used tomorrow
for CSS)
• Span
o The <span> tag provides no visual change by itself.
o Used in conjunction with CSS (have an id attribute)
o An inline element for formatting text
HTML5 semantic elements
Improves on previous structure of webpages
Easier to see the structure of a page
There may still be times you use the div tags but try to stay away when
possible
Below is from: http://www.expression-web-tutorial.com/Structural-
Semantic-Elements.html#.VUjhD45Viko
<header>
“Since most web pages have a header, the HTML5 specification includes
the element because it is so common. Usually, the header is at the top
of a web page, but now you can have a header in any element on your
web page.”
<nav>
“The Nav element Is meant to hold a set of hyperlinks that link to
another page or another part within the same page. Think of the
horizontal navigation menu in my video tutorials. Instead of using a div
tag, we can simply use the nav tag. ”
<section>
“The section element represents a generic section of a document or
application. A section, in this context, is a thematic grouping of content,
typically with a heading. Examples of sections would be chapters, the
various tabbed pages in a tabbed dialog box, or the numbered sections
of a thesis. A Web site's home page could be split into sections for an
introduction, news items, and contact information.”
<article>
“ A "self-contained composition" within a page or application. This
content should be able to stand on its own as if it was independent of
its surroundings. ”
<aside>
“a section of a page that consists of content that is tangentially related
to the content around the aside element, and which could be
considered separate from that content. Such sections are often
represented as sidebars in printed typography. This element can be
used as a sidebar, but it's not to be used solely as a sidebar. The
content within an aside element must be tangentially related to the
nearby info.”
<footer>
“The footer tag should be self evident at this point. It is used to define
a footer section of the page or of an other of your page. We are not
limited to one footer per page. Again, think of a blog that has several
blog posts. Each Post can have a header, footer, article, section and so
on. ”
Additional HTML Tags
Headings and Paragraphs
Called block elements and are typically on separate line
h1 (200% of base font size), h2, h3, h4, h5, h6 (67%), p
SEO Rules as related to h tags:
Use to show importance, try to incorporate keyword(s);
Only 1 h1 per page;
Don’t use for size, use a CSS style for size
Inline elements for formatting text
Done within an element (e.g. paragraph <p>)
Does not need a new line
Common elements (other elements can also be found on p91):
i – italics (you may also use <em> or emphasis)
b - bold
sub - subscript
sup - superscript
br - break
Character Entries:
Special Characters
Starts with & which is why you should use the entity for this (i.e.
&) instead of just &
Same thing for < or > since these are used for tags
Common HTML character entities
Entity Character
& &
< <
> >
© ©
® ®
™ ™
¢ ¢
° º
± ±
‘ ‘ (opening single quote).
’ ’ (closing single quote or apostrophe).
“ “ (opening double quote).
Ordered and Numbered Lists
• <ul> - unordered list
• <ol> - ordered list
• <li> - list element
Example
<ul>
<li>HTML5</li>
<li>JavaScript</li>
<li>Jquery</li>
</ul>
<ol>
<li>HTML5</li>
<li>JavaScript</li>
<li>Jquery</li>
</ol>
Image (<img>) elements
• src
• alt (required => read by screen readers for users with disabilities)
• height (in pixels)
• width (in pixels)
Example: <img src="w3schools.jpg" height="142" />
Images supported by most browsers: jpeg (photos and scans), gif
(logos), png (has aspects of both)
