Introduction to HTML tags
HTML uses tags, which are written in pairs of angle brackets, like this <tag>.
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
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:
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.
Paragraph tag: <p> … </p>
Line-break tag: <br>
Horizontal rule tag: <hr>
Div tag: <div> … </div>
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>
How it looks
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.
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.