Super-quick intro to HTML for people who don’t want to have to learn HTML

Some times you need to make small edits to HTML code, or copy and paste sections of it around.

You don’t need to know HTML to do that, but it helps to understand how it works, so you know which parts you should be copying and pasting where, and how to fix small things that go wrong.

You don’t need to know HTML to do that, but it helps to understand how it works, so you know which parts you should be copying and pasting where, and how to fix small things that go wrong.

So, here’s a super quick tutorial to help you understand what you’re looking at.

HTML is made up of so-called “tags”. Most tags surround sections of content like this:

<tag>content content content</tag>

Notice that it begins and ends with the same word in brackets. Also, notice that the closing tag has a slash (“/”) before the word. The slash indicates closing.

Often there is more information in the tag, like so:
<tag class=“this that and the other thing” id=“identify” blah=“blah”>Content content content</tag>

Notice that the extra info only goes in the opening tag.

Some tags don’t surround anything, but stand alone. If they do, they should end with a slash, like this:

<tag />
or like this if there is more info:
<tag class=“this that and the other thing” id=“identify” blah=“blah” />

Different tags mean different things. For example:

  • <p> means that the content between the tags is a paragraph.
  • <br /> signifies a line break
  • <a href=""> is used to make links.
  • <strong> and <em> are different ways to emphasize content. Most often <strong> means bold, and <em> means italic text.

… and so on. So:

<p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Proin eu ipsum justo, a consequat ligula. Mauris lectus dolor, vehicula in ultricies in, sollicitudin eget nulla. <em>Etiam quam elit, dapibus eget adipiscing sed, aliquam id eros.</em> Maecenas pulvinar hendrerit augue porta egestas.</p>
<p>Ut ultricies arcu vel nunc dignissim egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

… should look something like this…

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu ipsum justo, a consequat ligula. Mauris lectus dolor, vehicula in ultricies in, sollicitudin eget nulla. Etiam quam elit, dapibus eget adipiscing sed, aliquam id eros. Maecenas pulvinar hendrerit augue porta egestas.

Ut ultricies arcu vel nunc dignissim egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

There’s a lot more to HTML than that, but I think that’s more than you need to know to be able to cut and paste code without screwing up.

The most common beginners’ mistake is probably to leave out either a closing tag (</tag>) or a closing quotation mark inside a tag (class="right here"). If something looks terribly wrong after you’ve cut and pasted, or tried to tweak something, check those two things first.

If you do want to learn more, I recommend Codecademy and HTML Dog (which is where I learned). You can probably make a simple website in a weekend with what you learn there.


Posted

by