HTML code is the backbone of all web content, period. It’s how data is organized and displayed in your web browser. If you’re producing content online, you should comprehend what it is you’re creating so you can harness its power effectively and understand how to fix it when it inevitably breaks.

The Anatomy of an HTML Tag

HTML stands for Hypertext Markup Language. All HTML tags are structured using the same set of characters.  Take a look at the detailed image below to get a further understanding of HTML tags.

The terms element and tag are used interchangeably. Let’s explore the fundamental tags below.

1. The Link

The link is the most important tool in your HTML arsenal. In fact, without the link, there wouldn’t be an internet. You wouldn’t be able to navigate your email inbox, let alone browse Reddit or Facebook for the latest memes.

Here’s what a link looks like on the inside (when you’re writing your post):
<a href="https://99robots.com/blog" title="This Blog is the Best Blog on 99Robots.com" target="_blank">I am a link!</a>
Here’s what it looks like on the outside (when you read the post):
I am a link!

Every link is wrapped in the <a> tag. ‘<a>’ stands for anchor, which refers to the page it’s directing you to – the landing page. Anchor tags are essentially comprised of 4 parts:

• The hyper-reference link attribute (href) or destination URL. This is the webpage you want the link to go to.
• The title attribute. This displays extra text on mouse hover and is also used for accessibility with screen-readers.
• The target attribute. This lets the browser know where to open the link. _blank opens a new tab.
• The link text. This text is what is shown and styled by the browser and is what can be clicked.

Pro Tip: Search engines may ignore the title tag, but still index the href and link text!

2. The Image

Everyone loves images and now you’ll know how to add one properly:
<img src="https://99robots.com/wp-content/uploads/2013/10/too-cute-kitten.jpg" alt="This kitten is so damn cute!" width="400" height="300" />

The HTML image tag is comprised of 3 parts as well:

• The source. This is file destination of the image.
• The alternate text. This displays extra text on mouse hover and is also used for accessibility with screen-readers.
• The height & width. These are measured in pixels and should relate to the image aspect ratio. (you can exclude these and the image will be its default size)

Pro Tip: Image alt tags & filenames are indexed by search engines, so use them wisely!

Bonus Blog HTML Code: The Linked Image

For easy reference, this is how you would structure a simple image that links to some other content:
<a href="https://99robots.com/blog" title="This Blog is the Best Blog on 99Robots.com" target="_blank"><img src="https://99robots.com/wp-content/uploads/2013/10/too-cute-kitten.jpg" alt="This kitten is so damn cute!" width="400" height="300" /></a>

Pro Tip: As you can see by hovering, the image title overrides the link title.

3. The Heading

Headings are super important HTML codes to any blog post. Most readers skim posts and only read these headings to see if the article is worth their time! On top of that, search engines index headings to get a better idea of what content you have and what your posts are about.

Breaking News: Internet is Now Free for Everyone!

<h1>Breaking News: Internet is Now Free for Everyone!</h1>

Less Breaking News: People Get Scammed at the Autobody Shop!

<h3>Less Breaking News: People Get Scammed at the Autobody Shop!</h3>

Least Breaking News: Water Cures Thirst!

<h6>The Least Breaking News: Water Cures Thirst!</h6>

Heading tags range from <h1> to <h6> and progressively get smaller.

Pro Tip: Use headings to rank better in search and break up your content for readability!

4. The Paragraph

What would a blog post be without its content? Paragraphs are fundamental for any blog and it’s time you learned what they look like on the inside:
<p>This is a super short paragraph!</p>
Yup, that’s it. Paragraphs are stylistic tags that help apply certain fonts, sizes, and spacing.

Pro Tip: Use multiple paragraph tags in a row to space our your content to give it a clean professional look.

5. The Ordered List

Ordered lists are useful for ordering things!
<ol>
<li>Make List</li>
<li>Add Item</li>
<li>Profit???</li>
</ol>

1. Make List
2. Add Item
3. Profit???

Essentially, every item in the list gets wrapped in <li> tags and then all the <li> tags are wrapped in an <ol> tag that tells the browser to style it with numbers.

Pro Tip: List posts are great when giving your readers bite-sized information!

6. The Unordered List

Unordered lists are built for lists that have items of no order of importance.
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Sugar</li>
</ul>

• Milk
• Eggs
• Sugar

They work the same way that ordered lists do, except these lists usually get styled with discs instead of numbers.

Pro Tip: Use unordered lists to quickly bullet main points for your readers.

7. The Page Break

Adding space between HTML sections like paragraphs and headings helps avoid the terrifying wall of text you would usually find back in ’98.
<br/>
Just pop this bad boy after any section in order to add white-space to your content.

Pro Tip: Try to make each paragraph no more than 5 lines, otherwise readers will just see it as a big block of text. Readers love white-space!

8. Bold

Force your users to read things in their head with passion using the bold tags. There are two ways to do this:
<b>Superman!</b>
Superman!

or
<strong>Superman!</strong>
Superman!

Depending on the circumstances, browsers might display each tag differently, so test them both before launching your post.

Pro Tip: Use bold words to point out bold ideas!

9. Italic

In the same way the bold words use two HTML tags, so does italics.
<em>Batman!</em>
Batman!

or
<i>Batman!</i>
Batman!

Pro Tip: Use italics for using an emphatic voice.

10. The Blockquote

Sometimes, you just need to rip a whole bunch of content from another source. With the blockquote, you can add some styling to this content and then use a link to connect the reader to the source.
<blockquote>"Sometimes, you just need to rip a whole bunch of content from another source. With the blockquote, you can add some styling to this content and then use a link to connect the reader to the source."</blockquote>

“Sometimes, you just need to rip a whole bunch of content from another source. With the blockquote, you can add some styling to this content and then use a link to connect the reader to the source.”

You can easily quote books, movies, or people all while identifying the content as someone else’s! (How nice of you!)

Pro Tip: Don't copy content without citing! Other bloggers always appreciate a link back to their site.

11. The Small Text

Using smaller text is a great tool fro breaking up sentences and shrinking words that shouldn’t be taking up space
(like citations).
<small>I am Tiny!</small>

I am Tiny!

Pro Tip: Use this tag with citation links for a sweet combo!

Bonus HTML Combo: The Annotated Blockquote

Citing another article has never been easier! Just use this code to quickly cite another article and give credit to its author.
<blockquote>"A bit of fragrance clings to the hand that gives flowers." - <a title="Chinese Proverbs" href="http://www.quotationspage.com/quote/34165.html" target="_blank"><small>Chinese Proverb</small></a></blockquote>
Which will display similar to this:

“A bit of fragrance clings to the hand that gives flowers.” – Chinese Proverb

The End </HTML>

What HTML tags could you not live without? Comment below!