XHTML in Blog Posts
Many blog editors provide a WYSIWYG and some do a fine job. There are some great desktop editors like Ecto (Mac and Windows) and Qumana which also provide interfaces to blogging.
While these tools make writing easy and straightforward, there’s always a need for some rudimentary HTML knowledge at the minimum. Some of the older web IDEs like Frontpage and older versions of Dreamweaver generate code that is both ugly and invalid – that is it doesn’t meet minimum expected standards for modern browsers. In order to keep your blog light (in terms of page weight, number of kb of data per page required for a user to download), and to ensure that your blog displays properly on all browsers (not just Internet Explorer!) make sure that the HTML that is used in your posting follows these guidelines.
1 | <strong> |
,
1 | <b> |
tags
These tags create boldfaced text. However, the difference here is semantic versus presentational – what does the formatted text mean? The
1 | <strong> |
tag provides a strong voice, an exclamation mark. “No, you can’t do that!”, while the
1 | <b> |
tag simply provide boldfaced. For example, the beginning of a sentence might require bold face, especially to begin a paragraph.
Recommended: It is actually recommended that the
1 | <b> |
tag be replaced with CSS:
1 | <span style="font-weight:bold;"> |
.
1 | <em> |
,
1 | <i> |
tags
Similar to boldface tags, these tags provide italicized formatting to text. Also similar to bold faced formatting, there are semantic differences.
1 | <em> |
, as the tag denotes, provides emphasis: Yes, little Johnny did go to the mall… with his mother!. The
1 | <i> |
tag provides simple formatting: I read an article today in The Washington Post that…
Recommended: Similar to boldface, the
1 | <i> |
tag is often replaced with its CSS equivalent:
1 | <span style="font-style:italic;"> |
.
Lists and bullets
Readers like lists and lists are easy to implement. When you have a number of points, if it makes sense to use an ordered list (1, 2, 3…) try code like:
2
3
4
5
<li>Apple</li>
<li>Orange</li>
<li>Peach</li>
</ol>
This will display:
1. Apple
2. Orange
3. Peach
Unordered (bulleted) lists are similar:
2
3
4
5
<li>Apple</li>
<li>Orange</li>
<li>Peach</li>
</ul>
I can go on. Really, I can. Much of the HTML that you will need you will inevitably pick up and that’s how I’ve learned it. There’s also more structural HTML that will come into play if you take a hands on approach to layout. Many bloggers though choose prebuilt themes and that is okay. Hopefully this gives a basic overview of some of the functional HTML you may need in day to day posting?
Anyone else have anything to add to this?
Pick up your copy of the WordPress Bible, a wildly popular resource for beginners and experts alike.
Written by Aaron Brazell on February 22, 2006
Popularity: 1% [?]
Aaron Brazell
Steven Fisher
Ray Capece
Carlos Granier-Phelps
Andrew Feinberg
Mike Dougherty
Chris Bachmann
Leslie Poston
Jerald Sheets
Scott Goldblatt
Mykel Nahorniak
Peter Corbett
Jonathan Dingman
Geoff Livingston
Jeremy Toeman
Rachel James
Chris Parandian
Warren Sukernek
Joseph Hauckes
Shana Glickfield
Vinnie Garcia
David Nick
Duncan Riley
Carol Ott
Darren McLaughlin
Mike Oliver
Rico Masterson
Lou P. Nuts
Hi, Aaaron .. we hope that you like the Qumana app, tho it looks like you have a certain level of mastery over whatever you may want to do on a blog. And, in that respect .. it also looks to me like you will be able to offer us feedback that will help in our ongoing quest to make Q the best blogging tool available.
And, finally, as an irrelevant aside .. I have been trying to figure out, using online dictionaries, whether there are two spellings for *aficionado* … I’ve only found the one-f version so far ;-)
Hi, Aaaron .. we hope that you like the Qumana app, tho it looks like you have a certain level of mastery over whatever you may want to do on a blog. And, in that respect .. it also looks to me like you will be able to offer us feedback that will help in our ongoing quest to make Q the best blogging tool available.
And, finally, as an irrelevant aside .. I have been trying to figure out, using online dictionaries, whether there are two spellings for *aficionado* … I’ve only found the one-f version so far ;-)
Hi, Aaaron .. we hope that you like the Qumana app, tho it looks like you have a certain level of mastery over whatever you may want to do on a blog. And, in that respect .. it also looks to me like you will be able to offer us feedback that will help in our ongoing quest to make Q the best blogging tool available.
And, finally, as an irrelevant aside .. I have been trying to figure out, using online dictionaries, whether there are two spellings for *aficionado* … I’ve only found the one-f version so far ;-)
Checkmate. :-)
Checkmate. :-)
Checkmate. :-)
“Recommended: It is actually recommended that the tag be replaced with CSS: .”
That’s just trading one presentational evil (b tags) for another (inline style).
What really should be done, if it’s purely presentational, is using a CSS class that denotes the type of content, or even better using some kind of selector already built into CSS. Example:
p:first-line { font-weight: bold }
Of course, this might not be the optimal solution when you just want to bang out something bold in a post quickly, since you probably don’t want to mess with your CSS as you post.
“Recommended: It is actually recommended that the tag be replaced with CSS: .”
That’s just trading one presentational evil (b tags) for another (inline style).
What really should be done, if it’s purely presentational, is using a CSS class that denotes the type of content, or even better using some kind of selector already built into CSS. Example:
p:first-line { font-weight: bold }
Of course, this might not be the optimal solution when you just want to bang out something bold in a post quickly, since you probably don’t want to mess with your CSS as you post.
“Recommended: It is actually recommended that the tag be replaced with CSS: .”
That’s just trading one presentational evil (b tags) for another (inline style).
What really should be done, if it’s purely presentational, is using a CSS class that denotes the type of content, or even better using some kind of selector already built into CSS. Example:
p:first-line { font-weight: bold }
Of course, this might not be the optimal solution when you just want to bang out something bold in a post quickly, since you probably don’t want to mess with your CSS as you post.
Yes, if you want to force the text to be bold or italic then use those CSS styles. But, most of the time people use those styles to add emphasis or use a stronger voice and the and tags should be used.
If you use these tags then people who are not consuming your content using a normal text browser will also be able to understand the type of emphasis that you meant. For example, in a text-to-speech application “font-weight: bold” doesn’t mean anything, but “” might change the tone of the voice produced by the program.
Yes, if you want to force the text to be bold or italic then use those CSS styles. But, most of the time people use those styles to add emphasis or use a stronger voice and the and tags should be used.
If you use these tags then people who are not consuming your content using a normal text browser will also be able to understand the type of emphasis that you meant. For example, in a text-to-speech application “font-weight: bold” doesn’t mean anything, but “” might change the tone of the voice produced by the program.
Yes, if you want to force the text to be bold or italic then use those CSS styles. But, most of the time people use those styles to add emphasis or use a stronger voice and the and tags should be used.
If you use these tags then people who are not consuming your content using a normal text browser will also be able to understand the type of emphasis that you meant. For example, in a text-to-speech application “font-weight: bold” doesn’t mean anything, but “” might change the tone of the voice produced by the program.
Thanks for the feedback, guys.
Thanks for the feedback, guys.
Thanks for the feedback, guys.
Heh, I guess my comment doesn’t really make sense after Wordpress ate my <strong> and <em> tags :)
Something else I just thought about: If you have a blog at Wordpress.com inline styles are removed from posts.
Heh, I guess my comment doesn’t really make sense after Wordpress ate my <strong> and <em> tags :)
Something else I just thought about: If you have a blog at Wordpress.com inline styles are removed from posts.
Heh, I guess my comment doesn’t really make sense after Wordpress ate my <strong> and <em> tags :)
Something else I just thought about: If you have a blog at Wordpress.com inline styles are removed from posts.
Haha…. You’re messing up my thread laniv… :p
and
Haha…. You’re messing up my thread laniv… :p
and
Haha…. You’re messing up my thread laniv… :p
and
Frick….
Frick….
Frick….