One Mom’s Journey from Fat to Skinny to Confident

ASK RONI Q&A

HTML That All Bloggers Should Know – Part 2: Basic Structure Tags

5 Comments 1008 views

Part 2 in my HTML series… what will be be part 3? You tell me. Leave a comment if you have any questions.

In the first part of HTML That All Bloggers Should Know I introduced the concept of a WYSIWYG editor and how it wraps HTML tags around your content. Next I’d like to take a step back, outside of the editor and go over some of the basic building blocks of HTML. You may never hand code these elements but just by knowing they exist will change the way you format your posts for the better.

The first thing I want to emphasis is HTML’s purpose. Without getting into all the nitty gritty details and starting a whole discussion about content and presentation let’s just say for argument sake that HTML’s purpose is to "markup" up your content. Meaning, we need to let the browser (or device) know what your content is and ultimately how to display it. HTML should be responsible for the "what". Think about it, what are you reading right now? A paragraph. Therefore the browser is displaying it as such (I have and can influence this display via CSS but we will save that for another discussion)

Basic HTML Structure Tags

About Headings

Back up! Did you see that text up there? It said "Basic HTML Tags" and "About Headings" Those, my friend, are what we call headings. Notice how they separate my introduction from the next section. They also give the next few paragraphs context. You know what they are going to be about. I could have just bolded the text and made it a different color and visually it would have the same impact. However, I decided to mark up the content as actual headings (see below) as that’s what they really are.

<h2>Basic HTML Tags</h2>
<h3>About Headings</h3>

That is the code behind what you see for my headings. Headings are very important to the structure of your blog posts. They not only break up your content to make them easier to read but they help search engines know what your post is all about. Words found within heading tags are generally weighted higher and given more value. Therefore to help with search engine optimization you should not only use headings to organize your posts but sprinkle keywords within them to help define what the post is about (this should happen naturally.) Take a look at the all the headings of this post. Do you get a gist? Yea… well do does google. ; )

There are 6 levels of headings, h1 through h6. Heading 1 <h1> being the most "important", then headings 2, and so forth. They are all marked up the same way, as most tags are, by simply wrapping the tag around the content that is the heading.

<h1>This is my Most Important Heading</h1>

Easy. Right?

About Paragraphs and Breaks

Paragraphs are the basic building block of HTML. Some blogs like WordPress automatically wrap them (<p>....</p>) around your content even though you may not see them. Other blogs, like blogger do not. They simply separate your content with break tags <br />. What’s the difference? Well just like headings, paragraphs should be marked up by wrapping the <p> tag around the said paragraph to identify it as such.

<p>This is a sentence in my paragraph. This is another. I can have as many as I want. </p>
<p>This is a sentence in my second paragraph. This is another.</p>

Here’s how it would be displayed…

This is a sentence in my paragraph. This is another. I can have as many as I want.

This is a sentence in my second paragraph. This is another.

Breaks, on the other hand don’t get wrapped around anything. They don’t mark anything up. They just tell the browser, "Hey, start a new line HERE!". Like so…

<p> This sentence is in a paragraph. <br />I just added a break, notice I'm in the name paragraph but because of the break tag I'm on a new line.</p>

Here’s how it would be displayed…

This sentence is in a paragraph.
I just added a break, notice I’m in the name paragraph but because of the break tag I’m on a new line.

Notice the break simple started a new line, yet you are still in a paragragh.

About Lists

Lists are popular and for good reason. They are such an easy way to mark up your content to be more readable and scannable, two very important things when writing online. You may be familiar with bullet lists (unordered) and numbered lists (ordered) but you may not have heard of definition lists, which may be the most versatile, valuable and underused.

Unordered lists are just that, a list of items that are unordered.

<ul>
<li>This is a list item.</li>
<li>This is another list item.</li>
<li>This is a the last list item.</li>
</ul>

Would be displayed like this….

  • This is a list item.
  • This is another list item.
  • This is a the last list item.

Ordered lists, are exactly the same except you use a <ol> instead of an <ul> to define the list.

<ol>
<li>This is a list item.</li>
<li>This is another list item.</li>
<li>This is a the last list item.</li>
</ol>

Would be displayed like this….

  1. This is a list item.
  2. This is another list item.
  3. This is a the last list item.

Definition Lists are a bit different. They are made up of terms and definitions. Think glossaries, dictionaries, or my favorite, a FAQ page. What do these have in common? Each is a list with supporting content that belongs to a term or statement.

I use definition lists ALL the time. For example check out this post I wrote summarizing my thoughts on the Blissdom 09. My thoughts, by definition are a list. However I wanted to expand on those list items. Those thoughts had "definitions."

Here is the code from the page shortened for the purpose of example.

<dl>
<dt>Tweetdeck</dt>
<dd>I knew about it but never really started using it until...</dd>
<dt>Blogging Rhythm</dt>
<dd>I thought this was a great discussion during one of the panels...</dd>
<dt>Staying True to YOUR inner voice</dt>
<dd>This was another great talk and I totally agree......</dd>
</dl>

Notice the "definition term" <dt> and "definition" <dd> tags. Using this type of structure associates the definition to the term. Again, making your content more meaningful and easier to display. Like so…

Tweetdeck
I knew about it but never really started using it until…
Blogging Rhythm
I thought this was a great discussion during one of the panels…
Staying True to YOUR inner voice
This was another great talk and I totally agree……

Conclusion

Headings, paragraphs, and lists are just the tip of the iceberg when it comes to HTML. You don’t need to "know it all" to write for your blog. I’m sure you’ve been doing fine. But these few basic building blocks can go a long way in helping you structure your posts in a more efficient, effective, neat, readable way.

Getting hooked on HTML? Click here to check out the W3Schools HTML Tutorial!



Leave a comment

I’d love to hear your story or thoughts on mine.

However, to prevent the massive amounts of spam I was receiving I have turned off comments on any post older than 5 days old. If you'd like to leave me a note regarding this post or anything really try me on twitter (@RoniNoone,) my Facebook page, or even IG (@RoniNoone) I'm so sorry for the inconvenience. I never thought I'd have to do this but it's gotten way out of hand and comment management has become simply too time consuming to manage.

Discussion

There are 5 comments so far.

    Lauren P

    March 11, 2009

    Roni this is great! It’s been about 10 year’s since I took my computer programing classes or used the info (I switched to accounting my junior year). This is definitely helping to refresh my memory.

    Sheri Bambrough

    March 13, 2009

    Hi Roni,

    Thanks for this second post. I’m a blogger (LadyD…), but don’t cross that with my Avon information.

    I’m an Independent Avon Sales and Leadership Representative in Canada. We are able to pay for a website with Avon, but I wonder how would you call the site? If you take a look, everthing is the basic template from Avon except the content in the white box, the picture at the top, and the phone information. I know I can do basic HTML, but find things don’t always work as they should. For example, lists don’t work, and sometimes I will add an image and the white box falls wider or all to the left. What kind of template is this? I wish I could remember other examples. Let me know if I can give you more info, or if there is something you want me to try on the page to help decipher what I’m talking about.

    roni

    March 13, 2009

    They probably have a style sheet formats basic structures they way they was (I can only suspect). For example if I view source I can see that they removed the bullets from list items which is why your lists don’t look like lists.

    Try to put this in your edited area.. it should bring back the bullets..
    <style type="text/css">
    <!--
    li {
    list-style-type: circle;
    }
    -->
    </style>

    I think I really need to do a CSS post next! :)