8 HTML Tags & Styles You Can Use To Enhance Your Post Structure

by Alex

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.

Image found on Jesper Rønn-Jensen’s photostream.

Back to the top

by

To learn more about this author and see all of their posts, click below.

View Full Profile →

Discover the Real Meaning...

of what it means to master the psychology of your blogging practice. Find out one of the most missed aspects to blogging now, totally free!

Corey Freeman June 15, 2009 at 8:56 pm

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!) =-.

Thumb up 0 Thumb down 0
Alex June 16, 2009 at 5:18 am

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 =-.

Thumb up 0 Thumb down 0
Nick Tart June 16, 2009 at 1:29 am

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 =-.

Thumb up 0 Thumb down 0
Alex June 16, 2009 at 5:21 am

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 =-.

Thumb up 0 Thumb down 0
Enk. June 16, 2009 at 1:50 am

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 =-.

Thumb up 0 Thumb down 0
Alex June 16, 2009 at 5:21 am

Haha, even though that tag is outdated and incorrect, it’s still pretty funny! I just had to use it.

Thumb up 0 Thumb down 0
Nicolas Prudhon June 16, 2009 at 4:37 am

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! :)

Thumb up 0 Thumb down 0
Alex June 16, 2009 at 5:22 am

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.

Thumb up 0 Thumb down 0
Hurtownia Tkanin June 16, 2009 at 8:18 am

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.

Thumb up 0 Thumb down 0
Alex June 16, 2009 at 8:10 pm

Haha, I think any font looks fine. Might I recommend Georgia? :D

Thumb up 0 Thumb down 0
Jeremiah June 16, 2009 at 10:07 am

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 =-.

Thumb up 0 Thumb down 0
Alex June 16, 2009 at 8:09 pm

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!

Thumb up 0 Thumb down 0
Jeet June 16, 2009 at 11:55 am

Didn’t even read the post.. just the image using italics is SUPERB ;-) . Reading the post now :D

Thumb up 0 Thumb down 0
Alex June 16, 2009 at 8:08 pm

I have to admit, I LOL’d when I saw it.

Thumb up 0 Thumb down 0
Jeet June 16, 2009 at 11:59 am

Okay, nice ones. I liked the drop_cap and box styles; really useful.

Thumb up 0 Thumb down 0
Alex June 16, 2009 at 8:07 pm

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!

Thumb up 0 Thumb down 0
Tech-Freak Stuff June 17, 2009 at 6:30 am

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!!

Thumb up 0 Thumb down 0
John Berry June 18, 2009 at 9:09 am

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.

Thumb up 0 Thumb down 0
Alex June 18, 2009 at 9:35 pm

Well, the reason I included the del tag was because the & and tag are now invalid (semantically incorrect). You can always use the inline styling in a span text-decoration:line-through, but inline styling is also semantically incorrect. ;) So that is why you should use the del tag!

And about the blog URL, I go to /blog/ and it redirects here. What does it do for you exactly?

Thumb up 0 Thumb down 0
Alex June 21, 2009 at 5:24 am

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 =-.

Thumb up 0 Thumb down 0
Ugo.jar September 13, 2009 at 4:16 am

Nice list alex. I have a question though: can these tags be implemented in blogger blogs?

Thumb up 0 Thumb down 0
Alex September 13, 2009 at 10:09 am

HTML is HTML wherever you put it, so if you have an HTML editor in Blogger, then yes.

Thumb up 0 Thumb down 0
ngân hàng tmcp December 23, 2009 at 1:15 am

great information ! I like the Acronym and Abbreviation tags most

Thumb up 0 Thumb down 0
Avinash D March 17, 2010 at 1:42 pm

Hi Chris,

Would you mind explaining how you got that NOTICE text to show up in the post?Is that an image laid over with CSS?

Thumb up 0 Thumb down 0
http://www.dfn.com.br March 31, 2010 at 12:19 pm

CFTV e Acesso. Automação e Controle Empresarial Monitoramento e controle de acesso de pessoas e veículos na Empresa, Segurança Patrimonial Mais segurança, mais produtividade e comunicação.
Reestruturação e Organização Empresarial
Recuperação Empresarial
Projetos para Desenvolvimento e Crescimento Empresarial
Treinamento em Vendas e RH
Palestras em Vendas e RH
Administração de Cargos e Salários
Atendemos qualquer área Empresarial: Empresas de pequeno porte a Corporativas.

Fundada em março de 1993, trabalha em soluções para Empresas de qualquer segmento, prioriza a liderança pela qualidade a excelente performance em soluções e na prestação de serviços.
O know-how adquirido fez com que a DFN atingisse a qualidade funcional com uma rede de parceiros de negócios, possibilitam à empresa estar sempre presente , priorizando suas operações no estado de Santa Catarina.
O objetivo de quem trabalha com DFN é perpetuar o sucesso até então alcançado, atento ao mercado com comunicação empresarial, elevando a imagem, buscando fornecer as melhores soluções e todas as condições para que seus clientes alcancem o pleno sucesso.

Objetivo

Atender das exigências das Instruções Normativas e demais exigências legais, dentro das recomendações e normas técnicas pertinentes. Preparar a Empresa preventivamente para fiscalizações de Sociais e Tributos. Prevenção a Proteção Empresarial.

Plano Operacional de Segurança

- para recrutamento e capacitação de funcionários;
- de controle de acesso de pessoas e circulação interna;

- de controle de acesso de veículos e circulação interna;

- para informar presença de carga;

- para carga e descarga de unidades de transporte;

- para estrutura e desova de unidades de carga;

- para disponibilização de carga para verificação da mercadoria;

- para extração, guarda e remessa de amostras;

- para a quantificação e identificação de mercadoria, e emissão dos respectivos relatórios, se for o caso;

- para o monitoramento de segurança do local ou recinto;

- dos protocolos de segurança (qual o procedimento a ser adotado se)

- do plano para contingências por:

- falta geral de energia elétrica;

inoperância do sistema informatizado de controle de acesso;
inoperância do sistema de vigilância eletrônica;
inoperância do sistema de controle de movimentação de cargas e de armazenagem;
incêndio ou grave acidente;
qualidade de atendimento aos usuários (indicadores de tempos, perdas e extravio de mercadorias).

Grato pela atenção.
David Ferreira Neto
Diretor Comercial

Thumb up 0 Thumb down 0
internet marketing companies July 31, 2010 at 3:52 pm

nice you have given good HTML suggestion and i know it helps us lots to create more HTML rich designs.

Thumb up 0 Thumb down 0
Johanne Osbey September 25, 2010 at 7:53 am

Great Post, thanks for the great Post. I will come back soon ! Great information about turning traffic to cash : Traffic Generator

Thumb up 0 Thumb down 0
pink dress shirts December 18, 2010 at 4:02 pm

I’m linking this webpage from my personal blog . this has all of the usefull data necessary.

Thumb up 0 Thumb down 0
Soccer Pro January 18, 2011 at 11:33 pm

It’s arduous to search out knowledgeable people on this topic, however you sound like you understand what you’re speaking about! Thanks

Thumb up 0 Thumb down 0
social bookmark January 29, 2011 at 9:03 am

I think it is moving. You’ve got a lot of choices. If getting out of bed in the morning is a chore and you’re not smiling on a regular basis, try another choice. ~Steven D. Woodhull

Thumb up 0 Thumb down 0

Comments on this entry are closed.

Previous post:

Next post: