The building blocks of HTML

So after reading part one we have decided to give this HTML thing a go. What next?

First, we need to learn a little bit of new terminology, and I am going back to complete basics here.

What is HTML? It stands for Hyper Text Markup Language, and is a language for describing web pages. It is the code that controls everything.

  • HTML is a markup language, because you “mark up” the content
  • A markup language is a set of markup tags
  • The tags describe document content
  • HTML documents (web pages) contain HTML tags and plain text

The most important thing to grasp here is the idea of a TAG.

  • HTML tags are keywords (tag names) surrounded by angle brackets like <strong>
  • HTML tags normally come in pairs like <strong> and </strong>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, with a forward slash before the tag name
  • Start and end tags are also called opening tags and closing tags

This : <strong>bold text</strong> displays like this: bold text.

There are a gazillion different tags you can use, but the most important ones for a blogger are:

<strong> </strong> – makes things BOLD
<em> </em> – makes things ITALIC
<blockquote> </blockquote> – styles things into a quote
<ul> </ul> (used with <li>) – make a bullet pointed list
<ol> </ol> (used with <li>) – makes a numbered list
<li> </li> – is the LIST ITEM (used with <ul> or <ol>)
<a href=””> </a> – makes something a link
<img src=”” /> – adds an image
<p> – creates a paragraph (if you are using WordPress you won’t need to use this, as even when you using the text editor it automatically puts in new paragraphs for you).

(I’ll talk about why in Part Three, but don’t be tempted to use B for bold or I for italic. It’s very naughty).

Tags always come in pairs. The exceptions you need to know are the <img> tag and the <a href=””> tag, because what would life be like if it was ALL straight forward? I’ll illustrate how they are different in a little bit. (Technically it is because they have attributes, but that’s getting a bit too complex for me).

So you have some text you want to make look bold. What do you do?

  1. Make sure your editor is set to “TEXT” view. Mine looks a little like this, but yours will vary depending on browser, computer, the blogging software…
  2. Type your content. La la la la la…
  3. Decide what you want to make bold (I think the third “la” will do nicely)
  4. Put <strong> in front of the word you want bold
  5. Put </strong> after the word you want bold
    (It should look something like this: la la <strong>la</strong> la la…)
  6. Press preview or publish. Whatever floats your boat and fits in with your workflow
  7. Um, there is no step seven. Told you it was easy.

You do exactly the same for any other tag you want to use.

Making a link:
As I mentioned earlier, links are a little bit more complicated, but not much. They look like this:
<a href=”URL” title=”DESCRIPTION”>link text</a>
And they break down into several sections.

  1. the tag itself <a></a>
  2. the link address, or URL, controlled by the href=”” part
  3. a word description of the link, controlled by the title=”” part
  4. how you want the link to display in your content (link text)

If I wanted to link to Google, I would type:
<a href="http://www.google.com" title="google.com">this is a link to Google</a>
And it would display like: this is a link to Google

Inserting an image:
Image tags look like this
<img src=”URL” alt=”DESCRIPTION” />
Like a link, they also come in several parts, but this time it is just one tag, not a pair.

  1. the tag itself <img />
  2. the address of where the image is saved, controlled by the src=”” part
  3. a word description of the image, controlled by the alt=”” part
  4. note the / inside the tag, to close it as there is no separate closing tag

Now with images I will not be too upset if you use the built in image uploader as the WordPress one in particular is quite handy. But always check the code it gives you so you know it isn’t aligning oddly, or linking somewhere strange.

And to get really crazy? Try making a image into a hyperlink… It’s possible because you can NEST tags. This is the code you need – does it make sense?
<a href=”URL” title=”DESCRIPTION”> <img src=”URL” alt=”DESCRIPTION” /> </a>

The last bit I want to discuss in a bit more detail in this post is the List. I have used both bullet point lists and numbered lists in this post. They are great ways to, well, make lists. Put each list item between a <li></li> and top/tail the block of <li></li> with <ul> and </ul>, and there you have it.
<ul>
<li></li>
<li></li>
<li></li>
</ul>

Want to practice or learn some more? Go to the W3Schools course and work your way through. It is quick, easy, and has handy “try it yourself” sections.

Go. Play. And when I come back with Part three we will go through HTML etiquette and accessibility and oodles of other fun stuff. Promise*

* For a given value of “fun”.

2 Comments

Filed under Advice

2 Responses to The building blocks of HTML

  1. Pingback: HTML for blogging and normal people | Atwood TateAtwood Tate

  2. Pingback: Good HTML etiquette – the accessible link - Atwood Tate

Leave a Reply

Your email address will not be published. Required fields are marked *