The paragraph tag
This sentence is the contents of a <p> tag.
So is this,
...and this.
The <p> tag is probably the handiest and most commonly used of all tags.
While it's been around since HTML4 was introduced, many of you acquainted with HTML4 and earlier versions of HTML may not have ever used it. This is because it replaces the then 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:
<!DOCTYPE html>[
<html lang="en">
<head><meta charset="utf-8"
><title>My first webpage</title>
</head>
<body>
<p>My first webpage</p>
</body>
</html>
...and paste it into a text editor.
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.
Didn't work?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 add some header 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 must be closed in the reverse order in which they were opened.
<body>
<h4>Cool:</h4>
<p>This is correct.</p>
</body>
<body>
<h4>Not Cool:
<p>This is not correct.</h4></p>
</body>
Remember that each tag is a container that often contains other containers. 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
