Things Your Parents Never Told You About Blogging – Part 2: Coding I

They may say, “Wow, that sucks!”, but at least they’ll say, “Wow!”
-Duff Goldman

There is currently a dearth of articles on how to blog within the blogosphere. This series will take the effort one step further, giving instruction not only on the basics, but all aspects, including coding, promotion, technical considerations, and more. The aim is to give a complete overview for the novice/beginner as well as those wanting and needing a more complete understanding. This is the second in a serial effort to fulfill that desire.

---

In our second installment of the Things Your Parents Never Told You About Blogging series, we discuss the elements of coding. This will be restricted to the use of HTML in WordPress blogs. Since the subject of coding is somewhat comprehensive, it will be continued in Things Your Parents Never Told You About Blogging – Part 2: Coding II. It should be further stated this is in no way a complete discourse on HTML; interested readers are directed to more expansive treatises.

HTML, or HyperText Markup Language, was originally written by Sir Tim Berners-Lee as a way of “linking” pages together on the World Wide Web, and to present information within Web software, which is the browser. Several incarnations have followed, including XHTML, or eXtensible HTML, and the latest, HTML 5. The subject is vast, and a full explanation exceeds the scope of what is written here. For our purposes, we will restrict ourselves to the commands, or “tags”, that can enhance a WordPress blog. These tags are useful for formatting the blog itself, as well as comments in WP blogs.

There are two types of tags; container, so called because they “contain” the content, and must be paired, e.g. <em> (open) </em> (close), and standalone, or those not requiring a closing tag, e.g. <br />. Note the forward slash (/). This tells the browser that formatting instructions have closed (note: different browsers will interpret HTML slightly differently – to see what your blog will look like to various users, utilize several different browsers to view it). It is important that container tags be closed; not doing so will cause the code to continue formatting the content.

In addition to commands, tags can include “attributes,” and the attributes have a “value.” Attributes will cause the command code to behave in a specific way, and are written thusly: <hr align=”center” >. This is a tag for a Horizontal Rule (line – explained in Part 2: Coding II) that will center itself across the content presentation area. The attribute is “align,” and the value is “center.” Note the value is expressed by the equals (=) sign and encased in quotations. This lets the command know how to interact with the value. The HR tag is a standalone, and so the forward slash is included within the tag and preceded by a non-breaking space.

---

Some of the available tags for use in WP will now be examined, followed by an explanation of their usage (in keeping with W3C [World Wide Web Consortium] best practices, tag commands should be typed in lower case):

• <a></a> – Anchor
• <b></b> – Bold
• <i></i> – Italics
• <strong></strong> – Strong
• <em></em> – Emphasis

---

Anchor (<a>)
The anchor tag is used to format a link, e.g. hyperlink, image, or mailto: (eMail). Images are formatted by WP, and so will not be covered. There are several attributes which can be used with the anchor tag. We will cover href and mailto:.

href (hypertext reference)
Hyperlinks, or simply links, take the user to another Internet address, or URL (Uniform Resource Locator), e.g. http://www.somewhere.com, among others. To include a hyperlink to another Web page, the following anchor tag would be used:

<a href=”http://www.gregorystringer.worpress.com”>Grannelle’s Social Media</a>

This demonstrates how the href attribute is used. The text, “Grannelle’s Social Media,” becomes a hyperlink, and when accessed, takes the user to the URL http://www.gregorystringer.wordpress.com. The anchor tag is a container tag, and so to complete the formatting, the tag is closed with the </a>,

The only two values covered here will be the “blank (_)”, a value of the “target” attribute, and “title.” The blank target attribute (_blank) opens the link in a new window. Its use is suggested so that users don’t leave the blog page, they simply see an overlaid window which can be closed after access, leaving the blog window in place. The other attribute is the title. This presents information about the hyperlink during mouse-over and to screen readers (more about this in Things Your Parents Never Told You About Blogging – Part 4: SEO). The completed tag will now look like this:

<a href=”http://www.gregorystringer.wordpress.com&#8221; target=”_blank” title=”http://www.gregorystringer.wordpress.com”>Grannelle’s Social Media</a>

It is important to include the protocol, in this case http, in the linking address, otherwise the link will not format.

mailto:
The mailto: sets up the users eMail client to send a message. When the mailto: link is clicked, the users eMail client is accessed with the address field populated. The html looks like this:

<a “mailto:gregory@grannelle.com” title=”mailto:gregory@grannelle.com”>Contact Gregory</a>

An eMail message form will appear addressed to gregory@grannelle.com. The title attribute is included for SEO purposes (covered later in the series).

Bold – Strong (<b>, <strong>)
Both the bold and strong tags format in the same way, with darker and slightly larger text. The difference is that challenged users employing screen readers will be alerted with a more aggressive and forceful pronunciation of the tagged term when using strong. The bold tag has been deprecated by the W3C. While it will work, it is suggested that the strong tag is used for bolding text (more about this in Part 4: SEO ). This is how strong code will look:

<strong>bolded text</strong>

Italics – Emphasis (<i>, <em>)
Like the bold and strong tags, italics and emphasis enable the same formatting by italicisizing the text. Again, the difference is for users who are challenged; screen readers will articulate and accentuate the text when using the emphasis tag. The italics tag has been deprecated by the W3C. While it will work, it is suggested that the emphasis tag is used for italicisizing text (more about this in Part 4: SEO ). Emphasized text code has the following appearance:

<em>italisized text</em>

---

This concludes Part 2: Coding I. More about HTML for WordPress blogs will be presented in Things Your Parents Never Told You About Blogging – Part 2: Coding II.