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!

Comments on this entry are closed.

Previous post:

Next post: