This sentence is the contents of a
So is this,
<p> tag is probably the handiest and most commonly used of all tags.
While it's been around since HTML was introduced, many of you who have worked in web design may not have ever used it. This is because it replaces the previously ubiquitous
<font> tag that was "deprecated" in HTML4, but still worked. It does not work in HTML5.
Web designers who haven't kept up with the development of HTML standards (tut-tut) will find this to be the biggest difference between HTML5 and earlier versions of HTML.
Take a look at this page's source code. *
There you will see <p>. < displays the "less than" symbol and > the "greater than" symbol. If I didn't use them the browser would think
<p> was an actual tag.
These symbols are part of the Universal Character Set. While it's good to know it exists, if at all possible avoid this stuff like the plague – especially as a beginner. It's just awful – geek jargon on steroids.
No doubt you saw all kinds of things in the source code that made no sense. Don't worry; it will only get worse – at least for a while and then slowly but surely it will start coming together.
Now you are ready to make your first page. Take a deep breath and
- ...copy this:
<title>My first webpage
<p>My first webpage
...and paste it into a text editor.**
The code above is indented solely to make it more legible and easier to debug. Indenting does not effect the functioning of the elements in any way. Get in the habit of indenting. It may not seem like it now, but you will save yourself a lot of trouble down the line.
While there are any number of good (even free) text editors available, for now I recommend using Notepad on Windows machines and Text Wrangler on Macs **. Do not use MS Word! Word is a "word processor" that adds formatting to the code.
Save the file to your desktop as my-first-webpage.html. On a PC go to your desktop and double click my-first-webpage.html which, in a perfect world, will open in your favorite browser.
- Did you use MS Word?
- Don't use Word or a word processor, use a text editor.
- Did you save it as my-first-webpage.html?
- Text editors save text files as .txt unless explicitly instructed otherwise. Go back to your text editor and click "File", "Save As" and type my-first-webpage.html. I don't know how to do this on a Mac but it can't be all that different from a PC.
- Did you save it to your desktop?
- Actually you can save it anywhere you want as long as you can find it later.
- Still doesn't work?
- Welcome to my world.
The thing not to do is get frustrated. Take a break or better yet, sleep on it. I can't tell you how many times I have woken up fresh and resolved issues in a matter of minutes that I spent hours messing with the night before.
Assuming it did work, you have successfully made your first page. Now change the contents of the
<p> tag, add a new
<p> and some heading tags. Remember that each time you make a change you need to save the file and refresh the browser.
You now know a couple of "words" in HTML5. Now you need to learn an important grammar rule:
- Tags can be nested, however they must be opened and closed in order.
<div> tag (which we will get into later) can be closed either before you open the
<p> tag (Example 1), or after the
<p> tag is closed (Example 2), but not while the
<p> tag is open (Example 3) nor after the
<body> tag has been closed (Example 4).
Take a moment to make sure you understand nesting. Remember that a tag is a container that often contains other tags. Like a Russian doll, everything opens and closes in order. Unfortunately, unlike Russian dolls, it's not always easy to keep track of what goes where, but with practice you'll get the hang of it.
Universal Character Set
The Universal Character Set, defined by the International Standard ISO/IEC 10646, Information technology – Universal multiple-octet coded character set is a standard set of characters upon which many character encodings are based.
google · wikipedia · oxford
* When you write HTML you are creating source code. On a PC in Chrome or FireFox right click anywhere on the page (except the ads) and select "View page source", or even easier just click "Ctrl-U". In IE "Ctrl-U" doesn't work; you have to right click the page and select "View Source". If you have any problems or are in a different browser search "source code" in help.