The Basic Structure of a Blog Post

Posted on by

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.

WordPress Visual Editor Toolbar featuring the second row with the formatting options.

This row holds many of the formatting options mentioned in the article.

In addition to the WordPress Visual Editor, there is an optional Text or HTML Editor. To access it, click the button “Text” above the toolbar on the right. This will switch the editor to the Text Editor.

The WordPress Editors - Visual and Text or HTML Editor buttons.

The Text Editor features only a few of the options found on the Visual Editor toolbar, just the most important and frequently used formatting functions.

WordPress Text or HTML editor toolbar.

This tutorial covers the basic structure of a post and serves as an example of what a traditional blog post format should look like. For more helpful tips and information, see What You Must Know About Writing on the Web.

The Post Title

A post begins with a title. The post title is usually the second largest font size on the page. The first is usually found in the header at the top of the web page.

Traditionally, the post title is in a link, though not always on modern sites. Clicking the link will reload the page. It was used originally for two purposes. First, as a quick way for people to reload the page if it had problems loading. “Back in the day” this was more common than you might believe. Second, it provided a link to the permalink of the web page.

The title is traditionally featured in the <h1> HTML heading tag.

The post title announces the topic.

Some people add a subtitle or heading before the first paragraph. This is not necessary and is usually redundant.

HTML links and code in a text editor as an example.

Writing Content

In “The 10 HTML Tags You Must Know to Blog,” I listed the 10 HTML tags that are most commonly found in a blog post. Boil those down to the ones you will use on a daily basis and the number is five. That is about the same number of words you will learn on vacation to a foreign land for hello, good-bye, how much is this, where is X, and bathroom. You can handle learning the basic five HTML tags.

The first one, and the most popular, is the link.

The web is named for the World Wide Web and the links between documents that connect them all together.

Ten years ago, a server and web hosting expert told me that every document on the web is connected to every other document by 12 degrees of separation. It is said that humans are connected to each other by 6 degrees of separation, the number of people who know each other in order to connect two very different people together, such as you are likely six people from knowing the President of the United States. I believe that by today, every thing on the web has less than six degrees of separation, all through the use of hypertext links.

In HTML, links are called anchors and represented with an A in their HTML tag.

&lt;a title=&quot;Description of the Link&quot; href=&quot;http://example.com/&quot;&gt;anchor text&lt;/a&gt;

The href is the hyperlink reference known as the URL or address.

The title is the descriptive text that describes or titles the link, required by web standards for accessibility.

The anchor text is the visible part of the link. The anchor text can be a single word or phrase, or an image.

&lt;a title=&quot;Description of the Link&quot; href=&quot;http://example.com/&quot;&gt;
&lt;img alt=&quot;Ball&quot; src=&quot;http://example.com/ball.gif&quot; /&gt;&lt;/a&gt;

In general, a link consists of a single word to at most six words, not entire sentences or paragraphs.

A link dump is a link that has been literally dumped onto the page such as http://lorelle.wordpress.com/2006/04/10/what-do-you-do-when-someone-steals-your-content/ which is long and ugly and hard to read.

While it is easy today to turn this link into a short link with a link shortner, such as http://tinyurl.com/283dd5 or http://wp.me/p1a-aH, are ugly, too.

WordPress used to covert these into links, but recently changed that policy, so http://lorelle.wordpress.com/2006/04/10/what-do-you-do-when-someone-steals-your-content/ would be linkless.

“What Do You Do When Someone Steals Your Content” is much easier on the eyes, tells the reader what they are clicking, and points the way to information they may need.

Here are some guidelines when it comes to publishing links in your content.

Headings

The structure of a typical WordPress blog post.Headings are section titles in an article. They are usually bold and slightly smaller than the post title font. They may feature some graphic design element depending upon your WordPress Theme’s design.

Headings break the content up into digestible chunks, keeping related content together. They also serve to pull the reader’s eye through the content as they search for the information they need. Headings also add whitespace, blank space that adds space and room for your content to breath and rest in.

Think of headings as part of your article outline, a visible section title that helps the reader know where they are in the reading order of the article.

Headings are the second bit of HTML you need to learn in web writing.

Headings are set with the formatting button on the second row of the toolbar in the Visual Editor. They are hand-coded in the HTML/Text Editor.

To create heading:

  1. Type the section title and select the text for the heading.
  2. Use the formatting toolbar to click the formatting button on the toolbar that says Paragraph by default, and choose h2 or whichever is appropriate.

WordPress Visual Editor Toolbar featuring the formatting option button.

Choose from h1 through h6. The HTML heading tag goes from largest at h1 to smallest at h6, though your WordPress Theme designer may have made other design decisions.

Web standards recommend that the use of heading tags go from largest to smallest in order such as h1, h2, h3, h2, h3, h4, going up and down but in order. WordPress Themes are not always designed in a way that makes an author comfortable with the font sizes and styles on their articles, so use your best judgement and attempt to not jump around too much with the order of the heading tags.

Do not use bold to create a heading. Use the heading tags to be in compliance with web standards. Content within heading HTML tags score slightly better than content outside of them for search engine page ranking (SEO or SERP).

Bold and Italic

Next to links, bold and italic are the most commonly used HTML tags to add emphasis to your content.

In general, bold is used as a semantic bullet point, adding emphasis like shouting to a word or phrase. It is used in lists and text as the descriptive starting phrase, followed by a colon to introduce a concept such as definitions.

Blog: A website with content displayed in reverse chronological order.

Italic is used for lessor emphasis, reserved for air quotes, titles, and foreign words.

In general, never use the two together as they are considered going beyond the shouting found with All Caps.

Here is the order of emphasis when writing on the web.

  • Italics are emphasis and used to represent air quotes.
  • Bold is very loud and used for loud emphasis and subtitles. Use bold rarely and only for a word or two.
  • ALL CAPS IS CONSIDER SHOUTING.
  • ALL CAPS IN BOLD IS SCREAMING.
  • Words in italic and bold are considered lunatic screaming.
  • ALL CAPS IN ITALIC AND BOLD MEANS WE’RE CALLING THE FUNNY FARM TO RESCUE YOU FROM YOURSELF.

Until recently, search engines put more emphasis on words in bold and italic than non-emphasized words. Bold abuse was rampant, making articles hard to read as your eye jumped from bold to bold. Search engines no longer score bolds higher, so please refrain from bold abuse.

Example of a blog post with improper use of bold words.

Lists

  • Lists are great ways of breaking complex topics into bullet points.
  • Lists are helpful for instructions.
  • Lists help us to keep track of the order of things.

Lists come in two forms.

  1. One is a bulleted list (see above).
  2. One is a numbered list.
    • Both can be nested lists
    • Featuring information indented and in order
  3. Making it easy to group information.

Lists can feature links.

Lists may feature definitions.

  1. Blog: A website featuring content in reverse chronological order.
  2. Website: A website or site is a collection of web pages under a single domain name.
  3. Web Pages: A web page is a single page found on a website.

The formatting toolbars offer buttons to help you create your list automatically.

Quotes and Citations

In “Copyright and Plagiarism,” I go into great detail explaining how to properly quote and cite sources in a post. I’ll summarize here.

There are two basic ways to quote from another website or resource. The first is in a sentence.

According to Matt Mullenweg discussing the recent Forbes Magazine article about the success of WordPress, he says, “I’d like to counter the last sentence, which implies this is something we do as a cost saving scheme: being distributed is not a legacy, it’s a conscious choice.”

The second method uses the HTML blockquote, a design element that indents the quoted text and styles it distinctly from the rest of the content. The blockquote may be used in various ways. The most popular is to cite the author and source and quote in the blockquote.

There are variations of the HTML blockquote, and the following is known as a leading citation as the citation appears before the blockquote.

According to Matt Mullenweg discussing the recent Forbes Magazine article about the success of WordPress:

I’d like to counter the last sentence, which implies this is something we do as a cost saving scheme: being distributed is not a legacy, it’s a conscious choice. The people at Automattic are truly world-class — I invest in and advise a number of startups, and spending time in New York and the San Francisco Bay area I would put the caliber of people inside of Automattic on par or higher than anyone I’ve met from Google, Facebook, Apple, or any of the traditional tech giants.

To use the blockquote, on the Visual Editor, select the button with the large “ quotemark. On the Text Editor, select b-quote.

Images

Images are added to WordPress through the Media Uploader and stored in the Media Library. Rarely will you need HTML to add an image to a post. However, you do need know know how to use images within your posts.

The guidelines for image placement in the content of a website are:

  1. If the image is 60% or less the width of the content column, align left or right.
  2. If the image is 60% or more the width of the content column, align center.
  3. If the image is centered, the image must be the full-width of the content column, with no whitespace on either side.

Traditionally, images are positioned so the text will wrap around the image, making it easier to read, aligning the image right and left. WordPress offers four styles (CSS) for positioning images within the post content. The alignment is set in the Media Library when adding images to the post. It may be changed at any time by clicking the image.

Cardboard box graphic.The alignright positions the image to the right and allows the text to wrap around to the left of the image. The alignright is the CSS style designation found in the WordPress Theme which controls the placement of the image.

BoxThe alignleft positions the image to the left with the text flowing around to the right of the image.

The aligncenter position places the image in the center with no text wrapping around the image. When using the center alignment, place the image on its own line. I also recommend making center positioned images the full width or large enough to fill in the space.

Box

As you can see above, the image is tiny and lost on the page. It also pulls your attention in as you try to figure out what it is. The guideline for images on web pages is that if the image is centered, it must be the full-width of the column, or make every attempt to be wide enough to take up the space and be easy to view for the reader.

Graphic of a Large Cardboard box.

This image now takes up the space and gives us something to easily identify, and adds to the visual presentation and readability of the site’s content.

To present an image as full-width, you must know the width of the content column. In general, most WordPress Themes feature 600-1000 pixels width in the content area. Experiment or view the CSS styles for the Theme’s content area and make a note of it in your site’s styles and publishing guidelines.

If an image’s width exceeds the column width of the content area, modern WordPress Themes feature a style that reduces the width of the image to fit within the column so it doesn’t break the design.

The alignnone CSS style adds no alignment to the image. The image sits where you put it. If used in the middle of a paragraph, Box it will force the line that is it on to the height of the image, making it difficult to read easily. The alignnone is used carefully and rarely in your site’s content for this reason.

When choosing an alignment position for an image, note that in English, wrapped images at the top of an article are usually to the right or left. Within an article, the images are centered or right aligned traditionally. Right alignment of the images allows for the words to be read on the left in keeping with the left to right reading pattern, and the images do not interrupt the flow of the eye down the page. If you wish to interrupt the flow, float the image to the left using the left alignment.

Image Details in WordPress

WordPress offers a powerful feature in their Media Library and Media Manager, the ability to designate how to view the image. It’s called the Attachment Details or Media Details depending upon the version of WordPress you are using.

In the details, you designate the title, alt description, captions, image size, alignment, and something they call Link To.

The Link To option allows you to set the image to not be linked to anything, linked to itself (the file), linked to an Attachment Page or linked to a website or web page.

When linked to itself as a media file, the image will appear in the browser alone with a white or black background. The user must click the back button to return to the site. That’s not fun, and it removes the site’s beautiful design and branding, as well as navigation, away from the user.

Image linked in WordPress as a media file - image of a box on a blank web page.

When linked as an Attachment Page, a post is created to display the image within the site’s beautiful design, branding, and navigation at a larger version or the full-version of itself. If the user wants to see it even closer, and the image is larger, another click goes to the media file, displaying the image full-size on a blank web page. A click back returns them to the attachment page. Look closer at the attachment page. It also features comments. This adds another level of interactivity to your site, discussing a specific image.

Example of an image in an Attachment Page in WordPress with post title, image, design, and comments around it.

Both of the above images are attachments, so click and see it at work.

On many sites, their writing guidelines and styles require all images to be set as Attachment Page not media files.

Media files are for downloading. Media file links consist of docs, PDF, MP3, and downloadable content.

Here is an easy way to remember:

Images are attachments. Media files are downloads.

What You Must Know About Images in Web Publishing

When adding an image to a post, these are the things you must know.

  1. Title and Alternative Description: Most countries, including the United States, require all images on a website have an alternative description, which WordPress calls the Description. The description describes the image so visually impaired people will know what they are looking at. The title is required in WordPress for the database information, but it is optional to meet the web standards for accessibility. The title is usually the “title” of the image such as “Guernica, 1937 by Picasso.”
  2. Captions: Captions may be used to add more descriptions and information about the photograph. They are optional. Not every image needs a caption, but ones with a location or people that require identification are encouraged. If the image speaks for itself or is part of a tutorial with a description of the image or process in the article, the image does not need a caption.
  3. Image Sizes: WordPress automatically makes your image available at different sizes, typically thumbnail, medium, large, and full. Select the image size most appropriate to the article’s needs.
  4. Image Links: WordPress offers three options for linking to an image. When clicked, a linked image will be shown full size on a web page. The first option is to not link to the image. The image will be featured on the page without a link wrapped around it. The File URL will link directly to the image. When viewed, the image will be on a white blank page. The Attachment Post URL creates a link around the image that will take the reader to a full view of the image within your WordPress Theme. The attachment post features comments so people can comment directly upon the images. Note: Not every image needs a link. Use this for images you wish people to comment on or resized images to allow readers to see the large view.
  5. BoxImage Borders: Many WordPress Themes apply borders around images to frame them and separate them from the content. If you do not wish to have a border around a specific image, use the HTML/Text editor and change the classes of the image HTML for the width of the image, typically size-medium or something similar, to wp-smiley. WordPress uses this to style smilies/emoticons 😀 images which have no borders. This will remove the border from the image.
  6. Tutorials: When publishing a tutorial, especially one with instructions, use visual images centered and full width as guides to accomplish the task.
  7. Welcoming Image: For many years, bloggers would greet readers with a welcoming image at the start of their posts. The belief was that people would be more inclined to read it if the post greeted them with visuals. If the visual was appropriate to the content, this could work, but many used gratuitous images just to attract attention, with no connection with the content, annoying readers. The web is a very visual place, but not all articles require images to lure readers. Use images appropriately and judiciously, and when necessary to match your blogging style and content.

Paragraphs and Line Breaks

The last element you need to know about and use the most in your posts are paragraphs and line breaks.

In WordPress, the space between paragraphs is set by the WordPress Theme. On the Visual Editor, use one press of the [RETURN] or Enter key to create a space between paragraphs. On the HTML/Text Editor, use two hits of the Enter key.

Line breaks are HTML tags take away the whitespace created between paragraphs to place the lines on top of each other. These are most commonly used in poetry and recipes.

The river is famous to the fish.
The loud voice is famous to silence,
which knew it would inherit the earth
before anybody said so.
The cat sleeping on the fence is famous to the birds
watching him from the birdhouse.
Poetry Out Loud – Naomi Shihab Nye (Porland, Oregon)

To create a line break in the Visual Editor, use the keyboard combination SHIFT+ENTER to make a line break. In the HTML/Text Editor, use a single Enter or use the <br /> HTML tag.

Tribute to the The Deceased Underline

The underline is dead. Long live the underline…not.

The underline on the web was introduced in the early days to define a link. While not required, it is a standard to design an underline to appear under a link or when you hover over a link. It tells the reader that this is a link. Click it.

Adding an underline to your content now indicates the words are in a link. So what happens when someone clicks an underlined word or phrase that isn’t a link? Frustration.

The underline is now gone from the web except for links. Such usage is a violation of web standards for accessibility.

Spaces

Use only one space after a period, not two. The use of two spaces after a period goes back to typewriters. The space signaled the reader it was the end of the sentence and added whitespace to the content.

In today’s web world, most web fonts automatically add space after a period. By adding an additional space, you widen that gap, which is not a regularly spaced gap, and the sentences become harder to read and inconsistently spaced.

Paragraph Size

While traditional print media may feature paragraphs that run across pages, on the web paragraphs are short and concise.

The general rule of thumb is no more than three points in a post, no more than one point in a paragraph.

Keep your paragraphs small and the information specific to the topic.

Don’t go crazy with one sentence paragraphs as that is hard to read, but avoid big clumps of unreadable content on the web.

Exclamation Points

In general, an exclamation point is only used when shouting! When you really want to get someone’s attention!

Hey, you!

When you use an exclamation point, it is the equivalent on the web of shouting. If you use it, read the sentence out loud and shout at the end before the exclamation point. If it feels funky, remove it. Got that?!?!

Do Not Force Styles Upon Content

Just because WordPress will allow you to change fonts, font colors, sizes, etc., doesn’t mean you should.

When you force a design style on your post content, when you change WordPress Themes or designs, that forced design persists, often looking strange compared to the rest of the content.

For example, you might have forced the page to feature a serif font like Times Roman, if you change Themes to one with a sans-serif font, that might be the only web page with a serif font, or you would never know what the design font was as you’d overwritten it on every web page.

Changing the fonts requires work. Keep it simple and don’t force styles upon your content unless absolutely necessary and do so judiciously, like adding spice to a recipe.

Also note that when you overwrite and force styles upon the content, you are violating the web accessibility laws as that may take away control of how someone reads your site.

For instance, many with vision issues such as older eyes, want the font to be larger as it is easier to read for them, and they may wish it to be larger for their readers. If they have their web browser or computer set to magnify the content for them, you may have just over-written their ability to read your site their way, not yours.

If you need the site’s content to be larger or smaller in size, hold down the CONTROL or CMD key on your keyboard and use the + and – keys, or CTRL/CMD and scroll wheel on your mouse, to zoom in or out.

Summary

This tutorial covered the basic structure of a post and serves as an example of what a traditional blog post format should look like.

While these are the guidelines and web standards, when it comes to your site, you may do what you wish, as long as you don’t break any rules. 😀 From here, it’s up to you to make your site match your own style.

For more helpful tips and information, see What You Must Know About Writing on the Web.

For even more information on how to write and publish on the web, check out: