WotW: Some basic HTML

HTML… You hate it. You love it. You are scared by it. You see it as a key to your bloggy-power. You don’t understand it. You hate it. No matter how you feel about HTML, if you’re serious about blogging, you should learn at least the basics.

But, you say, I use Blogger/Wordpress/Typepad/something like that so that I don’t have to even think about HTML… why should I even bother reading?

Yes, blogging platforms make it easy by writing the HTML for you as you just type and click those little buttons in the toolbar (that’s the HTML you see if you click over to the Edit HTML view). But have you noticed how you don’t have that lovely full toolbar when you are, say, leaving a comment? Or filling in some of the fields in your profile? Or when you add an HTML/Javascript widget? Those are the times to use some of this HTML stuff!

Before we get to some HTML basics, there are just a few facts you need to know: 
HTML (or html, both acceptable) stands for Hyper Text Markup Language. Thus, HTML is a markup language, not a programming language. If it were a programming language, it would be HTPL. 😉 So, when you are editing HTML you are marking up (or tagging), not programming. True web programmers go far beyond HTML. I used to work in an office full of web programmers and they laughed when I replied that I knew “some HTML” when they asked me if I had any programming experience.

Okay, we’ve established that HTML does not a web programmer make. We can move on. Thanks for allowing me my moment on the soapbox. 🙂

First things first…

A bit of HTML language is called a tag.

Most HTML tags come in pairs. The first tag is called the opening tag or start tag, and the second tag is called the closing tag or end tag. The closing tag usually contains a / before the same tag as was in the opening tag to signify that it is closing what the opening tag started.

HTML is a language, so it also has punctuation and syntax (word order). The punctuation and syntax of HTML is very important. If you are missing a > or a ” or have the tags in the wrong order, it won’t work like you want it to, so pay very close attention to the details like that. All of the tags I’ll tell you about today are incredibly simple, but if you dive farther into HTML, this will become more important.

Some tags, such as links and images, require an additional part, called an attribute. Attributes add meaning to a tag, such as telling which image to show or what URL a link should go to. For tags with attributes, the corresponding attribute(s) are included in the opening tag of the pair. (Scroll down to Link tags for an example of tag with attributes.) The punctuation and syntax are especially important when tags require attributes. Most attributes follow this pattern: attribute=”definition of attribute”. Don’t forget those quotes!

Text tags
Some of the most common HTML tags are the formatting tags. These tags change your text’s appearance.

Use these tags to make your text…

bold – <b>This text will appear bold</b>
italic – <i>This text will appear italicized</i>
underline – <u>This text will appear underlined</u>
strikethrough – <strike>This text will appear struckthrough ;)</strike>

To have two of these styles applied to a section of text, just layer them:

You probably won’t ever need to use these tags below, but if you are editing your HTML, you’ll probably see them:

• The <span> tag is used to style text according to CSS. CSS stands for Cascading Style Sheet. We’re not going to get into CSS styles today because there are literally thousands, and when you’re ready for CSS, you’ll have surpassed my teaching abilities. 🙂 Just know that Blogger uses the <span> tag anytime you change the size or color of your text.
• The <br /> tag denotes a line break. It is one of the few HTML tags that doesn’t include both an opening and a closing tag. Depending on your Blogger editor settings, you’ll either see these or you won’t.
  • Look at your settings for Edit HTML Line Breaks in the Post Options section of your post editor (underneath the area where you type and where you add labels).
  • If Press “Enter” for line breaks is selected, you won’t see these tags at all in your Edit HTML view. Instead, pressing enter will count as a line break.
  • If Use <br /> tags is selected, you’ll see lots of these tags because without them, you won’t have any line breaks.

Link tags
Links are the tags that I manually enter most, such as in comments to link back to my blog or a relevant post. You can just paste in the full URL, but using the HTML tags make it look so much prettier. Oh, and they make it so that others can just click instead of copying and pasting. 🙂

There are two main parts to the link tag: the tag itself and then the tag attribute(s). A tag attribute, like I mentioned above, gives added meaning to a tag. For example,

But what if you want that link to open in a new window or tab? Simple! You just add the target attribute to the opening a tag. There are several different target options, but the most common is _blank, which tells your browser to open that URL in a new tab or window (depending on your reader’s browser settings). Again, don’t forget to put it in quotes! The quotes are very important for attributes.

This is what your link HTML will look like for the link to open in a new window:

<a href=”http://iamjustlu.blogspot.com” target=”_blank”>This link leads to just Lu and opens in a new window</a>

Phew! This post is getting long and suffers from lack of pictures, so we’ll stop there. Questions? Concerns? Please let me know!

Have a happy HTML Wednesday 🙂 

Lu (or Lorene if you prefer) is the mom of one squirmy boy and the wife of a singing and dancing elementary teacher. She is the proud author of this weekly Wednesdays on the Web (WotW) segment here on Housewife Eclectic and spends the other days of the week blogging about books, crafts, recipes, and whatever else comes up at just Lu.