A friendly HTML tutorial about connecting web pages to each other
The previous chapter covered
some very important HTML elements, but we were only dealing with a single web
page. Links and images are fundamentally different from those elements in that
they deal with external resources. Links point the user to a different
HTML document, and images pull another resource into the page.
To use links and images, we’ll also need to learn about another
component of the HTML syntax: attributes. Attributes will open up a whole new
world of possibilities for our web pages.
In this chapter, we’ll create a simple website composed of several
HTML documents and image files. It may be entitled Links and Images,
but the central theme of this chapter is actually around file and folder
organization. As we start working with multiple files, we’ll discover the
importance of being an organized web developer.
Setup
This chapter is all about linking web pages together, so we’ll need to
create some new HTML files before we code anything up. We’ll be working
with three separate web pages this chapter, along with a few image files of
various formats:
To get started, create a new folder called links-and-images to
store all our files. You should be able to do this in Atom using the same
process we followed in the Introduction chapter.
Links Page
Next, add a new file to that folder called links.html and
insert the following HTML template. This should be familiar to you from the
previous chapter.
Note that you can create a new folder in Atom by right-clicking the file
browser pane and selecting New Folder in the contextual menu.
Life is better when you never need to leave your text editor.
Image Downloads
We’ll be embedding images in our images.html file, so be
sure to download these example mochi images, too.
Unzip them in your links-and-images folder, keeping the parent
images folder from the ZIP file. Your project should now look like
this:
Anchors
Links are created with the <a> element, which stands for
“anchor”. It works just like all the elements in the previous
chapter: when you wrap some text in <a> tags, it alters the
meaning of that content. Let’s take a look by adding the following
paragraph to the <body> element of
links.html:
<p>This example is about links and <a>images</a>.</p>
If you load the page in a web browser, you’ll notice that the
<a> element doesn’t look like a link at all. Yes,
unfortunately, the <a> element on its own doesn’t do much of
anything.
Links
In the same way that an element adds meaning to the content it contains, an
HTML “attribute” adds meaning to the element it’s attached
to.
Different elements allow different attributes, and you can refer to MDN for
details about which elements accept which attributes. Right now, we’re
concerned with the href attribute because it determines where the
user goes when they click an <a> element. Update your link
to match the following:
<p>This example is about links and <ahref='images.html'>images</a>.</p>
Notice how attributes live inside the opening tag. The attribute
name comes first, then an equal sign, then the “value” of the
attribute in either single or double quotation marks. This syntax distinguishes
attributes from content (which goes between the tags).
The extra bit of information provided by the
href attribute tells the browser that this <a>
element is in fact a link, and it should render the content in its default blue
text:
Absolute, Relative, and Root-Relative Links
Now that we’re working with links, we need to understand how a website is
structured. For our purposes, a website is just a collection of HTML files
organized into folders. To refer to those files from inside of another file,
the Internet uses “uniform resource locators” (URLs). Depending on what you’re
referring to, URLs can take different forms. The three types of URLs we’ll be
dealing with are highlighted below:
Absolute, relative, and root-relative links refer to the value of the
href attribute. The next few sections will explain how and when to
use each of them. But first, let’s add the following content to our
links.html file:
<p>This particular page is about links! There are three kinds of links:</p><ul><!-- Add <li> elements here --></ul>
Absolute Links
“Absolute” links are the most detailed way you can refer to a web resource.
They start with the “scheme” (typically http:// or
https://), followed by the domain name of the website, then the
path of the target web page.
For example, try creating a link to the Mozilla Developer Network’s
HTML element reference:
<li>Absolute links, like to
<ahref='https://developer.mozilla.org/en-US/docs/Web/HTML'>Mozilla
Developer Network</a>, which is a very good resource for web
developers.</li>
It’s possible to use absolute links to refer to pages in your own
website, but hard-coding your domain name everywhere can make for some tricky
situations. It’s usually a better idea to reserve absolute links only for
directing users to a different website.
Relative Links
“Relative” links point to another file in
your website from the vantage point of the file you’re editing. It’s implied
that the scheme and domain name are the same as the current page, so the only
thing you need to supply is the path.
Here’s how we can link to our extras.html file from inside of
links.html:
<li>Relative links, like to our <ahref='misc/extras.html'>extras
page</a>.</li>
In this case, the href attribute represents the file path to
extras.html from the links.html file. Since
extras.html isn’t in the same folder as links.html,
we need to include the misc folder in the URL.
Each folder and file in a path is separated by a forward slash
(/). So, if we were trying to get to a file that was two
folders deep, we’d need a URL like this:
misc/other-folder/extras.html
Parent Folders
That works for referring to files that are in the same folder or a deeper
folder. What about linking to pages that are in a directory above the
current file? Let’s try creating relative links to
links.html and images.html from within our
extras.html file. Add this to extras.html:
<p>This page is about miscellaneous HTML things, but you may
also be interested in <ahref='links.html'>links</a> or
<ahref='images.html'>images</a>.</p>
When you click either of those links in a web browser, it will complain that
the page doesn’t exist. Examining the address bar, you’ll discover
that the browser is trying to load misc/links.html and
misc/images.html—it’s looking in the wrong folder!
That’s because our links are relative to the location of
extras.html, which lives in the misc folder.
To fix this, we need the .. syntax. Two consecutive dots in
a file path represent a pointer to the parent directory:
<p>This page is about miscellaneous HTML things, but you may also be
interested in <ahref='../links.html'>links</a> or <ahref='../images.html'>images</a>.</p>
This is like saying, “I know extras.html is in the
misc folder. Go up a folder and look for links.html
and images.html in there.”
To navigate up through multiple directories, use multiple ..
references, like so:
../../elsewhere.html
Relative links are nice because they let you move around entire folders
without having to update all the href’s on your
<a> elements, but they can get a little confusing when all
your links start with a bunch of dots. They’re best for referring to
resources in the same folder or in a standalone section of your website.
For example, all the images in HTML & CSS Is
Hard are loaded with relative URLs (we’ll learn how to do images
a moment). This allows us to rename any of our chapter slugs without having to
update all our image paths.
Root-Relative Links
“Root-relative” links are similar to the previous section, but
instead of being relative to the current page, they’re relative to the
“root” of the entire website. For instance, if your website is
hosted on our-site.com, all root-relative URLs will be relative to
our-site.com.
Unfortunately, there is one caveat to our discussion of root-relative links:
this entire tutorial uses local HTML files instead of a website hosted on a web
server. This means we won’t be able to experiment with root-relative
links. But, if we did have a real server, the link to our home page would look
like this:
<!-- This won't work for our local HTML files --><li>Root-relative links, like to the <ahref='/'>home page</a> of our website,
but those aren't useful to us right now.</li>
The only difference between a root-relative link and a relative one is that
the former starts with a forward slash. That initial forward slash
represents the root of your site. You can add more folders and files to the
path after that initial slash, just like relative links. The following path
will work correctly no matter where the current page is located (even in
misc/extras.html):
/images.html
Root-relative links are some of the most useful kinds of links.
They’re explicit enough to avoid the potential confusion of relative
links, but they’re not overly explicit like absolute links. You’ll
see a lot of them throughout your web development career, especially in larger
websites where it’s hard to keep track of relative references.
Link Targets
Attributes alter the meaning of HTML elements, and sometimes you need to
modify more than one aspect of an element. For example, <a>
elements also accept a target attribute that defines where to
display the page when the user clicks the link. By default, most browsers
replace the current page with the new one. We can use the target
attribute to ask the browser to open a link in a new window/tab.
Try changing our absolute link in links.html to match the
following. Notice how the second attribute looks just like the first, but
they’re separated from each other by a space (or a newline):
<li>Absolute links, like to
<ahref='https://developer.mozilla.org/en-US/docs/Web/HTML'target='_blank'>Mozilla Developer Network</a>, which is a very good
resource for web developers.</li>
The target attribute has a few pre-defined values
that carry special meaning for web browsers, but the most common one is
_blank, which specifies a new tab or window. You can read about
the rest on MDN.
Naming Conventions
You’ll notice that none of our files or folders have spaces in their
names. That’s on purpose. Spaces in URLs require special handling and
should be avoided at all costs. To see what we’re talking about, try
creating a new file in our links-and-images project called
spaces are bad.html. Add a little bit of text to it, then open it
in Google Chrome or Safari (Firefox cheats and preserves the spaces).
links-and-images/spaces%20are%20bad.html
In the address bar, you’ll see that all our spaces have been replaced
with %20, as shown above. Spaces aren’t allowed in URLs, and
that’s the special encoding used to represent them. Instead of a space,
you should always use a hyphen, as we’ve been doing throughout this
tutorial. It’s also a good idea to use all lowercase characters for
consistency.
Notice how there’s a direct connection between our file/folder names
and the URL for the web page they represent. The names of our folders and files
determine the slugs for our web pages. They’re visible to the user, which
means you should put in as much effort into naming your files as you put into
creating the content they contain.
These naming conventions apply to all of the files in your
site—not just HTML files. CSS files, JavaScript files, and images should
avoid spaces and have consistent capitalization, too.
Images
Unlike all the HTML elements we’ve encountered so far, image content
is defined outside of the web page that renders it. Fortunately for
us, we already have a way to refer to external resources from within an HTML
document: absolute, relative, and root-relative URLs.
Images are included in web pages with the <img/> tag and
its src attribute, which points to the image file you want to
display. Notice how it’s an empty element like
<br/> and <hr/> from the previous
chapter. (Don’t add this to our project just yet. We’ll deal with concrete
examples in the next section.)
<imgsrc='some-photo.jpg'/>
Retina displays and mobile devices make image handling a little bit more
complicated than a plain old <img/> tag. We’ll leave
these complexities for the Responsive Images chapter of this
tutorial. Also be sure to check out the <figure> and
<figcaption> element in the Semantic HTML chapter.
For now, let’s focus on the many image formats floating around
the Internet.
Image Formats
There’s four main image formats in use on the web, and they were all
designed to do different things. Understanding their intended purpose goes a
long way towards improving the quality of your web pages.
The next few sections will walk through ideal use cases for each of these
image formats. Make sure you’ve unzipped these mochi
images into your links-and-images project before moving
on.
JPG Images
JPG images are designed for handling large color palettes without
exorbitantly increasing file size. This makes them great for photos and images
with lots of gradients in them. On the other hand, JPGs don’t allow for
transparent pixels, which you can see in the white edges of the image
below if you look real close:
Embed this mochi.jpg image in our images.html page
with the following snippet (this also includes a bit of navigation to our other
pages):
<p>This page covers common image formats, but you may also be looking for <ahref='links.html'>links</a> and <ahref='misc/extras.html'>useful
extras</a>.</p><h2>JPGs</h2><p>JPG images are good for photos.</p><imgsrc='images/mochi.jpg'/>
GIF Images
GIFs are the go-to option for simple animations, but the trade off is that
they’re somewhat limited in terms of color palette—never use them
for photos. Transparent pixels are a binary option for GIFs, meaning you
can’t have semi-opaque pixels. This can make it difficult to get high
levels of detail on a transparent background. For this reason, it’s
usually better to use PNG images if you don’t need animation.
You can add this little guy to our images.html file with the
following:
<h2>GIFs</h2><p>GIFs are good for animations.</p><imgsrc='images/mochi.gif'/>
PNG Images
PNGs are great for anything that’s not a photo or animated. For
photos, a PNG file of the same quality (as perceived the human eye) would
generally be bigger than an equivalent JPG file. However, they do deal with
opacity just fine, and they don’t have color palette limitations. This
makes them an excellent fit for icons, technical diagrams, logos, etc.
Let’s add this PNG image to our example project as well:
<h2>PNGs</h2><p>PNGs are good for diagrams and icons.</p><imgsrc='images/mochi.png'/>
SVG Images
Unlike the pixel-based image formats above, SVG is a vector-based graphics
format, meaning it can scale up or down to any dimension without loss
of quality. This property makes SVG images a wonderful tool for responsive design. They’re
good for pretty much all the same use cases as PNGs, and you should use them
whenever you can.
These 300×300 pixel images were originally 100×100 pixels, but scaling them
up clearly shows the difference between them. Notice the crisp, clean lines on
the left SVG image, while the PNG image on the right is now very pixelated.
Despite being a vector format, SVGs can be used exactly
like their raster counterparts. Go ahead and add the mochi.svg to
our images.html page:
<h2>SVGs</h2><p>SVGs are <em>amazing</em>. Use them wherever you can.</p><imgsrc='images/mochi.svg'/>
There is one potential issue with SVGs: for them to display consistently
across browsers, you need to convert any text fields to outlines using your
image editor (e.g., Abode Illustrator or Sketch). If your images contain a lot of
text (like the fancy screenshots in this tutorial), this can have a big impact
on file size. For this reason, InternetingIsHard.com
uses PNGs instead of SVGs, even though SVGs are so awesome.
Image Dimensions
By default, the <img/> element uses the inherit
dimensions of its image file. Our JPG, GIF, and PNG images are actually
150×150 pixels, while our SVG mochi is only 75×75 pixels.
As we’ll discuss further in Responsive Images, pixel-based
image formats need to be twice as big as you want them to appear on retina
displays. To get our pixel-based images down to the intended size
(75×75), we can use the <img/> element’s
width attribute. In images.html, update all of our
pixel-based images to match the following:
<!-- In JPGs section --><imgsrc='images/mochi.jpg'width='75'/><!-- In GIFs section --><imgsrc='images/mochi.gif'width='75'/><!-- In PNGs section --><imgsrc='images/mochi.png'width='75'/>
The width attribute sets an explicit dimension for the image.
There’s a corresponding height attribute, as well. Setting
only one of them will cause the image to scale proportionally, while defining
both will stretch the image. Dimension values are specified in pixels, and you
should never include a unit (e.g., width='75px' would be
incorrect).
The width and height attributes can be useful, but
it’s usually better to set image dimensions with CSS so you can alter them with
media queries. We’ll discuss this in more detail once we get to responsive design.
Text Alternatives
Adding alt attributes to your <img/>
elements is a best practice. It defines a “text alternative” to the
image being displayed. This has an impact on both search engines and users with
text-only browsers (e.g., people that use text-to-speech software due to a
vision impairment).
Update all our images to include descriptive alt
attributes:
<!-- In JPGs section --><imgsrc='images/mochi.jpg'width='75'alt='A mochi ball in a bubble'/><!-- In GIFs section --><imgsrc='images/mochi.gif'width='75'alt='A dancing mochi ball'/><!-- In PNGs section --><imgsrc='images/mochi.png'width='75'alt='A mochi ball'/><!-- In SVGs section --><imgsrc='images/mochi.svg'alt='A mochi ball with Bézier handles'/>
For more examples of how to use the alt attribute, please refer
to the ridiculously detailed official
specification.
More HTML Attributes
Now that we’re (hopefully) more than comfortable with the HTML
attribute syntax, we can add a couple of finishing touches to our HTML
boilerplate code. Every web page you create should define the language
it’s written in and its character set.
Document Language
A web page’s default language is defined by the lang
attribute on the top-level <html> element. Our document is
in English, so we’ll use the en country code as the
attribute value (do this for all of the pages we created):
<htmllang='en'>
If you’re not sure what the country code for your language is, you can
look it up here
under the Subtag field.
Character Sets
A “character set” is kind of like a digital alphabet for your
browser. It’s different from the language of your document in that it
only affects how the letters themselves are rendered, not the language of the
content. Let’s copy and paste some international characters into our
misc/extras.html web page and see what happens.
<h2>Character Sets</h2><p>You can use UTF-8 to count in Turkish:</p><ol><li>bir</li><li>iki</li><li>üç</li><li>dört</li><li>beş</li></ol>
When you view this in a browser, you’ll see some weird stuff where the
ü, ç, ö, and ş characters
should be:
That’s because the default character set for most browsers
doesn’t accommodate these “special” characters. To fix this,
specify a UTF-8 character encoding by adding a <meta>
element with a charset attribute to the <head>
of our misc/extras.html file:
<metacharset='UTF-8'/>
The special characters should now render correctly. These days, UTF-8 is
sort of like a universal alphabet for the Internet. Every web page you create
should have this line in its <head>.
HTML Entities
Ok, so this last section doesn’t actually have anything to do with
links or images, but we do need to discuss one more thing before switching
gears into CSS. An “HTML entity” is a special character that
can’t be represented as plain text in an HTML document. This typically
either means it’s a reserved character in HTML or you don’t have a
key on your keyboard for it.
Reserved Characters
The <, >, and & characters
are called “reserved characters” because they aren’t allowed
to be inserted into an HTML document without being encoded. This is because
they mean something in the HTML syntax: < begins a new tag,
> ends a tag, and, as we’re about to learn,
& sets off an HTML entity.
In misc/extras.html, add the following:
<h2>HTML Entities</h2><p>There are three reserved characters in HTML: < > and &. You
should always use HTML entities for these three characters.</p>
Entities always begin with an ampersand (&) and end with a
semicolon (;). In between, you put a special code that your
browser will interpret as a symbol. In this case, it interprets
lt, gt, and amp as less-than,
greater-than, and ampersand symbols, respectively.
There’s a crap-ton of HTML entities. We’ll leave you to
explore most of them
on your own.
Quotes
Curly quotes are by no means necessary, but if you care about typography they’ll be some of
the most common HTML entities you’ll use. There’s four different
kinds of curly quotes (opening and closing single and double quotes):
“
”
‘
’
You can use them in place of ' and " straight
quotes, like so:
<p>If you’re into “web typography,” you’ll also find
yourself using curly quotes quite a bit.</p>
Unlike straight quotes, these curly quote entities should hug the text.
UTF-8 and HTML Entities
In the olden days of the web, HTML files weren’t allowed to have
special characters in them, making entities much more useful. But, since
we’re now using a UTF-8 character set, we should be able to insert any
character directly into the HTML document. This makes entities primarily useful
as reserved characters or for convenience when authoring straight HTML.
Summary
A website is basically just a bunch of HTML, image, and (as we’ll
learn about shortly) CSS files linked together. You should start thinking of a
website as a beautiful way for users to navigate the folders and files we
create as part of the web development process. With that perspective, it should
be clear than maintaining a well-organized file system is a critical aspect of
creating a website.
We also learned about a few important attributes (lang and
charset) that give us the basic template you should use as the
beginning of every web page you ever create:
<!DOCTYPE html><htmllang='en'><head><metacharset='UTF-8'/><title>Some Web Page</title></head><body><h1>Some Web Page</h1><!-- Rest of the page content --></body></html>
However, we’re still missing one really big piece: CSS. In the next
chapter, we’ll discover more HTML elements and attributes that will let
us attach CSS styles to our entire website. The ability to work with multiple
files and link them to each other in intelligent ways will become even more
important than it was in this chapter.
