In today’s coding generation, HTML is a very basic language. For that reason alone, I am going to call this a beginner’s tutorial on HTML and its use in WordPress. There are several HTML tags that are vital for customizing content in a WordPress blog. I will concentrate on things that you cannot do with the WYSIWYG editor. The WordPress WYSIWYG editor is the tool in the WordPress admin that allows most WordPress users to know little or no HTML code at all and still make a somewhat decent looking blog post or page. However, if you know the basics of HTML that I will cover here, there are more content styling options available to you when developing a post or page in WordPress. That’s why it is essential to know a little HTML when adding content to your WordPress blog or website.
What are HTML Tags?
HTML tags are the basic building blocks of any web page. Even if a more advanced coding language is used to produce a website, there is still going to be some HTML output to the screen. WordPress relies heavily on PHP as its main language of choice for the backend. PHP however generates HTML for the front end of a WordPress site that visitors see when visiting your blog or website. So, while WordPress uses mostly PHP, PHP in turn uses HTML, so there is not getting around the use of HTML in WordPress.
Using HTML in the WYSIWYG Editor
The WYSIWYG editor generates HTML as well. In fact, you can click on the editor’s HTML tab and see the HTML that the editor produces as you insert text in the user interface. It is automatically converted to HTML using the Tinymce PHP and JavaScript class libraries that are part of the WordPress installation core files.
What some WordPress bloggers and users may not realize is that you can edit the HTML directly when viewing it in the HTML tab of the WYSIWYG editor and you can even see the changes live in the regular editor’s view when you switch back to the default tab. It isn’t recommended often to try and use much advanced HTML code in the WYSIWYG editor, but here is a list of safe tags to play with. Any of the following tags can be surrounded with greater than and less than signs to make a tag:
H1 – H6 – tags are header tags that display header text at six levels or sizes with one being the largest.
P – tags are paragraph tags and surround each paragraph of text leaving a space before and after each block of text.
br – tags are line break tags that force the text following them onto a new line when rendered in a webpage.
blockquote – tags are used to add style to a quotation by the author or other source in a blog post.
Opening and Closing HTML Tags
One thing it is important to understand about most HTML tags is that they normally have an opening tag and a closing tag. The opening tag is the tag, such as p for paragraph, surrounded by a less than sign before it and a greater than sign after it. Then the content the tag is to effect follows the opening tag. Finally, the closing tag follows the content the tag is to effect. The closing tag also starts with a less than sign and ends with a greater than sign. However, the closing tag also usually has a forward slash before the tag name so a paragraph closing tag would actually be /p surrounded by the less than and greater than signs.
More Complex HTML Tags
Above we covered some of the more simple HTML tags that are commonly used in WordPress. Now I want to get into some of the more complex tags in HTML that can also be used with WordPress. One such tag is the auto closing tag. An auto closed tag is one that doesn’t have an opening and a closing tag, but is only one tag. The br tag is a good example. An auto closing HTML tag is a single tag that also contains the closing slash inside of the less than and greater than signs. However the br tag can be used with or without the closing slash. In HTML5 it is proper syntax to use the slash though, so get used to doing so. Another example of an auto closing tag is the input tag which is normally nested within a form tag. The common usage of an input tag goes like this:
Notice how the slash is placed before the closing greater than sign.
Another example of more complex HTML tags are nested tags. Remember how I mentioned that the input tag is nested within the form tag normally? Well there are other cases where this is practically mandatory or at least proper coding. Once such case is with list tags. There are two main types of lists. There are ordered lists that use the ol tag and unordered lists which use the ul tag. Both also make use of the li tag nested inside of them. The following section shows a common use case scenario for each.
Ordered Lists
Ordered lists are lists that are numbered and look like this:
- item one
- item two
- item three
|
The above HTML would produce something like the following:
- item one
- item two
- item three
Unordered Lists
Unordered lists are lists that use bullets instead of numbers. The HTML for an unordered list looks like this:
- item one
- item two
- item three
|
The above code produces the following effect:
- item one
- item two
- item three
With either an ordered list or an unordered list, the listed items get surrounded by the li HTML tag. The group of li tags in turn get surrounded by the ul opening and closing tags.
Nested HTML Tags
I mentioned nested tags when discussing lists tags and form tags above, but the general concept of nesting tags can be used with many other basic tags as well. For example, you could have a p tag inside of another p tag and it would still work like in the following example:
This is the start of a paragraph this is inside of the paragraph but a paragraph of its own this is the end of the original paragraph.
|
The above code would produce the following effect:
This is the start of a paragraph
This is inside of the paragraph, but a paragraph of its own
This is the end of the original paragraph.
In essence, the effect is the same as if the coder would have used three p tags, but accomplished the same thing with two. That is not really the intended purpose of this. You will understand why this might be done after reading the next section on attributes of tags.
Tag Attributes
Another great thing about using HTML in WordPress is the ability to assign attributes to HTML tags to change their functionality. For example, the p tag or paragraph tag can use the align attribute to center align or right align the text inside that tag. Also, you can use the CSS style declaration like an attribute to change the color of the text inside the tag. Consider the previous nested paragraph tags with the following changes and it makes more sense:
This is the start of a paragraph this is inside of the paragraph but a paragraph of its own this is the end of the original paragraph.
|
The above would print a red line followed by a blue line followed by another red line, making the coder only have to enter two inline styles instead of three because of the nested p tags. The p tag has one attribute, the align attribute, but also HTML has global attributes that can be called inside almost any tag. The inline style attribute used in the above example is just one of many global HTML attributes. Read on to learn more.
Global HTML attributes
Attributes are assigned to an HTML tag to alter the behavior of whatever is inside of that tag. In WordPress, these can be applied in the HTML view of the WYSIWYG editor. Here is a list of some of the more common global HTML attributes that might be assigned to any HTML tag:
style – used for declaring inline CSS styles for a tag.
class – used for assigning a CSS class to the tag.
title – used to display extra information about an element. Often triggers an on hover event so that text is shown to the user when the mouse hovers over that element.
lang – specifies the language used in that element.
id = assigns a unique id to the element.
accesskey – indicates a shortcut key to allow the end user to focus on the element on the webpage.
draggable – a new attribute to HTML5 that determines that the element can be clicked on and moved around the screen by the user.
contenteditable – tells whether the content within an element is editable or not and is also new to HTML5.
As you can see from some of the possible attributes, there are some things that could be added to a WordPress blog using raw HTML code and attributes that couldn’t be done with the default WYSIWYG editor’s functionality.
Summary
I hope you have learned some useful HTML tricks for customizing WordPress in this tutorial. If you make use of both HTML tags and their attributes, there are lot of extra things you can do to your content on your WordPress blog or website. Don’t forget HTML is easy compared to most other coding languages, so try it today. You might have fun making changes that you couldn’t do before in WordPress. Enjoy your new possibilities.