Basic HTML An Introduction To HTML For Bloggers

‘Basic HTML: An Introduction to HTML for bloggers’
By Kevin Muldoon
About Blogging Tips

Blogging Tips is a daily blogging advice blog which specialises in
helping bloggers create, develop, promote and make a living from their
blogs.
Visit www.bloggingtips.com for more information about our blog,

newsletter and discussion forums.
About The Author

Kevin Muldoon is the founder of Blogging Tips
and oversees all site developments.
He currently lives in central Scotland and enjoys

travelling, music, movies, keeping fit and reading.
He continues to blog for Blogging Tips on a
weekly basis as well as his personal blog
KevinMuldoon.com.
Copyright
All rights reserved. No part of this book can be reproduced, copied,
stored in a retrieval system or transmitted over the web without prior
approval of BloggingTips.com. Brief quotations embedded in reviews
are permitted.
© 2009 BloggingTips.com www.bloggingtips.com Page 2 of 63

By Kevin Muldoon
Who is this book for?

This book was written for bloggers with no prior knowledge of HTML.
It is not meant, nor was ever intended to be, an extensive course on the
HTML language.
However, should you want to develop your HTML skills further after
reading this e-book, I encourage you to check out the further reading
section at the end of the book for links to advanced HTML Tutorials.
I'm a blogger, why do I need to know HTML?

Due to free hosting solutions like Blogger and WordPress.com, it is
possible to publish your thoughts on the internet without knowing
HTML. However, if you want more control over how your blog posts
are shown and how your blog design is displayed, you need to have a
basic understanding of HTML. It will help also help you quickly
identify basic coding errors on your blog.
Thankfully, HTML is an incredibly easy programming language to

learn and once you know the basics you will be able to do basic
customisations to your blog design without hiring a designer.
About This Book

Book
I recommend those who want to learn HTML from this e-book to
download the BloggingTips HTML Cheat Sheet. This handy one page
pdf document has a list of most of the common HTML 4 tags and

By Kevin Muldoon
should be a useful reference when learning the HTML language.
Also, please note that this book was written in UK English. Therefore,
those who are used to American English may notice some slight
differences in spelling like colour instead of color and emphasise
instead of emphasize.
Acknowledgements
Last but not least, I would like to thank the following people who have
helped me release this e-book:
• Sarah Anderson from Stuff By Sarah and David Anderson from

Phoob for proofreading this e-book and giving some much needed
feedback.
• The Blogging Tips Writing Team. If they were not writing great
articles for the blog everyday, I wouldn’t have had the time to
write this e-book!
• The Blogging Tips readers!! Yes I know, it’s cheesy; but seriously,
I wouldn’t have had the passion or drive to write this e-book in the
first place if it wasn’t for the great feedback from you all.

Table of
of Contents
ABOUT BLOGGING TIPS ............................................................. 2
ABOUT THE AUTHOR ................................................................. 2
COPYRIGHT ........................................................................... 2
WHO IS THIS BOOK FOR? ........................................................... 3
I'M A BLOGGER, WHY DO I NEED TO KNOW HTML?............................... 3
ABOUT THIS BOOK................................................................... 3
ACKNOWLEDGEMENTS ............................................................... 4
TABLE OF CONTENTS ................................................................ 5
CHAPTER 1: AN INTRODUCTION TO HTML ............................................... 7
A BRIEF HISTORY OF HTML ........................................................ 7

HTML FILE EXTENSIONS ............................................................ 9
HTML EDITORS ...................................................................... 9
THE WYSIWYG EDITOR.......................................................... 10
CHAPTER 2: TAGS, ELEMENTS & ATTRIBUTES ..................................... 12
TAGS ................................................................................ 13
ELEMENTS .......................................................................... 15
ATTRIBUTES ........................................................................ 17
NESTING TAGS ..................................................................... 17
CHAPTER 3: THE BASIC STRUCTURE OF AN HTML PAGE.................... 19
THE DOCTYPE .................................................................... 22

CHAPTER 4: BASIC STYLING WITH HTML ............................................... 24
COMMON ELEMENTS WHICH STYLE CONTENT ................................... 25

DEFINING COLOURS ............................................................... 28
CHAPTER 5: LISTS..................................................................................... 31
ORDERED AND UNORDERED LISTS ............................................... 32

DEFINITION LISTS ................................................................. 33
CHAPTER 6: HYPERLINKS ........................................................................ 35
By Kevin Muldoon
THE EMAIL LINK.................................................................... 36

LINKING WITHIN A PAGE OR DOCUMENT .......................................... 37
OPENING LINKS IN A NEW WINDOW OR TAB ................................... 39
CHAPTER 7: IMAGES................................................................................. 40
LINKING WITH IMAGES ............................................................ 41

IMAGE TYPES ....................................................................... 42
CHAPTER 8: TABLES................................................................................. 43
SPANNING COLUMNS & ROWS .................................................... 47

CHAPTER 9: ADDITIONAL HTML INFORMATION..................................... 50
CHARACTER ENTITIES ............................................................. 50

COMMENTING ....................................................................... 51
VALIDATION ........................................................................ 52
HTML VS XHTML ................................................................ 53
CHAPTER 10: A BRIEF NOTE ON CSS ..................................................... 54
A SIMPLE EXAMPLE OF CSS...................................................... 55

LINKING TO YOUR CSS STYLES .................................................. 56
DIFFERENCE BETWEEN IDS AND CLASSES ........................................ 57
CSS OVERVIEW .................................................................... 59
CHAPTER 11: FURTHER READING .......................................................... 60
COMMUNITY SUPPORT ............................................................. 62

HTML REFERENCE & TUTORIAL WEBSITES ..................................... 63

CHAPTER 1: AN INTRODUCTION TO
HTML
Hypertext Mark-up Language, more commonly known in its

abbreviated form HTML, is the mark up language which is widely used
to display web pages on the internet.
A Brief History of HTML

The first official document which showed users how to use HTML was
called ‘HTML Tags’. It was released in 1991 by a physicist called Tim
By Kevin Muldoon
Berners-Lee and contained information about 22 HTML elements.
The language was refined during the 1990’s. The rules for HTML 2.0
were published in 1995, for 3.2 in early in 1997 and for 4.0 later that
same year. HTML 4.01 is the most up to date version of the language
though there has been some slight changes since 1997, though nothing
that is worth mentioning in this book.
In the early days of the web most internet users browsed the web with
either Netscape Navigator or Internet Explorer. Unfortunately, the
developers behind these browsers had different ideas on how to
progress the language which resulted in some new tags working in
Netscape Navigator and not on Internet Explorer (and vice versa). As a
result, many web pages looked fine in one browser but completely
messed up on another.
Over the years many HTML elements have been deprecated or

removed completely. Deprecation means that although an element may
work, it is best practice not to use it. Essentially, depreciation allows the
language to progress but provides backwards compatibility for existing
HTML based pages.
Using deprecated HTML tags usually results in a page not displaying

correctly in some browsers.
Out of the 22 elements which were mentioned in the original ‘HTML

Tags’ document, only 13 remain in HTML 4.

By Kevin Muldoon
HTML File Extensions

Pure HTML pages have the file extension .html or .htm. Both
extensions work exactly the same way in all browsers.
It is not common for a programming language to have two file

extensions. Two file extensions for HTML arose because MS DOS,
Microsoft’s’ original operating system, could only handle 3 character
file extensions. Hence .html had to be shortened to .htm by those who
used Microsoft operating systems.
UNIX and Linux based systems did not have this 3 character file
extension limit therefore were able to use .html.
HTML Editors
You can edit an HTML document in just about any editor. Most of my
first websites were coded directly in notepad however I soon realised
the limitations with using such basic editors.
HTML editors make editing much easier by colour coding your

document into separate areas , adding line numbers for referencing
specific lines of code and highlighting incorrect code and much much
more.
Thankfully most HTML editors are free! For the last 8 years I have
used TextPad to code and edit my websites though there are some great
alternatives available like NotePad++, First Page, CoffeeCup and
PageBreeze. There are literally hundreds of free HTML editors

By Kevin Muldoon
available so I recommend trying a few out until you find one which suits
you.
The WYSIWYG Editor

Most bloggers write their blog post in what is known as a ‘What
You See Is What You Get’ text editor (WYSIWYG). This visual editor
allows people with no knowledge of HTML to write and style their blog
posts easily.
Using the WYSIWYG is very similar to using WordPad or Microsoft

Word, and the addition of this editor to blogging scripts was no doubt a
big factor in the growth in blogging itself as it allowed those with no
programming knowledge to quickly and easy publish content on the
web.
In the background the editor converts everything you type into HTML.
Most WYSIWYG editors allow you to view your blog post visually or
see the raw HTML code.
If you have been using the WYSIWYG editor to write your posts and a
pre made template for your blog design, then you may not have had too
much exposure to the HTML language.

By Kevin Muldoon
Therefore I encourage you all to view the source of your own blog to
see the code which drives your website. In most browsers the ‘View
Source’ link is in the tools section of your browser menu.
No doubt the source code your blog generates looks foreign to you but
don’t worry, you will soon see how it all breaks down and realise that
HTML isn’t a difficult language to learn ☺

CHAPTER 2: TAGS, ELEMENTS &
ATTRIBUTES
An HTML document consists of tags, elements and attributes. In this

chapter I will explain what these are in detail.
If you have been blogging for a while and have a basic understanding of
HTML already, feel free to skip this chapter and refer to it at a later
date.
• Tags: Tags are used to mark-up certain information to be

displayed in a browser. For the content to be marked-up it has
to have an opening tag (<tag>) before the content and a closing
tag (</tag>) afterwards.
By Kevin Muldoon
• Elements: An element consists of an opening tag, content and

a closing tag. For example: <strong>Bold Text</strong>
would be classed as an element (this HTML produces the
output Bold Text).
• Attributes: An element can have one or several attributes.

Attributes are placed within tags and are used to determine
certain values of the HTML element.
Tags
In HTML you control text and information
by wrapping tags around them. Tags begin
with a less than symbol (<) and end with a
more than symbol (>) i.e. <tagname>.
All elements in HTML must have an

opening tag and a closing tag i.e.
<tagname>content</tagname>. A closing
HTML tag looks the same as an opening tag
except it has a forward slash (/) directly
before the tag name.
I will illustrate this with an example. In this example I have used the
strong tag (<strong>), which changes the text font to bold; the
emphasise tag (<em>), which changes the text font to italic; and the
paragraph tag<p>, which aligns and spaces the content with the
surrounding area.

By Kevin Muldoon
Code Example:
<p>I like to <em>emphasise</em> some words and
<strong>strongly emphasise</strong> others.</p>
Output:
I like to emphasise some words and strongly emphasise others.
If any of the tags were not properly closed, the output would not be
correct. In the example below the emphasise tag was not closed
therefore any text displayed after the opening <em> tag will be
displayed in italic (in most browsers).
Code Example:
<p>I like to <em>emphasise some words and
<strong>strongly emphasise</strong> others.</p>
Output:
I like to emphasise some words and strongly emphasise others.
Forgetting to close a tag is a common mistake that beginners make so I

encourage you all to get in a good habit from the start and always make
sure you close your HTML tags.
There are several HTML tags which do not need to be closed. These
are known as Empty Tags and do not need to be closed as they are not
used to wrap around and control any content.
The most common ones used are the Break Line tag (<br>) and the

By Kevin Muldoon
Horizontal Reference tag (<hr>).
• The Break Line tag (<br>) ensures that any text/content which
follows is started on the next line.
• The Horizontal Reference tag (<hr>) produces a line across

your content area. It is commonly used to separate your content
into different parts.
An example of the HR tag in action on BloggingTips
Elements
In HTML, an element refers to a section of your page and includes the
opening tag, the content which is being marked-up and the closing tag.
Although technically speaking an element can refer to any area of your

page, the term is more commonly used to describe the structural
elements of an HTML web page.
All of these elements are required to build a webpage on the internet.
* Note, technically you could write a valid HTML page with just the
<html> tag however it would have no title and no content, two things which
are essential to any webpage!!

By Kevin Muldoon
• The Document Declaration: The Doctype is defined at the

top of an HTML page. It lets the browser know what version of
HTML you are coding in.
• The <html> element: <html> is the first HTML tag of any

HTML document. It tells the browser that all information
contained within the opening <html> tag and the closing
</html> is coded in HTML. As such, </html> is the last
HTML tag in an HTML page.
• The <head> element: The <head> tag comes directly after the
<html> tag and before the <body> tag. The tags used within
this element are not displayed on your webpage. This element is
used to explain to the browser what should happen before the
page is loaded including meta description (meta tags etc), pre
loading images, specifying the web page title, linking to the
websites CSS stylesheet and much more.
• The <title> element: The title element is placed within the

<head> element. The words between the opening <title> tag
and closing </title> tag will be displayed at the top of the page
in your browser.
• The <body> element: The <body> element comes after the

<head> element and contains all your webpage content. The
closing </body> tag comes directly before the closing </html>
tag.

By Kevin Muldoon
Attributes
Attributes are placed within tags and give
you more control over how your content is
displayed. It allows you to align images,
change the colour of fonts, set the width of a
table and much more.
Most tags have different attributes which

you can set to change though not all of them
(for example, the tags <strong> and <em> do not have any attributes).
Many tags also have default attributes which are used if no attributes are
set.
Here are some more examples of attributes:

<img src=”http://www.yourblog.com/logo.jpg” width=”300”
height=”75” border=”0”>
<a href=”http://www.yourblog.com”>Your Blog</a>
Nesting Tags
HTML is a structured language and allows the use of multiple tags in
order to control content. These tags have to be nested or the output
will be a little messed up.
Here is a simple example of how nesting should be coded:

<tag2><tag1><tag3>example of nesting</tag3></tag1></tag2>

By Kevin Muldoon
Notice how <tag3> is closed first since it was the last tag opened, then
<tag1> is closed, and finally <tag2> (the opening tag).
In the example below I have made the link to BloggingTips bold and
italic. Notice how each tag is closed in the correct order.
Code Example:
<a href=”http://www.bloggingtips.com”>
<strong><em>BloggingTips</em></strong></a>
Output:
BloggingTips

CHAPTER 3: THE BASIC STRUCTURE
OF AN HTML PAGE
As a blogger, you will probably never need to build a website from

scratch as all blogging scripts automatically generate pages for you.
However I think a basic understanding of the structure of an HTML
page will help you understand the language better.
So let’s move on and create your first every HTML page! Here is what
you need to do:
• Open up a blank document in your chosen text editor (notepad

is sufficient for this task).
• Copy the code below into the document and save it somewhere
on your computer as test.html (note: the .html file extension
converts the document into an HTML file).
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>My very first web page!</title>
By Kevin Muldoon
</head>
<body>
<h1>Welcome to my very first web page</h1>
<p>Wow – HTML is so easy!!<p>
</body>
</html>
• Open test.html in your browser. You can do this by opening the

file via your browser or by opening the test.html file directly.
You should now see something like this via your browser:
I encourage you all to play around with the test.html web page for a
while. Change things up a little using some of the tags you have already
learned and try not closing one of the tags or making a mistake just to
see what is displayed.
It’s important that you see what happens when HTML is not coded
correctly. Not only will it help you understand what an error looks like,
it will remind you to write tags in the right order in future.
This headline on your test page is larger and bolder than the text below.
This is because it is inside a header tag. Header tags come in 6 sizes,
ranging from the largest and most important <h1> to the smallest
<h6>. They are used to display important site headlines and titles on
your page.
From a Search Engine Optimisation point of view, the <h1> tag is the

By Kevin Muldoon
most important tag in the body of your web page followed by the <h2>
tag.
I encourage you all to edit your test.html file to display all 6 header tags
to see the different in size between them. All you have to do is add
something like this to the body element of your web page.
<h1>This highlights the size and weight of the H1
tag</h1>
<h2> This highlights the size and weight of the H2
tag</h2>
tag</h3>
tag</h4>
tag</h5>
tag</h6>
Your web page will now look something like this:

By Kevin Muldoon
The DOCTYPE
If you have read chapter 2, you should be familiar with all of the tags
which were used to build our test.html page (except from the header
tags which I just briefly spoke about).
Though you will have noticed this strange piece of code at the very top
of our web page:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
This is known as a Document Type Declaration. It is placed before any

HTML code and tells an HTML Validator what version of HTML you
are coding in. This allows the Validator to check your HTML code
accordingly.
There are 3 types of Document Type Declarations for HTML 4.01:
Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN"

By Kevin Muldoon
"http://www.w3.org/TR/html4/frameset.dtd">
The strict DOCTYPE is specifically for HTML files which only have
HTML 4 tags. No deprecated tags are permitted under this Document
Type Declaration.
The DOCTYPE which most blogs use is Transitional. This declaration

is less strict and allows deprecated tags and presentational attributes.
The Frameset DOCTYPE is the same as Transitional except frames are
permitted too. As a blogger, you don’t have to concern yourself with
Document Type Declaration too much however it is something which I
think is important to know about since all HTML pages have it.
If you remember anything from this section, remember that Document

Type Declaration is something which is added to all HTML pages so
that code can be validated.

CHAPTER 4: BASIC STYLING WITH
HTML
Over the years the idea of separately style from content has come more
into play, with CSS controlling the style and visual design of a site with
HTML being used to structure the site. This is nearly always the case
with blog designs, which is why it’s so easy to customise them!
Because of this development, many HTML tags which were previously

used to mark-up text in a document have been deprecated (e.g. font
<font>, underline <u>, centre alignment <center> etc) and developers
are encouraged to use CSS to style their web pages instead.
However, there are some HTML tags which are used frequently in all
web pages. In this chapter I will explain the most common HTML
elements which you will find in your blog template.
By Kevin Muldoon
Common Elements Which Style Content

There are a lot HTML tags which you can
use to change the look of your text however
from my experience the most common are
Header tags, Paragraphs, Break Lines,
Divisions, Spans, Strong and Emphasis tags.
Header Tags <h1> - <H6>
Header tags were discussed in the last

chapter. They are used for headings and
range in size greatly from the largest <h1>, to the smallest <h6>. Most
web designers control the size, colour and font type of their header tags
through their CSS Style Sheet to make their web pages more appealing.
Paragraphs <p>
Browsers do not interpret spaces from HTML pages. Therefore if you

had to write:
I’m learning HTML
Isn’t it a fascinating language!
The output would like this:

I’m learning HTMLIsn’t it a fascinating language!
In order to display the text correctly, you would use the paragraph <p>
tag and write something like this:
<p>I’m learning HTML</p>

By Kevin Muldoon
<p>Isn’t it a fascinating language! </p>
This tells the browser that the two lines are separate from each other
and would give the following output.
I’m learning HTML
Through CSS, paragraphs can be used to control how the text appears
and how much space is between each paragraph (amongst other things,
the possibilities are endless!).
Break Lines <br>
I discussed break lines briefly in chapter 2. They are used to tell the
browser to print the rest of the content on the next line. Generally
speaking, paragraphs should always be used to format your main
content area however break lines are very useful in certain situations.
Divisions <div> & Spans <spans>
Divisions and spans are mainly used to link to a class within a CSS Style
Sheet. They work in the exactly the same way except that spans are an
in-line element and divisions are a block-line element. A block element
adds a line break so the information is displayed on the next line.
Most blog templates use divisions to design the structure of a blog page.
Spans are mostly used within the body of a text. Divs and spans usually
use an ID (Identifier)or a class.
The example below illustrates how divisions and spans work.

<div id=”example1”>

By Kevin Muldoon
<p>I’m learning <span class=”class1”>HTML</span></p>

<p>Isn’t it a <span class=”class2”>fascinating</span>
language!</p>
</div>
The division above links to an identifier in our style sheet which centres
the text and changes the font. Within the text we are changing the
colour of the word HTML to green using a class in our style sheet called
class1 and the word fascinating to red using the class class2.
The code would produce something like this:

I’m learning HTML
Strong <strong> and Emphasis <em>
The strong and emphasis tags are used to emphasise text. <em> is used
to emphasise something and <strong> is used to strongly emphasise it.
In modern browsers, <strong> usually makes the content bold and

<em> usually makes the content italic. Which is why so many people
confuse <strong> with the older HTML tag bold <b> and <em> with
the older HTML tag italic<i>. Both <b> and <i> are still valid in
HTML 4 however most web designers recommend using <strong> and
<em> instead.
So what is the difference between them?
• <b> and <i> are explicit, which is akin to telling the browser
‘Make this text italic and make this text bold’.

By Kevin Muldoon
• <strong> and <em> are semantic, which is akin to telling the

browser ‘This text should be emphasised and this text should be
strongly emphasised’.
Because of the way styling is controlled through stylesheets nowadays

and because of the different ways that information can be displayed,
<strong> and <em> should be used instead of <b> and <i> (even
though they are both valid HTML 4 tags).
For example, a program which reads text for the blind may change the
tone of the voice for the listener when an emphasis tag is used,
something which wouldn’t occur using the older tags.
Defining Colours
Years ago, the colour of text was defined in
numerous elements of HTML using the
attribute color=”#HEXCODE” (the
attribute bgcolor was also used for
backgrounds). Nowadays colours are
defined in the CSS stylesheet.
The World Wide Web Consortium (W3C)

have defined 16 colours which are valid in HTML and CSS. These are
the same colours which are valid with the Windows VGA Colour
Palette.
The 16 colours are aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white, and yellow. Although you can

By Kevin Muldoon
use these names in your style sheet, to adhere to HTML and CSS
validation rules you should link using the hexadecimal code.
Here is the full list:
Colour Hex Code Colour Hex Code
Aqua #00FFFF Navy #000080
Black #000000 Olive #808000
Blue #0000FF Purple #800080
Fuchsia #FF00FF Red #FF0000
Grey #808080 Silver #C0C0C0
Green #008000 Teal #008080
Lime #00FF00 White #FFFFFF
Maroon #800000 Yellow #FFFF00
Note, you can use any colour in your style sheet, the 16 colours which
the W3C have defined just ensures that older browsers and operating
systems display the colours in the same way. If you use a colour that is
not recognised by an older computer or device with a limited colour
palette, the closest colour will be used (well this is what is supposed to
happen but in my experience it wasn’t always the case!)

By Kevin Muldoon
W3C also recommend that you use hexadecimal code when referring to
colours instead of the colour name.
Please refer to the BloggingTips HTML Cheat Sheet for a quick

reference for all W3C valid colours and common HTML font and
phrase elements.

CHAPTER 5: LISTS
Lists are a useful way of presenting information to the reader in a more

presentable and easy to read way.
There are 3 types of list in HTML:
• Ordered List (<ol>): Ordered lists allow you to list items in

sequence.
• Unordered List (<ul>): Unordered lists are the same as ordered

lists except the list items are not numbered.
• Definition List (<dl>): Definition lists are used for making lists
By Kevin Muldoon
of terms and their definitions. They are displayed in a slightly

different way from ordered and unordered lists.
Many attributes of the ordered and

unordered elements were deprecated in
HTML 4 and it is now recommended that
all list styling is done through the CSS Style
Sheet.
You can list ordered list items by decimal

numbers, lowercase and upper case
alphabetic letters and lowercase and
uppercase Roman numerals by using CSS.
You can also change the value which the list
starts from e.g. you could start your list at number 10 instead of 1.
Using CSS you can display unordered list items by discs, squares,
circles, bullets and much more. It is also possible to list items using an
image therefore how you display your list is limited only by your
imagination.
Ordered and Unordered Lists

To list items in ordered and unordered lists you use the List Item (<li>)
element.
Here is an example of an ordered list:

<ol>
<li>Apples</li>

By Kevin Muldoon
<li>Bananas</li>
<li>Grapes</li>
</ol>
This will display:

1. Apples
2. Bananas
3. Grapes
Apart from the containing element being <ul> instead of <ol>,

unordered lists work in exactly the same way as ordered lists.
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Grapes</li>
</ul>
This will display:

• Apples
• Bananas
• Grapes
By using CSS, unordered lists can be so much more than just bullet
points and squares. Most designers use lists to display information on
sidebars, footers and the navigation menus.
Definition Lists
Definition lists work slightly different from ordered and unordered lists.
Instead of just listing an item, you have to define it and then describe it.
You do this using the Definition Term (<dt>) and the Definition

By Kevin Muldoon
Description (<dd>).
Here is an example of a definition list:

<dl>
<dt>Apples</dt>
<dd>A tree fruit which originated from Central Asia.</dd>
<dt>Bananas</dt>
<dd>A popular fruit which are a great source of
potassium.</dd>
<dt>Grapes</dt>
<dd>A true berry and the main ingredient of wine.</dd>
</ul>
This will display:

CHAPTER 6: HYPERLINKS
Linking is a very important aspect of blogging. You link to great articles

you have found, you link to friends and families and you link to other
pages on your own blog. It is very easy to link to someone in a blog post
using the WYSIWYG editor but, as you will soon find out, it’s
incredibly easy to do in HTML too ☺
The anchor <a> HTML tag allows you to create a hyperlink on your
blog. It is always used with the attribute href. Any text or images which
are placed between the opening and closing anchor tag will be
hyperlinked to the destination defined by the href attribute.
A basic HTML link looks something like this:

By Kevin Muldoon
<a href=”http://www.yourblog.com”>Visit My Blog</a>
Not only can you link to websites, you can link to files, images, email
addresses and to a section of the current page!
If your link text is not very descriptive then it can be useful to use the
attribute title. The title attribute helps with accessibility and is worth
using in your navigation menu links.
<a href=”http://www.bloggingtips.com” title=”Blogging
Tips Home Page”>Home</a>
The Email Link

Most blogging scripts let you easily add a contact form because it
reduces spambots from finding your email address. However, many
bloggers still prefer to place a direct link to their email on their blog.
Creating an email link in HTML is incredibly easy, all you have to do is

use mailto: before your email address.
A basic email link would look something like this:

<a href=”mailto:email@yourblog.com”>Email Me</a>
If one of your blog readers clicks on the ‘Email Me’ link above their
chosen email program would create a new email message with the ‘To:’
field already filled in.
It is also possible to email multiple people by separating recipients with

a comma.

By Kevin Muldoon
<a href=”mailto:email@yourblog.com,
mypartner@yourblog.com”> Email Me</a>
We can extend this even further by placing a question mark (?) at the
end of our email link.
• Cc: We would use cc=email address
• Bcc: We would use bcc=email address
• Subject: We would use subject=subject
• Body : We would use body=message body
Here is the code for copying in a blog partner in an email and pre
specifying the email message title:
<a href=”mailto:email@yourblog.com?cc=
mypartner@yourblog.com&subject=Blog Feedback”>Email
Me</a>
Note, the ampersand (&) is used to separate different sections after the
question mark.
Linking
Linking within a page or document
It is sometimes necessary to link to a different part of a web page or
document. This is particularly helpful with pages with large amounts of
text. You can do this with HTML be using what is known as a named
anchor.
Websites like Wikipedia frequently use named anchors at the top of a

By Kevin Muldoon
page to link to different sections of the content. It is frequently used in

blogs to link to the top of the page. You may have come across a ‘return
to top’ link at the bottom of a blog page before which sends you back to
the top of the page.
To use a name anchor you need to do two things:
• Define where you want the anchor to link to.
• Link to the anchor.
To define a name anchor you need to make use of the ID attribute:

<a ID=”name”></a>
This anchor link will not be shown anywhere on your web page, you are
simply telling the browser that you would like to link to this area later.
Therefore there is no need to place any text within the link.
To link to your anchor you need to place the hash tag (#) in front of the
anchors name. So to link to the anchor which I defined before I would
use:
<a href=”#name”>Link Name</a>
If you would like to place a link in your footer to the top of a page all
you need to do is add <a ID=”top”></a> just after the <body> tag in
your template and <a href=”#top”>Return To Top Of Page</a> in
your footer somewhere. Alternatively, if you use a CSS identifier for the
structure of your header, you can link to that.
You can also link to specific areas of a different page using anchors. For

By Kevin Muldoon
example, if your about page has a terms and conditions area you could
link to it directly by placing <a ID=”terms”></a> at the top of the
terms and conditions section. You could then link directly to this area
using www.yourblog.com/about#terms.
Opening Links In A New Window Or Tab

You used to be able to set links to open in a new tab or window using
the deprecated attribute target (eg. target=”_blank”, target=”new” etc).
However, it is not advisable to use these tags anymore, not least
because it removes control from the web visitor.
It is possible to open a link with a new tab using JavaScript but since
many people turn this feature off, it’s not a great option.
The World Wide Web Consortium (W3C) doesn’t recommend

popping up new windows for any link. In their Web Content Accessibility
Guidelines 1.0 article they state:
“Changing the current window or popping up new windows can

be very disorienting to users who cannot see that this has
happened.”
Forcing links to open in a new browser window can also be frustrating

for those who browse the web using portable devices such as mobile
phones. Since most modern browsers allow users to open links in a new
tab or new window, I don’t believe there is any real need to force links
to open in a new tab or window anyway.

CHAPTER 7: IMAGES
Images are a quick and easy way to make our blogs easier to navigate,
look more professional and improve our blog posts. You can add an
image to a page with HTML by using the image tag <img>.
The basic code for displaying an image is:

<img src=”location of image” alt=”description of image or
link location”>
You will notice that the image tag does not require a closing tag.
The src and alt attributes are required in all images. SRC is the attribute
which you use to link to the image location. Therefore you can link
By Kevin Muldoon
locally using <img src=”logo.gif” alt=”Welcome To My Blog!”> or

<img src=”/images/logo. gif” alt=”Welcome To My Blog!”> or directly
using <img src=”http://www. yourblog.com/images/logo. gif”
alt=”Welcome To My Blog!”>.
Alt defines the alternate text of an image. It is

the alt text you see when you hover over an
image and it’s what is shown when you switch
images off in a browser (and therefore is seen
by search engines too). Make sure the alt text
for your images are descriptive (excluding
design images).
Popular attributes like border and align have been deprecated in

HTML 4.01 in favour of CSS styling however the width and height of
an image are still defined within the image element.
• width: Defines the image width in pixels.
• height: Defines the image height in pixels.
Here is another look at our basic HTML code for an image:

<img src=”logo.gif” width=”300” height=”75” alt=”Blog
Name”>
Linking With Images

Turning an image into a link is incredibly easy. All you have to do is
place the image element within the anchor element. In effect, you are

By Kevin Muldoon
replacing the link text with your image details.

<a href=”http://www.yourblog.com”><img src=”logo.gif”
width=”300” height=”75” alt=”Blog Name”></a>
It is important to make sure that you nest the image inside of the
anchor link correctly. Remember, things can get a little messed up when
you close HTML tags in the wrong order!
Image Types
The three most popular image formats are:
• GIF (Graphics Interchange Format): Gifs are suitable for

drawings and blog template images. They are small in file size,
allow transparency and can be animated too
• JPG / JPEG (Joint Photographic Experts Group): Jpegs are

suitable for photographs. Images in jpeg format will be displayed
in a higher quality than gifs but due to the larger file sizes, gifs
should still be used in your blog design.
• PNG (Portable Network Graphics): Pngs (prounounced ‘pings’)

is the newest image format around and offers a higher quality than
gif files. They can be transparent however they cannot be
animated.

CHAPTER 8: TABLES
Tables are not widely used to construct the design of a website anymore
due to the development and implementation of CSS (particularly the
use of divisions) so it’s doubtful if you have come across tables before in
a blog design. However, tables remain one of the most popular ways to
display information on a page.
Have a look at a basic HTML table below:

<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
By Kevin Muldoon
This produces the following table:
1 2
3 4
The tags used in our example are the most important tags used in the
table element:
• <table>: This defines the table element.
• <tr>: This defines a table row.
• <td>: This defines a table cell.
The table element has several attributes which let you control how the
table is displayed, the most common ones being:
• width: Defines the width of the table in pixels or as a percentage

of the content area the table is placed in.
• border: Defines the border of a table in pixels.
• cellspacing: Defines the spacing between cells in pixels or as a

percentage.
• cellpadding: Defines the spacing within cells in pixels or as a

percentage.
• summary: Lets you define the purpose of the table.

By Kevin Muldoon
We can now use these attributes to improve our table:

<table width=”80%” border=”0” cellspacing=”5”
cellpadding=”5” summary=”An example table”>
<tr>
<td>Row 1 | Cell 1</td>
</tr>
<tr>
</tr>
</table>
You can define a header for a data cell using the th element. Most
browsers align the contents of a th element to the centre of the cell and
make the text bold.
Here is an example of the th element being used:

<table border=”0”>
<tr>
<th>Cell 1 Header</th>
<th>Cell 2 Header</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
This would output something like:

By Kevin Muldoon
Cell 1 Header Cell 2 Header
Row 1 | Cell 1 Row 1 | Cell 2
Row 2 | Cell 1 Row 2 | Cell 2
When using table headers, it is worth using the attribute scope. You use
scope="col" for a column heading and scope="row" for a row heading.
This is beneficial from an accessibility point of view as it tells the screen
reader what the heading is for ie. a row or column.
The caption element is another useful HTML feature which lets us

place an aligned caption at the top of a table. If you use it, it has to be
the first element used after the opening table tag i.e. directly after
<table> and before other elements like table rows.
<table>
<caption>A table to show where cell and row information
is placed</caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

By Kevin Muldoon
Spanning Columns & Rows

It is possible to make data span across 2 or more columns or rows. To
span information across more than one column you use the colspan
attribute. This can be used with cells and cell headers (i.e. <td> and
<th>).
Here is an example of colspan being used in a table:

<table border=”0”>
<tr>
<th colspan=”2”>Cell Header</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
This would produce the following:
Cell Header
1 2
The rowspan element is the attribute which is used to span content

over a number of rows. As with colspan, this can
be used with cells and cell headers.
Colspan is frequently used with rowspan within

templates in order to present information in a

By Kevin Muldoon
specific way.
The code below was used to design the table on the right. Copy the
code into your test.html page and and change some values to get a
better understanding of how tables work.
<table border="1">
<tr>
<th rowspan="3">Dogs</th>
<td>Greyhound</td>
</tr>
<tr>
<td>Collie</td>
</tr>
<tr>
<td>Spaniel</td>
</tr>
<tr>
<th colspan="2">Cats</th></tr>
<tr>
<td rowspan="2">Tabby</td>
<td>Siamese</td>
</tr>
<tr>
<td>Persian</td>
</tr>
</table>
I hope this chapter has given you a basic understanding of HTML

tables and how they can be used to display information on a web page.
Beginners sometimes make mistakes when they first start using tables
however if you take the time to mess around with them in your test
page, I have no doubt that they will become second nature to you.
If you would like to develop tables even more, I recommend doing

some research on some of the lesser used table elements listed below:

By Kevin Muldoon
• colgroup: Defines a column group in a table.
• thead: Defines a group of header rows in a table
• tbody: defines a group of data rows in a table
• tfoot: defines a group of footer rows in a table.
If you would like to style your tables and present them in a more
appealing way to your blog readers, you should look more into CSS
since attributes like bgcolor have been deprecated (specifically how
tables and CSS work together) ☺

CHAPTER 9: ADDITIONAL HTML
INFORMATION
In this chapter I will talk about some other HTML related topics which
I have not discussed in detail up to this point.
Character Entities
There are thousands of character entity references in HTML. These
entities allow you to display thousands of letters, symbols,
mathematical symbols, characters and much more.
The numeric HTML reference for all of these entities is &# followed by
a number followed by ;. Each character/symbol also has a character
By Kevin Muldoon
entity reference. For example, to add a non-breaking space to a

document you can use or .
Commonly used entities include $ ($),{(€), £ (£),

© (©),< (<), > (>) and @ (@).
There are thousands of entities available for different languages and

currencies. If you would like to see the main list (255 entities) for
English speakers, please refer to
http://www.w3.org/MarkUp/html3/latin1.html.
Commenting
Like most programming languages, HTML allows you to add
comments in order to document your code. This can be very helpful
when going back to HTML code at a later date or when you are
designing for someone else.
To add a comment in HTML you use:


As per the official W3C documentation:
‘White space is not permitted between the markup declaration

open delimiter("<!") and the comment open delimiter ("--"),
but is permitted between the comment close delimiter ("--")
and the markup declaration close delimiter (">"). A common
error is to include a string of hyphens ("---") within a
comment. Authors should avoid putting two or more adjacent

By Kevin Muldoon
hyphens inside comments.’
Since you cannot use a string of hyphens within a comment, comments

cannot be nested like other HTML elements.
It is good practice, particularly when first learning HTML, to document

the major areas of your design (for example: ).
Please be careful to open and close comment elements correctly.
Failing to do so could result in large parts of your page not being
interpreted by the browser because the code has been commented out.
Validation
Throughout this e-book I have spoke about code validation and
deprecated HTML elements (i.e. elements which are not valid in
HTML 4 but still work in most browsers).
I think it is very important for anyone learning HTML to be aware of

what is valid as it will serve them well for the future as browsers stop
supporting deprecated elements. You can validate any page on the web
or uploaded file at http://validator.w3.org/. This official validator will
tell you what errors are there and why.
Code validation is something that many purists want on the web so that
web pages are displayed correctly on all browsers and devices. It also
takes the right steps towards an accessible website and valid code will
also ensure you don't put up any road blocks to search engine spiders as
they read through your pages

By Kevin Muldoon
HTML VS XHTML
In January 2000 the World Wide Web Consortium (W3C)
recommended the use of XHTML. XHTML 1.0 was, according to
XHTML 1.0 specification, a ‘reformulation of HTML 4 as an XML 1.0
application’.
HTML 4.01 and XHTML are virtually the same except the latter is
stricter. There's not a lot more that you can do with XHTML that you
can't do with HTML. Code is case sensitive, you cannot leave out a
closing tag and attributes always have to have values.
In July 2009 W3C announced that it was pulling support for XHTML 2
in favour of the upcoming HTML 5.
Many blog templates are coded in XHTML so you will probably see the
differences that I mentioned above in your blog theme.
Please remember that HTML 4.01 is the current version of HTML.

CHAPTER 10: A BRIEF NOTE ON
CSS
In this chapter I will give you all a brief introduction to what CSS is and
give you a look at how it integrates with HTML.
Cascading Style Sheets has taken on most of the design aspects that
HTML used to take care of and has made web pages easier to navigate
and easier to modify. Essentially, they allow designers to define style
and formatting details and apply those details to HTML using what is
known as selectors.
Styles can be defined inside the body element though they are usually
defined in the head element, or more commonly, in an external style
By Kevin Muldoon
sheet.
A Simple Example Of CSS

Lets look at the introduction of this chapter and see how we can change
things with CSS. Here is the HTML code required to display this
chapters introduction
<h1>A Brief Note On CSS</h1>
<p> In this chapter I will give you all a brief
introduction to what CSS is and give you a look at how it
integrates with HTML.</p>
There are two different HTML elements here: the header element and
the paragraph element. We want to change how both areas are
displayed.
We can style these elements with CSS within the body element (i.e.
within the code itself).
<h1 style=”font-family:Verdana;font-
size:large;color:#ff0000;font-weight:bold;”>A Brief Note
On CSS</h1>
<p style=”font-family:Geneva;color:#000000;”> In this
chapter I will give you all a brief introduction to what
CSS is and give you a look at how it integrates with
HTML.</p>
In the above example I have used CSS to make the headline use the
Verdana font, be large in size, red in colour and bold. The content
within the paragraph will have the Geneva font instead and be printed
in the colour black.

By Kevin Muldoon
Linking To Your CSS Styles

The beauty of CSS is the ability to save you time. It goes without saying
that most people want the text in their main content area to look the
same on every page. So instead of defining it each time you want to use
it, you just need to define it once in the head element or in an external
style sheet.
To embed your styles directly within the head element of your page,
you would place this code between the opening and closing <head>
tags.
<style type=”text/css”>
Place your css code here!
</style>
In our example, we would add the following to our head element:

<style type=”text/css”>
h1 {font-family:Verdana;font-
size:large;color:#ff0000;font-weight:bold}
p {font-family:Geneva,sans-serif;color:#000000;}
</style>
This means that whenever someone uses the H1 or paragraph tags, the
text will be displayed according to what we specified in our style.
The number of CSS styles quickly grows when you are designing a web
page or blog template. Therefore, it is advisable to place all of your CSS
styles in what is known as an External Style Sheet. You simply save all
of your styles in a file with the extension .css and then link to it using:
<link rel=”stylesheet” type=”text/css” href=”style.css”>

By Kevin Muldoon
The CSS code may still look a little daunting but it is relatively easy to
follow once you break it down.
Each CSS definition has a selector and a declaration block. Within the
declaration block are properties and their corresponding values.
Selector Property Value Property Value
p font-family geneva color #000000
Common HTML elements are styled using what is known as type

selectors (body, h1, h2, p etc) and self created styles are known as
class selectors.
In CSS it is also possible to assign 2 or more selectors to the same

declaration block. All you need to do is separate the selectors with a
comma. For example, we could have defined the style of all of our
headers with:
h1, h2, h3, h4, h5, h6 {font-family:Verdana;font-
size:large;color:#ff0000;font-weight:bold}
Difference between ids and classes

Class selectors (styles which you create yourself) are usually linked to
in your blog template with divisions <div> (and occasionally spans
<span>). I touched upon this briefly in chapter 4.
If you are look at your blog template then you will see lots of <div>
elements. Some of which use classes and some of which use IDs e.g.
<div class=”commentarea”> or <div id=”sidebar”>.

By Kevin Muldoon
Classes and IDs (known as identifiers) can be used with a type or a class
selector however there are some small differences between them:
• An ID identifier is unique and can only be used once in a page

whereas a class can be used as many times are needed.
• You can use multiple classes within the same element eg. <p
class=”big” class=”green”> and you can also use an identifier and a
class in the same element eg. <p id=”firstparagraph” class=”big”
class=”green”>. However, an identifier can only be used once in
one element on any page.
• Both selectors are defined slightly differently in CSS. Class

selectors begin with a period (e.g. .green) and ID selectors begin
with a hash tag (e.g. #firstparagraph).
• An identifier can be used as a name anchor link therefore they

allow you to link to specific areas of a page. They work the same
way as traditional HTML name anchors in this respect.
Blogging scripts use identifiers frequently to direct people to a certain

area of a page. For example, WordPress uses identifiers to send visitors
from the home page of a blog to the comment area.
Click on the comment link at the front of any WordPress powered blog
and you will be taken to something like www.yourblog.com/blog-
post#comments if there are comments and taken to the comment
submission form at www.yourblog.com/blog-post#respond if there

By Kevin Muldoon
aren’t any.
CSS Overview
Just like any new language, CSS can seem a little daunting at first.
Though once you understand the basics of how selectors and
declaration blocks work, you will soon appreciate the beauty of
Cascading Style Sheets.
As a blogger, it is not necessary to learn CSS to be successful. However,

I strongly believe that all bloggers should learn the basics of HTML and
develop a general understanding of what CSS is and how it works so
that they can do simple modifications to their blog design.
It just isn’t practical to pay a designer for assistance every time you want
to add a link to your sidebar or change an image in your blogs footer as
these tasks only take seconds to do and are incredibly simple.

CHAPTER 11: FURTHER READING
I hope that you have enjoyed this e-book and it helps you understand
the HTML language better. At the very least, I hope that you can now
do basic modifications to your blog design without asking for help ☺
Although I have discussed most major aspects of HTML in this e-book,

there are still a lot of things which I did not cover. For example, it just
was not practical to list all of the attributes of every HTML tag or
explain advanced tables in detail.
And although forms (<form>) are something you need to understand if

you want to build a contact form for a website, it’s not something which
I believe the average blogger needs to learn since most blogging scripts
By Kevin Muldoon
come with an integrated contact form already (or at the very least, a
plugin is available to add a contact form).
If you haven’t done so already, I encourage you all to download and

print off our HTML Cheat Sheet for easy reference of the most
common HTML elements.
If there is a blogging related topic that you would like covered in

another e-book, please let us know via our blog or forums. To see a full
list of Blogging Tips books, please visit
http://www.bloggingtips.com/books/.
I wish you all the best of luck with your blogging careers and I hope that
this e-book will help you take your blog to the next level!
Kevin Muldoon
www.bloggingtips.com

By Kevin Muldoon
Community Support
If you finding any aspect of HTML difficult then I encourage you to
drop by the Blogging Tips Forums for hands on support from
experienced bloggers, webmasters and designers.
It’s a great place to hang out with like minded bloggers and best of all,
registration is free!!

By Kevin Muldoon
HTML Reference & Tutorial Websites

Below you will find a list of good HTML reference and tutorial websites
which will teach you more advanced HTML techniques and help you
understand the language better.*
* In no particular order
http://www.w3.org/html/ - World Wide Web Consortium (W3C)
http://validator.w3.org/ - Official W3C validation page.
http://www.htmlcodetutorial.com/
http://www.htmlgoodies.com/
http://htmldog.com/
http://reference.sitepoint.com/html
http://www.w3schools.com/html/DEFAULT.asp
http://www.tizag.com/htmlT/
Release History
Initial Release : 20th July 2009

Basic HTML An Introduction To HTML For Bloggers

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Basic HTML An Introduction To HTML For Bloggers

Transféré par

Droits d'auteur :

Formats disponibles

‘Basic HTML: An Introduction to HTML for bloggers’

About Blogging Tips

Visit www.bloggingtips.com for more information about our blog,

About The Author

He currently lives in central Scotland and enjoys

© 2009 BloggingTips.com www.bloggingtips.com Page 2 of 63

Who is this book for?

I'm a blogger, why do I need to know HTML?

Thankfully, HTML is an incredibly easy programming language to

About This Book

© 2009 BloggingTips.com www.bloggingtips.com Page 3 of 63

should be a useful reference when learning the HTML language.

• Sarah Anderson from Stuff By Sarah and David Anderson from

© 2009 BloggingTips.com www.bloggingtips.com Page 4 of 63

A BRIEF HISTORY OF HTML ........................................................ 7

THE DOCTYPE .................................................................... 22

COMMON ELEMENTS WHICH STYLE CONTENT ................................... 25

ORDERED AND UNORDERED LISTS ............................................... 32

THE EMAIL LINK.................................................................... 36

LINKING WITH IMAGES ............................................................ 41

SPANNING COLUMNS & ROWS .................................................... 47

CHARACTER ENTITIES ............................................................. 50

A SIMPLE EXAMPLE OF CSS...................................................... 55

COMMUNITY SUPPORT ............................................................. 62

© 2009 BloggingTips.com www.bloggingtips.com Page 6 of 63

Hypertext Mark-up Language, more commonly known in its

A Brief History of HTML

Berners-Lee and contained information about 22 HTML elements.

Over the years many HTML elements have been deprecated or

Using deprecated HTML tags usually results in a page not displaying

Out of the 22 elements which were mentioned in the original ‘HTML

© 2009 BloggingTips.com www.bloggingtips.com Page 8 of 63

HTML File Extensions

It is not common for a programming language to have two file

HTML editors make editing much easier by colour coding your

© 2009 BloggingTips.com www.bloggingtips.com Page 9 of 63

The WYSIWYG Editor

Using the WYSIWYG is very similar to using WordPad or Microsoft

© 2009 BloggingTips.com www.bloggingtips.com Page 10 of 63

© 2009 BloggingTips.com www.bloggingtips.com Page 11 of 63

An HTML document consists of tags, elements and attributes. In this

• Tags: Tags are used to mark-up certain information to be

• Elements: An element consists of an opening tag, content and

• Attributes: An element can have one or several attributes.

All elements in HTML must have an

© 2009 BloggingTips.com www.bloggingtips.com Page 13 of 63

Forgetting to close a tag is a common mistake that beginners make so I

© 2009 BloggingTips.com www.bloggingtips.com Page 14 of 63

Horizontal Reference tag (<hr>).

• The Horizontal Reference tag (<hr>) produces a line across

An example of the HR tag in action on BloggingTips

Although technically speaking an element can refer to any area of your

All of these elements are required to build a webpage on the internet.

© 2009 BloggingTips.com www.bloggingtips.com Page 15 of 63

• The Document Declaration: The Doctype is defined at the

• The <html> element: <html> is the first HTML tag of any

• The <title> element: The title element is placed within the

• The <body> element: The <body> element comes after the

© 2009 BloggingTips.com www.bloggingtips.com Page 16 of 63

Most tags have different attributes which

Here are some more examples of attributes:

<a href=”http://www.yourblog.com”>Your Blog</a>