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 viewable in the borwser, but are picked up by 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 rendered in the browser.
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.