This guide will introduce you to the basics of HTML syntax. Once you learn a few tags (and the “rules of the road” of how they go together) you will be up and running in no time. But first, a note about designing the web.

What You See vs. What you Mean

For many of us, our experience of surfing the web is a visual one – we notice the colors, fonts, and images of the websites we visit while we read what those sites say. It’s tempting, when you’re learning to design websites, to want to think visually, and to get our “designer hat” on. Let’s fight the urge to do this, and I’ll tell you why…

Web pages are made up of two main technologies, HTML, and CSS, and they both serve different functions. All the styling – the fonts, colors, and layout choices – are contained in the CSS file. The meaning of your document – the text itself, and how that text is organized – is all housed in the HTML file. You should be able to take away the CSS file and still be left with a perfectly readable, organized document (albeit a plain-looking one). This is where we’re going to focus, because the HTML is the core foundation of your page.

HTML is semantic: It’s focused on what your document means. CSS is presentational: It’s focused on how your document looks.

As we learn about HTML tags and syntax, keep in the back of your mind that we’re trying to help the browser understand the meaning of our writing, not how it looks. (And if you’re still worried about how your page is going to look — don’t be! Nowadays, there are great CSS templates that can translate your meaningful HTML into beautiful designs with very little effort. We’re just not there yet. For now, let’s keep it simple on ourselves and focus on creating semantic, meaningful HTML).

It’s all about tags

You can think of HTML as surrounding pieces of text with “tags” that tell the browser more about what kind of information it is.

opening tags, closing tags

In this example: we see <tag> a picture of a puppy </tag> You put an opening tag at the beginning of a piece of text, and a closing tag at the end. The syntax of the tags almost match each other, except the closing tag has a / before the tag name to tell the browser that this is where that tag pair closes.

tags tell the browser what your text means

To extend the example a little, we have <puppy> a picture of a puppy </puppy> Though “Puppy” is not a real HTML tag, the idea is the same – we put an opening tag to show where the puppy “starts”, then the puppy in the middle, and then a closing tag to tell the browser where the puppy “ends”. Sure, this is a silly example (and might be really weird if you can’t see the example slide), but it’ll make sense when we start seeing real HTML tags, next.

Review

For now remember:

• In HTML, we use tags to tell the browser what information means.
• Tags come in pairs, with an opening tag at the beginning and a closing tag at the end.
  

  Try it yourself!

  This is a basic HTML page layout following the syntax we just learned. Try adding a new heading and paragraph to this page following the example below:

Let’s keep going!

When you’re ready to progress, press the button to go to the next lesson.
To the Next Lesson!