If you’ve been writing anything in WordPress for any length of time, you’ve probably clicked over from “visual” to “text” view at some point. To the uninitiated, it’s a strange world where alligators (< , >), slashes (/), and other odd creatures hang out, peppered throughout your writing like honeybees in a garden. What’s the point of it all?
It’s HTML (and maybe some CSS) that you’re seeing, and learning the basics of how it works can be a big benefit for your content at a very low time investment learning-wise. Seriously, it’s really easy to pick up the basics of HTML. Just understanding the little bit that appears in your WordPress text view naturally, along with a few more elements, can make your content richer, more accessible, and more visible in Google. Let’s look at how!
Benefits of Using (Semantic) HTML
Without launching into the history of HTML and a full on explication of purpose, let’s highlight one aspect: semantic markup. Semantic markup, or just semantic HTML, is HTML used specifically to reinforce or accentuate the structure and meaning of text. There are three major benefits to learning and applying semantic markup:
- Better interactivity with accessibility software like screen readers
- Helps search engines index your site more effectively, improving SEO
- Greater interactivity with, and easier, CSS styling (when and if you get into that)
In short, having a basic understanding of the HTML in your WordPress text editor will help your content reach a broader audience on a more meaningful level, make your content more visible in Google, and make life easier for you as your WordPress skills grow. Before we parse this further, let’s look at the very basics of HTML.
What is HTML?
HTML describes the basic structure of a webpage for your browser. By extension that also means for a screenreader, Google, etc. It’s like a set of instructions that your browser reads to determine how a page is supposed to be structured.
There is certain HTML that must be included for the page to be rendered at all (unless you’re using an alternative method to render; we won’t go there here). This is the markup that WordPress handles for you (technically, that your theme applies for you. We’ll look at that next in Basic HTML Structure.
Then there’s additional, optional HTML markup that goes into even more specific detail about the webpage’s structure. We’ll look at that too, and that’s the HTML you really need to have on your radar to improve the accessibility and visibility of your content.
Basic HTML Structure
The element, or tag, is the most fundamental component of HTML. An element consists of an open tag <p> and a close tag </p>. Their function is to describe the text they enclose. Let’s look at a few examples:
- <h1>Your article title will always be wrapped by header 1 tags</h1>
- <h1>…<h1> Heading/Subheading (& h2, h3, h4, etc)
- <p>…</p> paragraph
- <sup>…</sup> superscript
- <sub>…</sub> subscript
In use, these would look like this:
And display like this:
Attributes can be used to add supporting info to an element. They consist of a name/value pair, written as name=”value”. An attribute is always listed inside the opening tag.
In the following example, the element <p> is telling us that the wrapped text is a paragraph, and we’re further describing that paragraph by indicating that it is written in United States English:
- <p lang=“en-us”>blah blah blah blah blah</p>
Now that you’re familiar with elements and attributes, let’s look at overall HTML structure on a page. When you click over to the WordPress text view, you’re not going to see the full layout. WordPress isn’t displaying all of it, but it is there behind the scenes.
A typical HTML page consists of 3 main Elements:
- Head: Info about the page that is not displayed for the reader on the page
- Title: Displayed on the browser’s title bar or tab, not on the page itself
- Body: Content displayed on the webpage
You can see those in context with the elements we talked about here:
Semantic Markup refers to additional HTML elements that better describe the content of the page. How much or how little semantic markup you may want to apply depends on how well your theme handles this already.
To find out, you can see the basic HTML layout of any webpage using your browser’s element inspector: F12 in Firefox or ctrl+alt+J in Chrome (cmd+option+J on Mac). You can also just right click and select “inspect element” (FF) or ”inspect” (Chrome).
If you’re missing some of the stuff we cover below, you may want to start adding these elements into your posts and pages yourself. If these elements are not being used, then whenever a screen reader interprets your page, or whenever Google indexes your site, these sections of your content will not be acknowledged as anything special. That reduces the quality of engagement your users experience with your content, and negatively impacts your content’s ranking when indexed and SEO is determined by Google.
Let’s take a look at some of the most common semantic elements:
<article> Used to specify independent, stand-alone content like a blog post, forum post, or other article
<header> Specifies introductory content within the article
<footer> Specifies footnotes related to the page: author, contact info, legal info, etc.
<aside> Specifies content that is related to the main content but apart from it, like a sidebar, social widgets, etc
<figure> specifies content like images, charts, etc
<figcaption> specifies caption text associated with a figure element
<nav> specifies a navigation link(s)
<mark> specifies highlighted text
<emphasis> specifies text to be read with emphasis. This, like <strong> below, is an upgrade from the old italics <i> element that changed the visual appearance of the text but not the way it was read via screen reader. Emphasis and Strong are applied to text anytime you use the italics or bold toolbar key in your WordPress text editor.
<strong> specifies text to be marked as bold (replaces the old bold <b> element)
A Few More Elements of Interest
The following elements are commonly used in WordPress, but can be confusing to try to sort out on your own. In that interest, let’s take a look at them so you have a better understanding of these commonly used features of the text editor.
<a> … </a> is the element that specifies a link. Each link needs an attribute describing it (remember attributes come in name=“value” pairs). href is the name of that attribute, and the URL is the value.
So, a link would look like this: <a href=“URL”>Clickable Text Displayed</a>
There are 3 types of lists in HTML:
- <ol> ordered lists: lists with sequential numbers or letters
- <ul> unordered lists: bullet points
- <dl> definition lists: lists with terms <dt> and definitions of each term <dd>
Each list is wrapped completely in its list type element: <ol>, <ul>, or <dl>. Each point within the list is wrapped in an element specifying it as a unique list item.
- <li> for ordered and unordered lists
- <dt> (term) and <dd> (definition) for definition lists
Images are self-closing tags: an element where you just have one tag that closes itself, instead of an open and close tag. The basic wrapper looks like this: <img />.
Any image also requires a supporting attribute defining the location and name of the image file. The name of that attribute is src, and its value is equal to the image’s location (where the file is saved) and name.
Now inside the self closing image element:
- <img src=”location/name” />
And finally what it would look like for an image file named cat.png that is being stored on my localhost:
- <img src=“http://localhost:8888/wordpress/wp-content/uploads/images/cat.png” />
That’s all the info an image needs to be displayed but, in the interest of good semantic structuring, you should always include alternate text that describes the image. This is used when the image cannot be displayed for whatever reason. This presence or absence of alternate text is also a factor in SEO. Providing alt text is as simple as defining a new attribute, alt=”alt text to be displayed”.
- <img src=“http://localhost:8888/wordpress/wp-content/uploads/images/cat.png” alt=“cat wearing princess leia hair made of yarn” />
Other attributes can be added in the same fashion, such as width=”xx” and height=”xx”.
And that is basic HTML in a nutshell. If you’ve found this helpful, then the content of this article should be enough to give you a very good jump start towards making your site both more accessible and visible to current and future users. If you want to explore HTML further and enjoy a more hands on approach to learning, I would highly recommend w3schools.com for both basic HTML and semantic markup. Above all have a good time, have fun learning, and happy blogging!