START A COURSE

The HTML and CSS Blog:

What You Learn in This HTML Lesson

Learning about the structure of HTML is so important I’m devoting this whole post to helping you learn HTML syntax. Focusing on the pattern of HTML will make remembering the code a breeze. Once you learn HTML syntax, you’ll know the basic building blocks of hundreds of HTML codes!

HTML syntax is grammar

HTML syntax is the grammar of the language

HTML Syntax

I used to think HTML was difficult and hard to memorize. Now I think HTML is simple and elegant. I’d like to share the breakthrough lightbulb moment that changed my thinking about HTML syntax and made it all simple.

the trick to memorizing html

My main problem was that I was trying to memorize everything and I thought everything was equally important and it seemed like hundreds of things to learn and remember (an impossible task).

The turning point was realizing that I should be memorizing the general structure of the code, the part that repeats over and over again, and then I can just look up individual tags, much like learning patterns in English language helps you read English. You know that a capital letter means a new sentence is beginning, and that a period signifies the sentence is ending. If you know the structure of a language, then it’s not too hard to look up new words and use them in your sentences. HTML is also a language, and if you learn it’s grammar, called syntax, then it is not hard to look up a word you’ve forgotten (a tag) and know just how to type it in your code.

So, the day I learned to memorize the syntax of HTML only, and look up tags changed my view of the HTML language: suddenly it seemed simple.

Bright Idea: HTML syntax helps you learn faster

That moment when it all comes together
[image by Ben Newell]

Here’s The Syntax of the Entire HTML Language:
(This is all you need to memorize)

It’s all about Tags, Attributes & Values

You might already know we often mark up content with HTML tags (also called elements) to indicate to the web browser what kind of content it is. If it is a plain paragraph, then surround it with an open and closing <p> tag. For important content, mark up with <h1> or <h2> heading tags.

It gets a little more complex when we need to add more information to the tags, using a combination of Attributes and Values. Let’s turn something complex into simplicity by learning this pattern of attributes and values.

Attributes and values are inserted into the opening tag. The basic pattern of all HTML tags, called syntax, looks like this:

<tag attribute=”value”>content</tag>

Examples of HTML Syntax:

Perhaps this will help you remember HTML syntax...you junkie.

Perhaps this will help you remember HTML syntax…you junkie.

HTML syntax

HTML syntax

Let’s use an example to make sense out of this pattern of attributes and values.

First, the Tag

Here we have a heading and its paragraph, marked up with <h1> HTML tags for the important heading, and the HTML <p> paragraph tag to indicate the beginning and end of the paragraph.

<h1>Do you love or hate cat videos?</h1>

<p>Cat videos have taken over YouTube, causing some to consider it CatTV.</p>

Then, add Attributes

The first thing to notice is that the attributes we are going to add to the tag always go onto the opening tag. The closing tags never have attributes or values added to them. Try to think of Attributes as defining the category I am describing, and the Value being the specific description for that category. For example, if there were a tag to describe hair in HTML, I might add attributes to describe the texture, length, or color of hair.

<hair length=”short” texture=”curly” color=”scarlet”>

Girl hair equals blonde

HTML Syntax using an imaginary tag as an example

Of course HTML doesn’t actually include a hair tag, or allow you to make up tags, so here’s an example using the <p> paragraph tag that we used above to mark up our important paragraph. Normally paragraph tags are aligned on the left by default. Let’s add an attribute to change that default alignment to be centered.

Within the opening tag, the name of the attribute will be followed by an equal sign. There should be a space after the tag name, to separate the attribute from the tag.

<p align=”center”>Cat videos have taken over YouTube, causing some to consider it CatTV.</p>

Align is our attribute, but you’ll need the value too whenever you add an attribute. Can you guess what the value is? I’ll not let you shiver in anticipation.

Lastly, Add a “Value”

The align attribute can cause text to be left aligned, centered, right-aligned or justified (aligned on both sides). Always put the value in quotes. In this case, to center the <p> paragraph, add align=”center” inside the opening <p> tag.

<p align=”center”>Cat videos have taken over YouTube, causing some to consider it CatTV.</p>

When you think of the attribute=”value” pair as a single item, it makes sense that there is a space before the attribute but not after: the value is attached to its attribute, so there are never any spaces in the attribute=”value” pair.

Multiple Attributes

Sometimes there are more than one attribute needed by a tag. For example, the <img> tag for images often specifies the height and width of the image. When you need multiple attributes, separate each attribute=”value” pair with one space.

For example, the image tag looks like this:

<img src=”path-to-my-picture.jpg” alt=”alternative text description of the picture” height=”250” width=”350” />

That’s a lot of attributes! Look carefully at the spaces and you’ll see they are only used to separate each attribute=”value” pair from the tag name and each other.

You might wonder about the order of attributes, when you have so many. Does it matter? No!  When using multiple attributes the order does not matter at all. Sweet! One less thing to memorize. So, the following examples are all correct, even though they each place the attributes in a different order.

<img src=”path-to-my-picture.jpg” height=”250” width=”350” alt=”alternative text description of the picture” />

<img src=”path-to-my-picture.jpg” width=”350” height=”250” alt=”alternative text description of the picture” />

<img src=”path-to-my-picture.jpg” alt=”alternative text description of the picture” width=”350” height=”250” />

Claude sings about HTML syntax

Claude sings about HTML syntax

Examples of HTML Syntax

Now that you’ve memorized the key to HTML syntax it should be easy to learn more about HTML:

<tag attribute=”value”>content</tag>

Here’s some examples. Try to identify the various tags, attributes, and values:

<h1 align=”center”> content</h1>

<table cellpadding=”0″>

<a href=”http://www.cloudcult.com“>great live band</a>

<img src=”images/picture1.jpg” alt=”folk singers busking at the BART station” width=”200″ height=”500″  />

If there are multiple attributes, separate each value/attribute pair with one space. Notice that the order of attributes does not matter when there are multiple attributes. There should be no space around the equal sign where the value of an attribute is defined within quotes.

For Example:

or

Both are correct, the order of attributes does not matter.

If you just remember this HTML syntax than writing HTML will be easy for you!

html syntax rules reminderasauraus

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.
  • Emad

    thank you very much very good explanation on tags,attributes and value.

HTML Lessons

©2013 Diane Presler. All rights reserved.