What Is HTML?
HTML stands for Hypertext Markup Language. It’s a system—or “language”—used for formatting digital documents. HTML codes—also called markup tags—make it possible for browsers to translate plain text into formatted headers, bold text, paragraphs, and more.
HTML tags are sets of keywords placed between angle brackets. Most tags comes in pairs, and then the text you want formatted is placed between these tags. There is a start tag, which uses the keyword between angle brackets, and an end tag, which is the same except with a slash preceding the keyword.
Let’s take an example. The markup tag for emphasis (which most browsers translate into italics) begins with <em> and ends with </em>. In your document, it will look like this:
<em>This text is emphasized.</em>
When translated by the browser, site visitors see this:
This text is emphasized.
Note: Some tags are non-container tags, meaning they stand alone without content. They don’t need to be closed in an end tag.
Although WordPress isn’t as simple for the novice as website builders are, an understanding of HTML basics can help WordPress users in customizing their site. For example, if something seems strange in your blog post, WordPress allows you to toggle between the visual editor and the text editor. The text editor displays your post in HTML format, and by understanding the basics, you’ll be able to see what’s going wrong so you can deal with the issue.
Now, here’s 7 types of HTML codes every novice WordPress user should know:
1. Skeletal Tags
Skeletal tags provide the layout for your entire document. You might see these tags if you go into your theme’s code and try to edit it. Word of advice: Don’t try editing your theme’s code unless you know what you’re doing. If you must, then create a child theme first so you don’t risk screwing up your theme’s code.
It’s unlikely that you’ll use these codes as a novice WordPress user, but you may need to find them from time to time. For example, if you’re working with Google’s range of tools, it often requests that you paste an authorization code in the “head” section of your site. Knowing the HTML code that defines this will help you find where to place the authorization code. A few codes to be familiar with include:
<html>This is a section placed in the beginning that describes your document.<head>The head section is used for behind-the-scenes information.<title>This tag simply defines the document title, which should differ from page to page on your site.<meta>The meta tag provides background information for the browser, such as keywords, descriptions, or copyright information.<body>The content contained within the body of the document is what users will see on the page.
2. Block Level Tags
Block level tags show how text should be grouped together. Examples include:
<p>This defines a paragraph.<blockquote>This formats a long quotation. It will appear differently to the user based on your site’s theme and the user’s browser.<address>This defines contact information, such as if you place the author’s email at the end of a blog post.<pre>This tag defines preformatted text.
3. Heading Tags
Heading tags are a type of block level tag that show document hierarchy for both search engines and users. Though your site’s theme may format them all with different fonts and font sizes, it’s important to be aware of how you’re using each tag.
Heading 1 is used for the title of your document, such as your blog post’s title. In this case, our files would show “7 Types of HTML Codes Every Novice WordPress User Should Know” encased in the h1 tags. Heading 2 is meant for your main subheadings. If you have sub-subheadings, you’ll use the Heading 3, or h3, tag. This continues down through the document up to h6.
These tags appear as:
<h1><h2><h3><h4><h5><h6>
Remember that each tag needs to close with an end tag. For example, our document would show the following for this section:
<h3>3. Heading Tags</h3>
4. Inline Text Tags
Inline text tags are used to format words within block level tags like the paragraph tag. Some common examples include:
<em>This provides emphasis, most commonly in italics form. You can also use<i>for non-emphasized italic text.<strong>This emphasizes text strongly, usually as bold text. You can also use<b>for non-emphasized bold text.<q>This tag marks short quotes within paragraphs.<del>This tag creates a horizontal line through text to show deleted text.<br>This is a non-container tag that creates a single line break within a paragraph.
5. Link Tags
Link tags define where a link should be placed and which page it should point to. It starts with a tag formatted like this:
<a href="URL">
Simply replace “URL” with the web address you want to send readers to. Do not remove the quotation marks.
Next comes your anchor text, or the text that is being linked. Then you’ll end with </a>. Together, it all looks something like this:
<a href="http://www.catswhocode.com/">Cats Who Code</a>
It will appear like this on the page:
Cats Who Code
6. Image Tags
Image tags are just what they sound like. They define an image and its source. These are non-container codes, meaning you don’t need the end tag for it to work. The image tag looks like this:
<img src="THE IMAGE URL>
Simply replace “THE IMAGE URL” with the location of the photograph you want to insert into the document. Be sure you don’t remove the quotation marks.
With this tag, you can also use extra attributes, though they’re not necessary. For example, you might add alternative text, which are keywords that give search engines an idea of what your photograph is about. That tag would look like this:
<img src="THE IMAGE URL" alt="IMAGE ALT TEXT">
7. List Tags
List tags simply create numbered and bullet lists. The <ul> tag defines an unordered list and will appear on the page as a bullet list. The <ol> tag is for ordered lists that use numbers. Use the <li> tag to define an element within a list. Here’s an example for an unordered list:
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
Readers will see it as:
- Item 1
- Item 2
- Item 3
Whether you’ve just created a WordPress blog or have been navigating the CMS for a while, knowing these basic HTML codes may prove useful in formatting your site. Now that you’re slightly familiar with them, feel free to try these codes out on your own site for practice. Don’t forget to come back and let us know how it goes!
This is a guest post by Robert Mening