There are many ways to present a post or article on a web page. This tutorial will cover the basic formatting, styles, and structure.
Every WordPress Theme handles the basic elements in a post different, 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.
By default, you see only one line of buttons in the Visual Editor. The last button on the row is called the Kitchen Sink. If you click it, a second row will drop down.
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 Text Editor features only a few of the options found on the Visual Editor toolbar, just the most important and frequently used formatting functions.
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, but if you wish to do so, select the text for the heading and use the formatting toolbar to click the formatting button on the toolbar that says Paragraph by default, and choose h2.
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.
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.
Select the text you wish to be the heading and click the button that says Paragraph by default.
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).
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.
You’ve already learned one, the HTML heading 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.
<a title="Description of the Link" href="http://example.com/">anchor text</a>
href is the hyperlink reference known as the URL or address.
title is the descriptive text that describes or titles the link, required by web standards for accessibility.
anchor text is the visible part of the link. The anchor text can be a single word or phrase, or an image.
<a title="Description of the Link" href="http://example.com/"> <img alt="Ball" src="http://example.com/ball.gif" /></a>
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.
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.
- Links are insideof punctuation.
- Links work best when they are around one to five words.
- Long, run-on sentences and paragraphs are not the proper way to link. The link colors and design make it hard to read. Your content looks broken, so avoid using links to feature whole blocks of text and keep them down to a word or a short phrase or title.
- Do not bold links for emphasis as the link design should be enough and the bold is a little too much.
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 SCREAMING.
- ALL CAPS IN BOLD IS SHOUTING.
- 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.
- 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.
- One is a bulleted list (see above).
- One is a numbered list.
- Both can be nested lists
- Featuring information indented and in order
- Making it easy to group information.
Lists can feature links.
- Lorelle on WordPress
- Lorelle Teaches
- WordPress.com Forums
- WordPress Support Forums
Lists may feature definitions.
- Blog: A website featuring content in reverse chronological order.
- Website: A website or site is a collection of web pages under a single domain name.
- 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 put the quote in 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 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.
Traditionally, images are positioned so the text will wrap around the image, making it easier to read. 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.
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.
alignleft positions the image to the left with the text flowing around to the right of the image.
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.
alignnone CSS style adds no alignment to the image. The image sits where you put it. If used in the middle of a paragraph, it will force the line that is it on to the height of the image, making it difficult to read easily.
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.
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.
When adding an image to a post, these are the things you must know.
- 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.”
- Captions: Captions may be used to add more descriptions and information about the photograph. They are optional.
- 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.
- 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.
- Image 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-mediumor something similar, to
wp-smiley. WordPress uses this to style smilies/emoticons :D images which have no borders. This will remove the border from the image.
- Tutorials: When publishing a tutorial, especially one with instructions, use the visual images centered and full width as guides to accomplish the task.
- 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. 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 it? Ah, some frustration?
The underline is now gone from the web except for links. Such usage is a violation of web standards for accessibility.
Other Tips for Writing Blog Posts
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.
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.
This tutorial covered the basic structure of a post and serves as an example of what a traditional blog post format should look like.
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:
- Adding an image gallery (WordPress.com support document)
- Who The Hell Are You?
- The Power of the Link
- How People Search the Web and How They Can Find Your Blog
- The 12 Biggest Problems With Your Blogs
- Hook, Line and Sinker: Luring Blog Traffic to Stay
- Mean Spirited Comments and Blogging
- What Do You Do When Someone Steals Your Content
- Web Browser Power Blogging Tips
- When is the Best Time and Day to Post on Your Blog?
- Technical Tips for Publishing a Series of Articles on Your Blog
- Do You Need Permission to Link to Someone’s Content?
- Writing With Post Excerpts and Feed Excerpts in Mind
- How Not to Blog in a Blogathon Blog
- How NOT to Comment on Comments
- The Best Bloggers Edit
- Editing Your Blog Comments
- Writing Effective, Attention-Getting Headlines and Titles on Your Blog
- Link Etiquette: You Do Not Need Permission to Link
- Don’t Guest Blog Until You Have Content
- Blog Struggles: The Blog Focus
- Plagiarism, Copyright, and Fair Use
- The 10 HTML Tags You Must Know to Blog
- Example of a Sandbox Post for Testing WordPress Themes
- Creating a Blogging, Social Media, and Editorial Calendar and Schedule
- Copyright: How to Quote and Cite Sources
- Links and the Anchor HTML Tag
- Public Domain, Free Photography and Images for Your Blog