The Basic Structure of a Blog Post

There are many ways to present a post or article on a web page. This tutorial will cover the basic formatting, styles, and structure.

The structure of an article or content on a web page is the same for any web publishing platform. This article focuses specifically on WordPress but the principles apply whether you are on Blogger, Google+, LinkedIn, Drupla, Joomla, Facebook, or a forum.

If an article is long, and this is, and divided up into separate sections, a table of contents consisting of jump links that jump down to the section the reader wishes to get to first, or second, or whatever their reading preference might be.

The table of contents maybe a list within the article or featured in a box aligned to the right or left of the content area with text flowing around it, best left to those with some HTML and CSS skills.

Article Table of Contents

WordPress Tip: Every WordPress Theme handles the basic elements in a post differently, making the headings stand out in a variety of ways, adding borders around images or not, adding design elements to a blockquote…the list is long.

I recommend that you test your own WordPress Theme by writing a test post following the examples in this article, or you may use the Sandbox Post for Testing WordPress Themes. It is a text file with HTML code representative of all the HTML tags found in a blog post.

Formatting the Post in WordPress

Before we begin, I will be making references to the formatting toolbar found on the post and Page Edit Screens. It is blow the post title area and directly above the content textarea where you will write your post.

The WordPress Visual Editor Toolbar featuring the Kitchen Sink Button which expands to feature a second row.

By default, you see only one line of buttons in the Visual Editor. The last button on the row is called the Kitchen Sink or Toolbar Toggle. If you click it, a second row will drop down. Continue reading

Advertisements

HTML and CSS Basics Tutorial [Video]

The following video is for Clark College’s HTML Fundamentals Class and covers the basics of HTML and CSS you need to know for building and fixing web pages. It also applies to understanding the underlying architecture for WordPress Themes.

CTEC 122 HTML and CSS Basics You Need to Know from Lorelle VanFossen on Vimeo. Continue reading

The 10 HTML Tags You Must Know to Blog

code wordle - group of words that are synonyms and types of codeTalk to the serious blogging and web publishing pros, the ones turning out brilliant content fast, and you will find that they all have one thing in common. They write with HTML.

Writing with HTML in WordPress isn’t complicated nor does it require a degree in foreign languages or web development. We’re not talking about building a web page from scratch every time you publish. We’re only talking about the HTML that goes into the post content.

How much HTML do you have to learn? Only 10 HTML tags. That’s it. Less words than you probably know in Spanish or another foreign language.

The most commonly used HTML tags in the post content area are:

  1. Anchor Link Tag <a href="…">link</a>
  2. Image Tag <img src="…" />
  3. Headings <h2>, <h3>, <h4>, <h5>
  4. Paragraph <p>Text here</p>
  5. Bold <strong> not <b> and Italic <em> not <i>
  6. Lists <ol> and <ul>
  7. Blockquote <blockquote> and <cite>
  8. Line Break <br />
  9. Horizontal Line <hr />
  10. Code <pre> and <code>

How many of these do you use commonly in your blog posts? All of the ten? When was the last time you needed to put code in your blog post? Rarely, if ever. At most, you use 5 of these in most posts you publish. I think you can handle that.

The five are links, headings, bold and italic, lists, and blockquotes – unless you are a poet. Then add the line break to your collection for six easy to remember HTML tags.

Sure, there are more HTML tags you can use in the post content area, but these are the most common. Tables, font colors, etc., are rarely used and if you need to use them, you probably already know how.
Continue reading