I have two fully working pages of HTML, but there’s just one extra bit to add to make them true blue web pages.
For this last bit, you aren’t going to see the benefits quite yet, but they’ll become increasingly helpful as you carry on.
For now, they will help you be as explicit as possible with whichever device is reading your site.
We are going to make your pages complete, by giving them a head and a body.
the <head>
The head tag contains meta information about your site.
Things placed inside the head are generally not visible on the website, but are picked up the browser, search engines, other pages and more.
It can contain nice details like styling info, a description and author, how it should look when shared on social media, and more.
For now, we’ll just add a title...start out simple:
In my index.html file, I add a <head> and <title> like so:
<head> <title>Zach World</title> </head> <h1>Zach World </h1> <p>This is my <em>personal</em> webpage. Stay awhile!</p> <p>I think <a href="/birds.html">birds</a> are cool.</p>
The page hasn’t changed in the browser, but if you look at the tab, you’ll see the title.
The <body>
Similarly, adding a body won’t show much yet, but it is usefully explicit. The body contains everything that should be visible on the website.
In other words, it’s everything you’ve written while reading this zine!
<head> <title>Zach World</title> </head> <body> <h1>Zach World </h1> <p>This is my <em>personal</em> webpage. Stay awhile!</p> <p>I think <a href="/birds.html">birds</a> are cool.</p> </body>
Last little bit
Finally, to be as explicit and helpful as possible, it can be good to add a <doctype> declaration at the top of
your page. The browser can view many different types of files beyond html (like rss feeds or
pdf’s), so it can be nice to tell it, first thing, what sort of text it can expect.
Then, you can wrap the whole thing up in <html>, to really drive home the
point.
We can add a language(or “lang”) attribute to our <html> tag to declare what language
our content is written in. This is helpful for the browser to know how to display text, and
for screen readers to know how to pronounce it.
In my case, I’ll add lang="en", as “en” is short for English.
Basically, you got a pretty good relationship with the browser at this point, each of you being as helpful as possible to each other and this is the cherry on top.
So the full page looks like so:
<!doctype HTML>
<html lang='en'>
<head>
<title>Zach World</title>
</head>
<body>
<h1>Zach World </h1>
<p>This is my <em>personal</em> webpage. Stay awhile!</p>
<p>I think <a href="birds.html">birds</a> are cool.</p>
</body>
</html>
And that’s it! An honest-to-goodness, accessible, fully valid web page.
It is a modest start, but will be an incredible foundation, and it all started with a couple words on a blank page.