There are a variety of great HTML tags out there for you to use, and quite a few of them can fit into your blog posts rather nicely.
I have compiled a list of eight of those tags that can be used on your blog, and a lot of these you probably haven’t seen or even though to use. After I made the switch to Thesis, many of these tags were introduced to me, and I want to share some of these with you.
1. Abbreviation & Acronym Tag
If you haven’t noticed the acronym I used in this post, it’s in the very first sentence – HTML. Put your mouse over it, and look what comes up! This is a very useful tag if you use a lot of acronyms in your post. Sometimes, a reader might not know what the acronym stands for, so you can just save them the trouble of asking my adding its meaning to your post.
Tag Use
<acronym title="HyperText Markup Language">HTML</acronym>
<abbr title="HyperText Markup Language">HTML</abbr>
CSS Style
abbr {...], acronym {...}
2. Cite & Blockquote
I use blockquotes a lot in the posts here. Blockquotes are used to quote another author on a piece that they originally wrote. The cite tag is basically used for the same purpose, but I use it less often personally.
Tag Use
<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</blockquote>
<cite>Lorem Ipsum</cite>
CSS Style
blockquote {...}, cite {...}
3. sup & sub
Simple superscript and subscript text. Usually you use superscript like when using a number in a sentence “He came in 1st place.” Subscript is when the text is below other text, like in H20.
Tag Use
1<sup>st</sup>
H<sub>2</sub>0
CSS Style
sub {...}, sup {...}
4. pre
Usually this tag is used when you post code. For example, a language that is posted a lot in tutorials now is PHP code. Usually they are wrapped around the <pre>...</pre> tags because the tag keeps the line breaks in tact.
CSS Style
pre {...]
5. DFN
Whenever you are ready to define a word on your blog, you may want to think about including the definition tag. By using this tag, it will help readers understand what word is being defined.
For example: A definition is a statement of the exact meaning of a word.
Tag Use
<dfn>Definition</dfn>
CSS Style
dfn {...}
6. Del & Ins
These tags are useful when you go back to edit a post later. When you wrap the del tag around a line of text, a line will go through the text signifying the text no longer has any value. The ins can be used when you want to add new information to a post, and the text you add will be displayed differently from the older text.
Tag Use
<del>This is old text that's now irrelevant!</del>
<ins>This is text that is new!</ins>
CSS Style
del {...], ins {...}
Bonus Styles
Want some extra cool formatting? Below are a couple of awesome styles that come with Thesis, and I think are extremely useful for anyone:
Drop Cap
I always love to add a drop cap to the beginning of my articles. It adds a really nice, professional touch to the beginning of my articles. I think it is an under used idea, and I would love to see more bloggers use it! Here is the CSS code for it below:
.drop_cap {
float: left;
font-size: 3.7em;
line-height: 1em;
padding: 0.1em 0.12em 0 0;
}
You may need to adjust some of the lines up there, but it should be a decent fit for any site! To add it to your post just wrap <span class="drop_cap">L</span>etter
Add Colored Boxes
The one thing I absolutely love in Thesis is the colored boxes you can use to highlight your important text. They two boxes, one gray for notes, and the other yellow for important messages are a great way to add a professional feel to your post, and of course put higher priority text inside of it.
The CSS code could go something like:
p.box {
background: #E4F2FD;
border: 1px solid #C6D9E9;
padding:1em;
}
…and to use, you can just wrap the whole paragraph in <p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
An example of what one color variation of this box may look like.
Are These Tags Useful?
These tags may be minor, but I think it helps with structure and formatting of your post. Do you think hey are valuable? I try to use all of these tags whenever I remember to do it. Sure, they may go unnoticed, but I still think they make my post look better.
{ 23 comments… read them below or add one }
Drop caps are wicked cool, but I think the colored boxes are probably the most useful. They help for things like author credit in guest posts, special announcements, etc. That was one of the only things I really dug about Thesis. Nice introduction to some little known tags. This is really helpful!
Corey Freeman´s last blog ..How to Get Girls to Swoon (and Write Better!)
Yeah, all of those things are really great and just makes me love Thesis even more. They really do have a variety of uses as you said. Thanks for the comment Corey!
Alex´s last blog ..Maximize Your Earnings Through the Thesis Affiliate Program
Hey, Alex. I learn so much from this site. I don’t know how you keep coming up with new things I’ve never heard of before. For instance, the acronym tag is awesome! Thanks for the info.
Quick question: Is there a reason to use the definition tag (dfn) instead of the emphasis tag (em)?
Nick Tart´s last blog ..40 Chinese Proverbs for Entrepreneurship
Thanks Nick! I use the acronym tag the most out of any of the ones above!
Well, you can style the dfn tag however you want to, so it doesn’t have to be like the em tag. But if you are defining something, just try and remember to use the dfn tag. I don’t think this will have any effect on you whatsoever in terms of like SEO or something, but if you’re a politically correct kind of guy, than go for the dfn tag.
Alex´s last blog ..Maximize Your Earnings Through the Thesis Affiliate Program
Its cool and informative post here.. really liked.
And I loved the idea of the image you used.. the idea of tag.. haha great work !
Enk. ´s last blog ..6 Reasons why You should NOT Blog with a Partner
Haha, even though that tag is outdated and incorrect, it’s still pretty funny! I just had to use it.
Hi Alex,
Excellent sharing of information there! I particularly like the Acronym and Abbreviation tags, I learned about them recently only and didn’t have time yet to implement them but I’m sure going to do that now!
You just got me motivated to do so!
Awesome Nicolas (good to see you again)! Yeah, I use the acronym tag a lot in my posts on all of my blogs. It takes a little extra writing, but I don’t mind it really.
Drop Cap really blew my mind. Now all I need is a font that looks like taken from a medieval book and finally I can post “in style”
Thanks for the whole post though, I didn’t know about the def tag, will come in hand too.
Haha, I think any font looks fine. Might I recommend Georgia?
Thanks for sharing this, Alex! I didn’t even know that the DFN tag exisited, and I’ve been writing HTML since I was 10. From a quick Google search, I think it does the same thing as EM, which is probably why most people wouldn’t use it that often.
Another great tag for definitions is the DL, DT, and DD tags; which are used to write a list of definitions.
Jeremiah´s last blog ..5 Ways to Avoid Wordpress Update Headaches
Hmmm, I think it’s just the principle of the matter that you use it then. Sure, you can style the dfn tag so it shows differently than the em tag. But yeah, they’re really the same!
Didn’t even read the post.. just the image using italics is SUPERB
. Reading the post now 
I have to admit, I LOL’d when I saw it.
Okay, nice ones. I liked the drop_cap and box styles; really useful.
Totally, I use drop caps in every post and I try to use the notes in every post too. They add such a nice touch!
Even though most Bloggers are aware of the HTML Tags you mentioned, The CSS tips are really helpful. Thanks a ton. And finally, the Image using Italics is a weird but good Imagination!!
More than HTML tags, the styles are good. Would love to see you post more such styles. Drop-cap is a great find. I think ins and del are pretty much useless, I simply strike through the lines that I delete
BTW, wasn’t this blog on a subdirectory earlier? I see a 403 error on that URL, a 301 would give you some boost.
Well, the reason I included the del tag was because the
So that is why you should use the del tag!
text-decoration:line-through, but inline styling is also semantically incorrect.And about the blog URL, I go to /blog/ and it redirects here. What does it do for you exactly?
I meant to look at this yesterday but I decided to wait until I’d had a chance to play around with my blog a little more. There are a few styles in here that I could really use, but had forgotten about.
Thanks again.
Alex´s last blog ..Weekend Round-Up 6/20
Nice list alex. I have a question though: can these tags be implemented in blogger blogs?
HTML is HTML wherever you put it, so if you have an HTML editor in Blogger, then yes.
great information ! I like the Acronym and Abbreviation tags most