Introduction to HTML – learn HTML basics with a few simple HTML tags

Introduction to HTML tags

HTML uses tags, which are written in pairs of angle brackets, like this <tag>.

Paired tags

Most tags are paired, i.e. they begin with an opening tag and end with a matching closing tag.
The pair of tags then defines the structure of the content between them.

Simple HTML Example

<p>This is a paragraph. Everything between these two tags is part of this paragraph.</p>

Standalone HTML tags

A few tags don’t have end tags.
These are tags that are stand-alone structure, and don’t need to contain content to be meaningful.

The main basic standalone HTML are:

<br>: Line-break. Starts a new line. (<br /> in xHTML)
<hr>: A horizontal rule. Puts a line across the page. (<hr /> in xHTML)
<img>: An image. See below for more information about this.
<meta>: Don’t worry about this one for now. It’s also hidden in the document’s <head>, and is a place for putting content about the document that doesn’t need to be displayed on-screen.

What’s xHTML then?

HTML comes in various versions, which dictate the sets of allowable tags.
xHTML is the latest version of HTML, and is simply HTML written in a strict XML syntax, so that xHTML documents are valid XML documents.
There isn’t much difference.
The only important thing you will need to know is that, if your web page says it’s HTML, you ought to use proper HTML tags.
If your web page says it’s xHTML, then it ought to contain only valid xHTML tags.

The main things you’ll notice about xHTML are:

Tags must be lowercase
All parameters in tags must be in quotes
Self-closing (standalone) tags must end with a forward-slash (note: which must be preceded with a space!)

The following would be permissible in HTML 4, but invalid in xHTML:

For valid xHTML, you’d have to put:

Basic formatting in HTML

Your basic, everyday HTML tags.

<h1> … </h1>, <h2> … </h2>, <h3> … </h3>: Headings (heading 1, 2 3, etc.) Used for marking section headings in your web pages.
<p> … </p>: We saw this one above. It’s a paired tag that says "Here’s where the paragraph starts" and "Here’s the end of the paragraph"
<br>: Another familar tag. Inserts a new line.
<hr>: Horizontal rule
<div> … </div>: This is one of the most common tags. Basically, a div is a general-purpose box that takes up the full width of the space it’s in.
<span> .. </span>: This is another general-purpose container. Whereas a div is a blocky full-width box, this quietly wraps round anything it contains. See below for details.
<strong> .. </strong>: A section of text that you want to be stressed. Normally rendered as bold in web browsers (although you can control this)
<em> .. </em>: Emphasised text – normally rendered in italics in web browsers.
<title>: This tag goes in the document’s head section, and isn’t displayed on the web page itself. It says what the title of the web page is, and is displayed in the browser’s title bar (very top).

Paragraph tag: <p> … </p>

Code

<p>
Here’s a paragraph.
</p>
<p>
And here’s a different one.
It’s as simple as that.
</p>

Looks like

Here’s a paragraph.

And here’s a different one.
It’s as simple as that.

Line-break tag: <br>

Code

I’d like to write some text<br>and then have the next bit on the line below.

Looks like

I’d like to write some text
and then have the next bit on the line below.

Horizontal rule tag: <hr>

Code

<p>Here’s part of my page.</p>
<hr>
<p>And here’s another bit, distinguished by the line above.</p>

Looks like

Here’s part of my page

And here’s another bit, distinguished by the line above.

Div tag: <div> … </div>

Code

Here’s some content…
<div>This is a div.</div>
<div>And this is another one. Works pretty much like a new paragraph for now.</div>
Here’s some more content…

Looks like

Here’s some content…

This is a div.

And this is another one. Works pretty much like a new paragraph for now.

Here’s some more content…

Basically, that’s it about <div>s. They’re boxes, and (unless you tell them otherwise), they occupy the full width of the space available to them.

It’s only when we get on to CSS that we can make divs do all kinds of interesting things.

Span tag: <span> … </span>

Code

<p>Here’s a paragraph of text. What I want to happen is to make <span style=”font-weight:bold;”>some of the text bold</span>, and then make <span style=”color:red;”>some of it red</span>, and <span style=”background:yellow;”>yet another bit on a yellow background</span>. <span>Now, some of this text may wrap round onto new lines, but that’s OK.</span></p>

How it looks

Here’s a paragraph of text. What I want to happen is to make some of the text bold, and then make some of it red, and yet another bit on a yellow background. Now, some of this text may wrap round onto new lines, but that’s OK.

If you look carefully at the code above, you may notice that spans don’t actually do anything on their own.
The last sentence is contained in a blank <span>, which has no effect on anything.
The only ones you notice in any way are the ones I’ve styled (using inline CSS – not the only or best way to apply styling, but we’ll come to that later).

Spans are useful when you want to apply some styles to a portion of content without affecting the layout in any way.

Here’s what would happen if I replaced all the spans with divs.

Here’s a paragraph of text. What I want to happen is to make

some of the text bold

, and then make

some of it red

, and

yet another bit on a yellow background

Now, some of this text may wrap round onto new lines, but that’s OK.

The divs are messing up my nice neat paragraph, because every div has to start on a new line, and have a new line after it, so that it can take up the full width available.