5-minute HTML

With Whizzywig and other "rich text" editors in widespread use, it is not necessary to know HTML.

Headings and paragraphs

This is a paragraph.

Here's what the previous 2 lines look like as HTML:

<h2>Headings and paragraphs</h2>
<p>This is a paragraph.</p>

The bits between < and > are HTML "tags".

<h2> Means "start a level 2 Heading" - we are using level 2 because the main page title -5 minute HTML - is H1.
Headings range from H1 - the largest, to H6 - the smallest, but 3 or 4 levels is plenty for most pages.
 </h2> means end the heading.

<p> means start a new paragraph.
 </p> means end the  paragraph - tags once opened should be closed with a matching tag like this.

Structure your page using headings and paragraphs and it will look better to both humans and search engines.

Sometimes you want to start a new line without starting a new paragraph:
<br /> is the tag to do this. The '/>' bit tells us that this tag is self closing.

You need this because HTML normally takes no notice of new lines it finds in your text so that

line one 
line two<br/>still line two?

shows as:

line one line two
still line two?

Stylesheets: HTML and CSS in partnership

What makes headings maroon on this page? How much space between paragraphs?

The way each tag actually looks - we say, "how the browser renders it" - is determined by a stylesheet: more accurately, Cascading Style Sheets or CSS.

CSS can set rules such that, for example, text inside an h1 tag is always maroon, lower case and in a preferred font.

Style sheets keep web pages on the same site looking consistent.

Anchors: Away!

The 'hyper text' part of 'Hyper Text markup Language' is all about links. You click a link on one page and magically you get carried away to somewhere else on the site, or the world wide web.

The bit of text that forms the link is called the 'anchor' and it has its own tag in HTML:

<a href="http://abitabout.com">Search wikipedia and the web in one go</a>
gives Search wikipedia and the web in one go

<a...> starts the anchor text and must be closed with </a>.

href= the hypertext page reference, or the address (URL) of the destination page.

'Search wikipedia and the web in one go' is the text that makes your link. Depending on your style sheet  it may be underlined or blue, or whatever rule has been set for links.

Far too often, people use "click here" for the anchor text, but you shouldn't really.

href is an example of an attribute. Not all tags need attributes.

Be strong, be bold

Tags like <h3> or <p> are 'block level':
they always start a new line.

<a>  is an 'inline' tag. Links can appear in the middle of a line.

Two more useful inline tags are <strong> and <em>:

Here is some <strong>bold text</strong> whilst <em>this is italic</em>.
produces:
 Here is some bold text; whilst this is italic.

We used to use b for bold and i for italic but these tags are now deprecated. whereas 'bold' and 'italic' described how the text would look, modern standards say we should leave that to CSS. HTML markup should concentrate on the semantic meaning: 'em' means we want it to have emphasis and we can let the style sheet decide what emphasis looks like.

Not just words: images

Of course, we like to see pictures on our web pages, so naturally there's a tag for that too:

<img src="/images/2parrots.jpg alt="Squawk!">

gives  

The src= address of the file that contains the image or picture to display. There's a lot to making pictures for the web. Other HTML attributes of image allow you to control its width and height, or its alignment on the page. An important attribute is
alt= text that is shown, or read out aloud, to people who cannot see the image displayed.

So now you know

HTML = text + tags: HyperText Markup Language

Key Tags:
 <h1> <h2> <h3>  different sizes of Heading

 <p>  Paragraph

 <br /> line BReak

 <a href="http:yahoo.com">  link (Anchor)

 <img src="me.jpg" /> IMaGe or picture

 <strong> and <em> usually rendered as bold and italic

CSS = Cascading Style Sheets: dictate the style for each tagged element on your page.

If you are editing the HTML for your blog post or a simple web page, then that's a good start. Not bad for 5 minutes, anyway.