What HTML is
It means "HyperText Markup Language"
. HTML was created by Tim
Berners-Lee, the inventor of the WWW, and has been around since the
very beginning of the web, and has changed a bit over that time,
although it hasn't really gotten any more complicated.
HTML is the markup language that's used to write web pages. It simply
describes a web page's content and its structure.
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.
Examples
<p>This is a paragraph.
Everything between these two tags is part of this
paragraph.</p>
Standalone 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 ones 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:
<IMG SRC=background.gif
WIDTH=40 HEIGHT=20 ALT="Hello">
For valid xHTML, you'd have to put:
<img src="background.gif"
width="40" height="20" alt="Hello" />
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.
Next read...
