Essential HTML to Know for Editing Content

Blogging scripts, such as WordPress, revolutionized the internet as they allowed non-technical people to create websites easily.

WordPress is famous for its five-minute installation process. All you have to do is create your database, configure the wp-config.php file, upload the files and run the installation script. Those that struggled with installing WordPress manually could install WordPress with a click of a button through their hosting control panel.

The visual editor was a significant evolution too. It made the process of styling content easier by utilising an interface that was common in other programs such as Microsoft Word and Excel. All you have to do is select the text you want to format and then click on the relevant tag (e.g. bold, italic, link etc).

There are, however, many benefits to knowing the HTML code that is used by visual editors to style content. For starters, the visual editor does not always work correctly, particularly if you switch from visual mode to HTML mode and back. What are you going to do if there are styling errors and you do not know HTML?

The truth is that there is no excuse for not learning basic HTML. The language is very easy to understand and very simple to implement. Learning some basic HTML tags will give you full control over how your content is displayed and stop you from ever paying anyone else for help.

In this article, I will be showing you what I consider to be the most useful HTML tags for editing content. I hope you find the article useful :)

A Key HTML Principle

HTML is one of the easiest languages to learn. Twenty four years after its launch, it remains a vital cog in how websites are displayed online.

The premise of HTML is very simple, however there are a few rules that you must understand. Here are some basic principles of HTML that I believe will help you understand HTML better (particularly when you read more about advanced HTML tags and techniques).

Most HTML Tags Have Both an Opening and a Closing Tag

Most HTML tags have an opening tag (e.g. <html>) and a closing tag (e.g. </html>). As you can see, the closing tag is identical to the opening tag except it has a forward slash after the less than symbol.

HTML will format any content that is placed between the opening and closing tags. For example, it will make the text bold, italic or increase its size.

Be aware that there are some elements that do not need a closing tag. These are known as void elements as no content is being formatted. The image tag , for example, does not use a closing HTML tag.

HTML Tags Should Be Closed in Order

HTML tags can be placed inside other HTML tags, however these tags should be closed in order. Specifically, tags should be closed in the reverse order of the opening tags i.e. the last HTML tag to be opened should be closed first.

For example, say you would like to make your text both bold and italic. You could do this by inputting

<strong><em>Text</em></strong>

Notice how the italic tag <em> is closed before the bold tag <strong>. Many website owners fail to close the tags correctly. Here’s an example of what this would look like:

<strong><em>Text</strong></em>.

The technique of using multiple HTML tags is known as “Nesting”. The above example illustrates how nesting works with two HTML tags, however there is no limit to how many you can use. The most important thing is that tags are closed in the correct order.

Modern browsers can still display your code correctly if you do not write HTML tags correctly; however it is still recommended that tags are closed the right way as older browsers and screen readers may have problems with your code.

HTML Elements

The opening HTML tag, the content that is being modified, and the closing HTML tag; are collectively known as an HTML Element.

Take the paragraph HTML tag <p>, for example. A full paragraph element would look something like this:

<p>This is a paragraph</p>

Be sure to remember the difference between and HTML tag and an HTML element.

Many HTML Tags Allow Attributes to Be Used

HTML Attributes allow you to modify an HTML element. The attribute is always denoted within the opening HTML tag after a space. First the attribute is stated and then the value of that attribute is defined.


<TAG ATTRIBUTE="VALUE">

Attributes are normally optional, however many HTML elements require attributes in order to display correctly. The most famous attribute is the image location attribute SRC, which is used with the image element. If this attribute is not specified, no image is displayed.

Here is an example of how the Google logo could be displayed using HTML:


<img src="http://www.google.com/logo.jpg" alt="Google">

The ALT attribute is used to specify alternate text for an image i.e. the text that displays when you hover over an image.

HTML Removes Whitespace

HTML will remove any whitespace in your code. If you print ten spaces after a word, HTML will simply remove nine of those spaces.

There are times when you do need space between text, however there are tags available such as paragraphs and break lines that allow you to do this (more on this later). Therefore, the removal of whitespace is not a problem.

HTML Allows Comments

Most WordPress themes have comments throughout the design. This helps you see what a particular piece of code was written without re-examining the code.

To insert a comment, use <!– as the opening tag and –> as the closing tag. Your comment is placed inside this element.


<!--This is an HTML Comment-->

There is less of a need to use comments within comment. However, if you add HTML code to your website that is complicated, it is prudent to add a comment above the code so that you remember what the code was for (e.g. a table).

Bold Text

Making text bold is useful for headings and key words and phrases that you want to single out in your article as important.

In HTML versions 1 to 3, website owners would make text bold by using the bold tag <b>.


<b>This text is bold</b>

The above code would produce: This text is bold.

Since HTML4/XHTML, website owners have been encouraged to use <strong> instead of <b>. Strictly speaking, the strong tag is supposed to be used for emphasising text and the b tag is used for making text bold.

In general, most browsers will display text that is formatted using the strong and b tags in the exact same way. So why is the strong tag promoted? Well, the strong tag will also emphasise text in speech readers. Therefore, from an accessibility point of view, it is always better to use <strong> instead of <b>.


<strong>This text is styled using the strong tag</strong>

The above code would produce: This text is styled using the strong tag. In a browser, the end result is the same as using the b tag, however anyone who is using a speech reader for this page will notice the difference.

Additionally, from an SEO point of view, it is better to use the strong tag as it stresses that the highlighted text is important.

Italic Text

The initial way of styling text with an italic font was <i>. This was the standard way of making text italic from versions 1 to 3 of HTML.


<i>This text is italic</i>

In HTML 4, the <em> tag was introduced. Like the strong tag, it offers better accessibility for speech readers.


<em>This text is emphasised</em>

The above code would produce: This text is emphasised.

The em tag should be used for emphasising text (em is an abbreviation of emphasis). Most HTML references advise using the <em> tag for emphasis and the <strong> tag for strong emphasis.

Anchor Links

Links are arguably the most important HTML element available. They are used for linking to pages on your own website, linking to external websites and linking within the page or document itself.

The basic structure of an anchor link element looks like this:


<a href="http://www.wphub.com">Link Text</a>

This generates a simple anchor link: Link Text. The HREF attribute defines the web page that should be opened.

Other attributes you may use are TITLE and TARGET. Title allows you to clarify the purpose of a link by placing text over the link when a user’s mouse hovers over the link. It is not supposed to be the same text as the link text.

The target attribute allows you to specify where a link will open. There are five attribute values available: _Blank, _SELF, _PARENT, _TOP and FrameName (i.e. the name of the frame). The two most popular are _SELF, which opens a link in the same frame or tab it was clicked; and _BLANK, which opens the link in a new browser window or tab.

Below is an example of these two attributes being used together:


<a href="http://www.wphub.com" title="Click here to visit our website" target="_blank">Link Text</a>

This would produce: Link Text.

Linking within the same page or document is used frequently with long in-depth articles. For example, they are used in the table of contents that are placed at the top of most Wikipedia articles.

To link within the same article, you need to create a bookmark and then link to it. This is achieved using the ID attribute.

To set your bookmark, simply add the bookmark link to the area of your page that you want to link to:


<a id="overview">Overview</a>

You then need to link to the document. You can do this by using a regular link with the href attribute defined as the hash (#) symbol followed by the bookmark name you previously defined.


<a href="#overview">Click Here to Read Our Overview</a>

This would produce: Click Here to Read Our Overview (<- Try It!).

Note that bookmarks can be linked from anywhere i.e. you can link to a bookmark from any website or email. The link does not have to be placed within the same page. All you need to do is add the URL to the start of the link.


<a href="http://www.mywebsite.com/bigarticle.html#overview">Click Here to Read Our Overview</a>

You can also create a mailto link that will open up the user’s default email application when it is clicked. I am sure you have seen this used on many websites.


<a href="mailto:[email protected]?Subject=Email%20Us">Email Us</a>

Once you have a good understanding of how links work, I encourage you to read some CSS tutorials on how you can improve the styling of your links. It will bring your pages to life!

Block Quotes

The <blockquote> quote is useful for quoting authors, articles and other relevant sources. All you need to do is wrap the blockquote tags around the quote.


<blockquote>This is a blockquote</blockquote>

The above code would produce the following:

This is a blockquote

Images

I touched upon images earlier in this article, as it is the most well-known HTML tag that requires attributes to be defined.

The image HTML tag <img> should be used with the SRC and ALT attributes. The other attributes that I recommend defining are width and height. This ensures that the website layout is not affected whilst the page is loading. As when you define the exact size of an image, you are defining what space is required for it on your page.


<img src="http://www.google.com/logo.jpg" alt="Google" width="370" height="144">

The above code would produce:

Google

Adding images into your content can be done easily through WordPress with the “Add Media” button. However, it is vital to understand how the <img> tag works as it will allow you to correct errors.

Lists

Lists are one of the most versatile HTML options available to website designers and content producers. When styled with CSS, they can be used for complex horizontal and vertical navigation menus. You can also replace bullet points with images.

In this tutorial, I would like to keep things simple and talk more about the three HTML list options that are available to you.

The first two list options are unordered lists and ordered lists. As the name suggests, an unordered list items uses bullet points and an ordered list uses numbers. The <ul> HTML tag is used to start an unordered list and <ol> is used to start an ordered list. With both types of lists, items are displayed using the <li> HTML tag.

Let’s take a closer look at how these work in practice. Below is an example of a basic unordered list:


<ul>
<li>New York</li>
<li>Los Angeles</li>
<li>Boston</li>
</ul>

This would produce:

  • New York
  • Los Angeles
  • Boston

As you can see, the code to display the same information in an ordered list is nearly identical. The only thing that changes are the opening and closing list tags.


<ol>
<li>New York</li>
<li>Los Angeles</li>
<li>Boston</li>
</ol>

This would produce the following:

  1. New York
  2. Los Angeles
  3. Boston

Note that lists can be nested inside of each other. Therefore, for any particular list item, you can list another item inside. For example:


<ul>
<li>New York</li>
  <ol>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
  </ol>
<li>Los Angeles</li>
<li>Boston</li>
</ul>

The third list option is description lists. These can be used to display descriptions for each item. There are three parts to understand:

  • <dl> – Starts a description list.
  • <dt> – Defines the term.
  • <dd> – Describes the term.

The layout is similar to unordered and ordered lists. The main difference being that instead of using <li> to list an item, you are instead using <dt> to define it and then <dd> to describe it.

Here’s an example of how a description list can be used:


<dl>
<dt>New York</dt>
<dd>- East Cost of USA</dd>
<dt>Los Angeles</dt>
<dd>- West Coast of USA</dd>
</dl>

This would produce the following:

New York
- East Cost of USA
Los Angeles
- West Coast of USA

I have only touched upon what can be achieved with lists, however from a content point of view, most website owners stick to the simple HTML lists noted above. I encourage you to try them out for yourself to give yourself a better understanding of how they work.

Headings

Header tags are used to define HTML headers. The tags range from the most important <h1> to the least important <h6>. The size, font type and colour are defined in your website’s stylesheet. In the past, header tags supported an align property that allowed you to control how headers were aligned, however this was deprecated in HTML 4.

The more important a header tag is, the larger the font will be. Therefore, H1 will be larger than H2, which in turn be larger than H3, and so on.

Here is an example of how header tags can be used:


<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

This would produce the following:

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

H1 tags are usually only displayed once in a page, though other header tags are used more frequently in content, particularly H2 and H3 tags.

Paragraphs

In WordPress, and nearly all blogging platforms and content management systems, the post editor does not require you to add paragraphs using HTML. You simply have to enter text in a new line like you would in a word processor such as Microsoft Word. WordPress will then insert paragraphs for you.

However, the paragraph HTML tag is used so frequently in articles and website designs, that it is worth learning. Thankfully, the tag is simple to understand. To ensure that text is placed within a paragraph, you wrap the text inside <p> tags.


<p>This text will be placed inside a paragraph.</p>

The styling of paragraphs is handled through the theme stylesheet. This controls the margins and padding i.e. the space above and below the content area.

Break Lines

The <br> HTML tag will break text onto a new line. Break lines can be used inside or outside a paragraph element.


Hello there.
<br>My name is Kevin.
<br>What is your name?

The above code would produce the following:

Hello there.

My name is Kevin.

What is your name?

Break lines are useful when you want to force content to be placed on the next line. Though you will generally use paragraphs to format content correctly as they will automatically add a space line above and below the element.

Divisions

Divisions allow you to define a section within your web page. They are widely used in conjunction with CSS in order to structure and style a web page.

The HTML tag for a division is <div>. Divisions are a block-line element. This means that there is a space above and below the division (though this space can be reduced or removed via CSS).

Divisions cab be found throughout your WordPress theme. For example, the code for your theme sidebar will look something like:


<div id="sidebar">
<!-- Sidebar Content Here-->
</div>

Divisions can be used within the content area to align and style content in a unique. They can also be used to align elements such as tables and images.

Spans

Spans work in a very similar way to divisions. The key different is that spans are an in-line element. This means that spans can be used to format content within the line itself. They are useful for changing the style of text within articles.

The HTML tag for a span is <span>. Below is an example of how a span can be used in practice.


David wanted the <span style="color:green;">green</span> t-shirt.

This would produce: David wanted the green t-shirt.


Overview

HTML is the foundation of all websites on the internet. It only takes a short time to learn the basics, however this knowledge will serve you well for many years.

I feel strongly that all website and blog owners should take the time to learn the basics of HTML. It will help you edit your content better and make basic modifications to your website design. For those of you already know the basics of HTML, I advise learning CSS as it will help you style your content in a more professional way.

I hope you enjoyed this tutorial. If so, I encourage you to subscribe to WPHub and get our latest posts delivered via RSS, Twitter, Facebook and Google Plus.

This article was authored by:

Kevin Muldoon is a professional blogger with a love of travel. He writes regularly about topics such as WordPress, Blogging, Productivity, Internet Marketing and Social Media on his personal blog and and provides technical support at Rise Forums. He can also be found on Twitter: @KevinMuldoon and Google+.

Kevin Muldoon has authored 833 posts.Visit Website

Showing 2 Comments

  • I have a related question. Is there any way to keep WordPress from hyphenating words in paragraph format? It often hyphenates in weird places, and I’d just as soon it not hyphenate at all. Thanks.

    REPLY
  • Kevin Muldoon (Admin)

    Hi Megaera,

    I have never had this problem myself. I believe it is a CSS issue.

    I did a quick search on the problem and found a suggestion to replace “-webkit-hyphens: auto;” with “-webkit-hyphens: none;”.

    I recommend trying that. I would also recommend testing your content on three or four other designs and seeing whether the issue still remains. If the problem does not exist when using another theme, then you know that this is a theme related issue.

    Kevin

    REPLY

Add Your Voice: