"HTML" 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 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.
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:
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:
The following would be permissible in HTML 4, but invalid in xHTML:
For valid xHTML, you'd have to put:
Your basic, everyday HTML tags.
Code
Looks like
Here's a paragraph.
And here's a different one. It's as simple as that.
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.
Code
Looks like
Here's part of my page
And here's another bit, distinguished by the line above.
Code
Looks like
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.
Code
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
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.
Do you love our approach to crafting simple & effective web sites that just work for people?
We'd love to hear about your web strategy. Contact one of our team today!
Sign up for my regular newsletter to keep updated on everything I'm doing and thinking about in web design.
<p>This is a paragraph. Everything between these two tags is part of this paragraph.</p>