Links | Images | Image Links | Paragraphs/Line Breaks
Adding CSS | What is HTML?
All trademarks, company names or logos are the property of their respective owners.
I've revised this page to accommodate changes in acceptable HTML and CSS practices, particularly for HTML5. If you're using earlier versions of HTML (not recommended) or XHTML, the rules are different.
I've used green text
to separate HTML and CSS elements from the text to make it easier to understand.
I'd recommend learning at least the basics of HTML markup to better understand how HTML functions.
This page will teach you the basics of HTML: creating a simple link then working your way through other HTML elements until you understand how links, images and paragraph elements work and the basics of using CSS.
Each example on this page is generated by hand rather than using HTML-generating software. Creating HTML by hand takes more time, but the page loads faster and the HTML source is easier to follow.
People are very impatient. When your site loads quickly, it decreases the chance that someone will return to their search results for an alternative (probably your competitor's site).
WordPress and other CMS-based software can generate pretty decent websites, but are quite limited in their flexibility and they usually load much slower. Fortunately, high speed Internet access is more forgiving than in the early days of the Web.
One of the best ways to learn how web designers creating certain effects is to have a look at the source. Pages created by hand tend to be easier to follow than machine-generated sites.
Most browsers allow you to right-click on the page then select View Page Source or some variation. If you need more exact instructions or aren't using a mouse, see How to view the HTML source code of a web page.
Don't worry if the displayed content is confusing. Just as it is easier to examine one tree at a time when studying a forest, it is easier if you only look at one or two HTML tags at a time.
Let's start by learning how to create an HTML link. The ability to link text is what makes HTML so powerful compared to printed text.
The HTML link that links to another page looks like the following:
<a href="self.html">Web Design Primer</a>
<a href="
creates the opening part of the tag.self.html
is the URL (link address).Web Design Primer
is the descriptive linked text that will appear on the page.</a>
closes the <a href=
container tag.This is only a snippet of HTML for demonstration purposes.
Normally there is additional HTML elements that create paragraphs as well as the punctuation normally used in written text:
<p><a href="self.html">Web Design Primer</a>.</p>
The browser will display that modified example HTML as follows:
Notice that only the linked text is displayed on the page and that is coloured differently than the regular text on the page.
The linked text has nothing to do with where the link takes you. You can't trust link text to tell you where the link goes either on a website or in an email.
The link address is the content that directs the browser to another location. Since it is hidden to the viewer it is easy to forget this fact.
If you place your mouse over the text the cursor will change and the browser will display the actual URL (link address):
In the example above, I've used a relative link (a link that points to a page in a location relative to the current page).
For an external link (one that takes you to another website) you need to use an absolute link:
<a href="https://russharvey.bc.ca/resources/self.html">Web Design Primer</a>
<a href="
creates the opening part of the tag.https://
tells the browser to expect a secure web location.russharvey.bc.ca
is the domain./
is how directories are broken down on the web.resources
is a directory on that domain.self.html
is the page within that directory.Web Design Primer
is the linked text that will appear on the page.</a>
closes the <a href=
container tag.Most Canadian domains only use .ca but I've obtained this domain when only nationally-registered companies and organizations were eligible to register a .ca domain (hence the .bc provincial indicator).
It is often useful to point to a section within the page rather than just linking to the page and hoping the site visitor can find the relevant information within that page.
This is accomplished by inserting an element ID (id="image"
) to a heading:
<h2 id="image">Adding an Image</h2>
or to a paragraph:
<p id="results">Note the results…</p>
Once you've created the element ID, you can link to that section of the page directly by using #
followed by the element ID.
<p>See <a href="#image">adding an image</a> for details.</p>
which displays as follows:
See adding an image for details.
Linking to a different page simply requires adding the page's address.
<p>Learn <a href="web.html#primer">HTML basics</a>.</p>
which displays as follows:
Learn HTML basics.
Try both, using the browser's back button to return to this page.
These are both relative links to the sections from within this site. If you were linking to this content from another site, you would include the full address:
<a href="https://russharvey.bc.ca/resources/html.html#image">
<a href="https://russharvey.bc.ca/resources/web.html#primer">
Congratulations! You now know the basics of linking text using HTML.
The ability to display images along side your text allows for a much more interesting (and informative) page.
To add an image to your document, you would use the following HTML:
<img src="../graphics/rhcslogo.gif" alt="RHC">
<img src="
tells the browser to expect an image.../graphics/rhcslogo.gif
gives the name of the image to be displayed and its location. (../
tells the browser to drop one directory level before looking for the graphics folder.)width="40" height="38"
tells the browser the dimensions of the image in pixels so the browser can create a placeholder to speed up loading times for the page.alt="RHC"
indicates the text that should be used in place of the graphic if a browser is told not to display graphics, or if a text-only browser is viewing the page.>
is the close of the image tag information.This is how the image will appear in the browser:
<img>
, unlike the paragraph tag (<p>
), is not a container tag so it doesn't have a matching closing tag with a slash like the paragraph's </p>
.
An implied close (the /
at the end of the original element before the closing >
)
<img src="../graphics/rhcslogo.gif" alt="RHC"/>
is required for XHTML but should not be included in HTML5:
These attributes can enable you to modify how the image is displayed using pixels or percentages. Including the actual size in pixels enables the browser to create a placeholder for images to speed up loading times for the page.
The use of the height and width settings is strongly recommended for non-responsive websites. I use them for small images in HTML5. It would be displayed as follows:
<img src="../graphics/rhcslogo.gif" width="40" height="38" alt="RHC">
For responsive web designs specifying height and width can be a problem for larger images. Using special CSS and removing the fixed image height and width allows the image to resize proportionally when displayed on a narrow screen.
I've displayed the image without any of the obsolete attributes that were allowable in HTML 4.01 Transitional:
border="0"
was used to remove the border around linked images; andvspace="0"
and hspace="25"
were used to indicate how much vertical and horizontal space, in pixels, there should surrounding this image.All these attributes have been replaced by CSS (see the discussion in Adding CSS).
To add a link to this image we just combine the HTML for a link with the linking text replaced by the image markup:
<a href="../design.html"><img src="../graphics/rhcslogo.gif" width="40" height="38" alt="RHC"><a>
<a href="../design.html">
is the linking HTML that tells the browser where to go when the viewer clicks on the image.</a>
is the closing tag for the linking HTML.This is how this HTML will appear in the browser:
If you hover your mouse over the image you'll see the link destination — to my web design services introductory page.
Click on the image to visit the page then use the back button to return to this page.
Again, this image is displayed without deprecated attributes.
Notice the ../
before design.html
. The current page is located within the resources directory and the linked page is one directory down at the root domain level:
<a href="https://russharvey.bc.ca/resources/html.html">
<a href="https://russharvey.bc.ca/design.html">
Unfortunately, linking only the image doesn't provide much explanation of where the link takes you.
To provide a better explanation, we'll add some more HTML:
<p class="smcenter">Another<br>
<a href="../design.html"><img src="../graphics/rhcslogo.gif" width="40" height="38" alt="RHC"></a><br>
Web Creation©</p>
I've simplified the HTML by using a relative link address.
This is how this HTML will appear in the browser:
This layout is a legacy once included at the bottom of websites I'd designed, linking back to my design page. I've since replaced the graphic with a simple text link that works better in responsive sites.
We've added text to the image, separating the text and linked images using the <p>
and <br>
elements. Notice the difference in how each displays.
<p>
is the opening tag for a paragraph.class="smcenter"
is defined in the site's CSS to create a smaller font-size and center the content.Another
is the text appearing on top of the image.<br>
creates a line break without adding spacing afterwards.img
content is placed here.<br>
creates a line break without adding spacing afterwards.Web Creation ©
is the text appearing below the image.</p>
closes the paragraph tag.The image is now centered because it is contained within the paragraph which is defined as centered in the CSS. The text above and below is also centered and smaller because of the class="smcenter"
CSS attribute.
Notice the © symbol (©
). There are a large number of these special symbols.
Unfortunately, many of the newer ones have strange effects in older browsers (if they appear at all). Copying and pasting content from MS Word or from a browser displaying these symbols can create havoc. It is best to paste plain text and to manually replace any symbols with their HTML counterparts.
I've made several references to CSS (cascading style sheets). Extensive explanations about CSS is beyond the scope of this introduction to HTML. Suffice it to say that CSS gives a great deal of control to the web designer.
One of the most important of benefits is the separation of content from layout. By using CSS to define the layout, the design becomes simpler, loads faster and can be more easily modified.
CSS doesn't interfere with the display by older browsers because they ignore it (they don't understand what to do with it). This allows HTML5 to work with all browsers because they display the raw HTML without enhancements, although it degrades the user experience.
If you wish to learn more about CSS, have a look at W3Schools CSS tutorial.
The last part of a link I place is the text display of the URL after the identifying text. However, in order to separate it an place it on another line you must first understand how to use the paragraph and line break commands correctly.
The proper use of the paragraph break is to place a <p>
at the beginning of a paragraph and </p>
at the end. This creates a “container” effect with the HTML enclosing a paragraph.
Some designers choose to break with tradition and use only the <br>
to make paragraph breaks or to use font size to set larger text rather than using <h1>
to <h6>
heading tags. While this is not technically correct, it works…well, sort of.
There is more to HTML design than what is visible to the casual reader. Google is “blind” and uses many of the HTML tags to determine what is relevant on the page (and therefore your site's ranking). I'd suggest doing things the proper way.
<br>
is the HTML element used for line breaks. While the <p>
tag creates a blank line after the text, the <br>
doesn't.
The following lines are separate paragraphs:
<p class="center"><a href="../portfolio.html">RHC Design Portfolio</a></p>
<p class="center">Example Websites & Blogs</p>
The browser will display the content in the center, separated by an empty line:
Example Websites & Blogs
The following lines are within a single paragraph but broken by a line break:
<p class="center"><a href="../portfolio.html">RHC Design Portfolio</a><br>
Example Websites & Blogs</p>
The browser will display the content in the center, but without any space between the two lines:
RHC Design Portfolio
Example Websites & Blogs
Both examples are centered using CSS but the way the content is displayed is different:
<br>
).I have used these sorts of layouts with a call to action:
The break element can also be used to create a series of lines of text without spaces such as a postal address:
<p>123 Main Street<br>
Victoria, BC<br>
V8V 1X2</p>
The browser will display the address without any space between the lines as is standard practice for mailing addresses:
123 Main Street
Victoria, BC
V8V 1X2
In both examples, a line break is more compact, more aesthetically appealing.
Early versions of HTML used attributes within the HTML itself to style content. This styling was repeated for every line of HTML on the site.
The no longer supported font
tag used to be commonly used to declare the style elements of the text in a paragraph. This is now accomplished using CSS.
Suppose you want to display your text in a green serif font. Let's look at how much extra HTML is required for every line to make that simple change without CSS.
When using only HTML (no CSS) the HTML is quite extensive (109 HTML characters)
<p><font="Georgia,Times,"Times New Roman",serif;" color="#060"; background-color="#fff"; font-size="12";>
This is green serif text.</p>
Using this approach, you would need to redefine the various HTML attributes (colour, size, font) for every new line of text on your whole site.
If you use CSS to define the green font:
.green
{
font-family: Georgia,Times,"Times New Roman",serif;
color: #060;
background-color: #fff;
}
the HTML is reduced to only 21 HTML characters:
<p class="green">
This is green serif text.</p>
Think about how much excess HML bloat would be added to this page if every line had to carry the extra HTML. What about for this whole site?
The extra CSS does add 104 characters to your external CSS file, but it is required only once.
I use the following CSS to display the HTML examples on this page in a green monospace font:
{
max-width: 100%;
font-family: Lucida Console,Andale Mono,Courier New,monospace;
margin: 0.75em 0;
line-height: 1.3;
font-size: 1em;
color: #060;
background-color: #fff;
}
The paragraph size and some other attributes are defined earlier in the CSS (cascading means that attributes are inherited).
If you were doing this on a single line, you'd probably be better off figuring out whether that single line needs to be displayed differently are use an alternative method of setting the text apart (e.g., bold or italics).
I've used the color attribute shortcuts #060 and #fff which are probably not supported in older browsers (those required the full #006600 and #ffffff).
Most designers no longer support older browsers because HTML5 provides for a legacy solution which will display content, if not as nicely (i.e., the content degrades gracefully).
Style sheets are wonderful tools that allow you to define each HTML object once for the entire site.
You can place inline CSS at the top of a page for CSS elements not required elsewhere on the site.
One change to the CSS can alter the look of any HTML element throughout your entire site.
Current web design (if done correctly) depends very little on the HTML for layout (or for how a particular HTML element looks).
I recommend linking to a single external css file for the entire site. This way you can change the look of an entire site by changing a few characteristics in a single file. This site uses a different style sheet for my personal pages because it has a different look and feel. A couple of pages have specific css embedded at the top of the page for styles not used elsewhere on the site.
This site now uses HTML5 which has removed support for many of the features used by earlier browsers, like <center>
, tables for layout and border="0"
within the <img>
tag to avoid a border in linked images. CSS is now used to create these effects.
There is the added bonus that the HTML defining the layout is increasingly removed from the page, making the page content lighter and easier to edit.
The following two examples will give you an idea of what a difference this makes. Both pages are identical (other than the introductory section) with the exception that the second page has NO CSS applied (use your browser's back button to return to this page):
This two-page example demonstrates the power of CSS in both the layout of a page and in the aesthetics. The content on both pages is unchanged, but the presentation is clearly superior when using CSS.
HTML is HyperText Markup Language, introduced by Tim Berners-Lee in 1989, as a method of quickly displaying information on the World Wide Web, invented only one year prior.
HTML is now maintained by the World Wide Web Consortium (W3C).
HTML uses a series of simple tags enclosed in <
and >
chevron brackets to separate the HTML from displayed text.
While HTML is sometimes referred to as code, it is not computer code. HTML is a markup language just as the M in HTML indicates.
Essentially, HTML takes plain text and places instructions around it to have the text displayed a certain way when viewed in a web browser.
Just as you don't normally see the “behind the scenes” workings of a word processing document, your viewers shouldn't see the what's behind your web page except for instructional pages like this.
Of course, it is different if you wish to create or edit the content of a website. Then you need to view the HTML behind the site.
If you ignore the HTML (and particularly the stuff at the start of a page) in a simple web page you'll see mostly normal text surrounded by tags enclosed by chevron brackets.
Check out the source HTML behind this page to see what I mean.
Many larger sites are far more complex and harder to interpret. Examples on this page are much simpler.
The current use of HTML for fancy layouts and colour schemes was never intended by Berners-Lee. His goal was simple communication between scientists.
Early websites used frames or tables in attempts to reproduce the precise layouts of print media. These attempts failed, sometimes horribly.
Early styling was embedded within websites, creating bloated sites that loaded slowly. Most people were using dial-up modems on telephone lines that offered a fraction of the speed and bandwidth we take for granted today.
Today's websites are complex, multi-source database-driven sites containing visual media and out-sourced content (including ads).
They are full of cookies, scripts, analytics and other invasive attempts to cull personal information.
The W3C no longer supports using HTML for layout and instead using cascading style sheets (CSS) for both the layout and special effects on websites.
This makes pages easier to edit because there is less HTML visible on the page.
CSS is generally moved to an external file rather than placed inline at the top of the page.
This site is created following HTML5 standards based on the W3C HTML5.x Specification. This is specified in the very simple DOCTYPE at the top of the page.
Earlier versions of this site were built as HTML 4.01 Transitional which was later upgraded to XHTML 1.1 Transitional prior to the HTML5 makeover. Both required more complex DOCTYPES.
HTML5 is much simpler, yet more powerful, than previous versions.
For example, the DOCTYPE is simply <!DOCTYPE html>
and there is improved support for video and other content that was only available using plugins when HTML 4 was developed.
On this site:
Return to top
RussHarvey.bc.ca/resources/html.html
Updated: November 14, 2024