Scribd
Upload
10 views

HTMLStructure 2

The document discusses the structure and semantics of HTML documents. It covers the head and body sections and describes common elements like headings, paragraphs, lists, and images. Guidelines are provided for search engine optimization with meta tags and titles.

Uploaded by

pravesh koirala
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

HTMLStructure 2

The document discusses the structure and semantics of HTML documents. It covers the head and body sections and describes common elements like headings, paragraphs, lists, and images. Guidelines are provided for search engine optimization with meta tags and titles.

Uploaded by

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

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.
&amp) instead of just &
 Same thing for < or > since these are used for tags
Common HTML character entities
Entity Character
&amp; &
&lt; <
&gt; >
&copy; ©
&reg; ®
&trade; ™
&cent; ¢
&deg; º
&plusmn; ±
&lsquo; ‘ (opening single quote).
&rsquo; ’ (closing single quote or apostrophe).
&ldquo; “ (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)

You might also like