HTML For WordPress
WordPress features a block editor now that makes pages super easy to create, but if you want more control over your web pages, you’ll want to learn some HTML and some CSS, too. In this post, we’ll be focusing on the HTML part.
Headings
Headings are some of the simplest HTML elements. They’re important for creating, not just headings, but obviously subheadings as well. They provide a simple way to structure your content, and using them well is critical for SEO. If you build any sort of website with WordPress, you’ll use them.
There are six headings in HTML. They are h1, h2, h3, h4, h5, and h6. H1 is the largest, h2 the next largest, and so on. The syntax consists of an opening tag, your heading text, and then a closing tag. The syntax looks like this:
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 1</h3> <h4>Heading 1</h4> <h5>Heading 1</h5> <h6>Heading 1</h6>
Press the play button on the code editor to see what the code will look like on your site, and feel free to play around with it, if you’d like.
Links
Links are likely to play a big part on your WordPress site. Internal links to your other web pages and external links out to other sites also play a big part in improving your overall SEO. Like headings, links are extremely simple to create using HTML. They also have an opening and a closing tag.
Links also introduce attributes to our code. In particular, they use the href attribute, which stands for hypertext reference. You don’t necessarily need to remember that though. The opening and closing tags surround the text that you want to serve as the link itself. Make sure you click the play button for all of our examples, so you can see the element in action. They’ll make a lot more sense if you do. Here’s what a link looks like in HTML:
<a href="https://rabblry.com">Rabblry</a>
Images
Surely, you will want to include some images within your site. They can go a long way in turning a very bland, text only site, into something much more interesting for your users and/or readers. So, let’s spice things up a little bit and learn how to add one. Images are a little different than the last two elements in that they don’t have a closing tag and they introduce the src attribute. In case you can’t guess, src stands for source. Let’s take a look:
<img src="https://rabblry.com/wp-content/uploads/2020/03/small-puppy.jpg" alt="Cute longhaired puppy">
Super simple though, right? This just links out to an unstyled photo of a small puppy with, for whatever reason, propane tanks in the background. I’m sure you noticed the alt attribute as well, huh? I can explain that. This particular attribute is to describe your image. It’s important for the visually impaired and for other people who use screen readers. Also, if the link didn’t work for some reason, people could still hover over the broken link symbol and at least get a description of what’s supposed to be there. Pretty handy.
You’ll probably want to style your images a little bit too, right? The puppy’s cute, but other than that, it’s not very aesthetically pleasing. We’ll practice some inline styling next. It probably won’t be pretty, but we’ll save the pretty examples for another post, strictly about CSS, the styling language of the web. Inline styling is technically CSS, but it’s CSS within HTML, so I think it still qualifies for this post.
Inline Styling
To illustrate how to do this, we’ll use the image tag that was featured in the last section. I won’t be showing you all inline styles, because that would cover the majority of CSS. My goal is just to give you a basic idea of how it works. I’ll show you the code first, and then we’ll discuss what’s going on in the paragraphs that follow. Here it is:
<img src="https://rabblry.com/wp-content/uploads/2020/03/small-puppy.jpg" style="border: 4px solid teal; border-radius: 5px; box-shadow: 2px 2px 6px 7px #ccc">
Super simple example, but it will do. It’s not exactly the prettiest of styles either, but I wanted them to stand out a little bit, so you could really see what’s going on. I don’t want to load you down with too much CSS. So, first off, our styles are going to go inside of style=””, and more specifically, inside of the quotation marks. The styles we see inside of those marks are referred to as “properties”.
The first property we see is border. The 4px means that we want a 4 pixel thick border. Then, we’re saying that we want the border to be a solid border. We could have also chosen a dashed or a dotted border as well. I’m sure you can probably guess what those would look like. If you ever messed around with borders in Microsoft Word, you’ve definitely seen those styles before. Lastly, as far as the normal border styles are concerned, we’re saying that we want it to be teal colored.
We’re not quite done with the border though. We also want our border to have rounded edges, so we add a slight curve to the edges of the photo as well. We give it a 5 pixel radius.
We also want our photo to have a subtle shadow. We want it to extend out from the right side and from the bottom. The first pixel measurement refers to the horizontal offset. Since we want it to extend out from the right side, we give it a positive value (2px). If we wanted it to extend out from the left side, we would have given it a negative value. The next value is for the vertical offset. To extend it down, again, we give it a positive value.
The next value is for the blur radius. The higher the value, the greater the blur of the shadow. The final pixel value refers to the spread radius. This extends the size of the shadow. Then, we have the color of the shadow. We’re specifying a light grey. #ccc is shorthand for the hexadecimal color #cccccc which, as the name suggests, is normally 6 letters long, but we can shorten some to just 3.
With colors, you can also use words, such as blue, gray, teal (like we used on the border) and rgb colors, which specify the amounts of red, green, and blue in the color. The rgb equivalent of #ccc is rgb(230,230,230). With rgb, black is represented by all 0s (the lowest possible value) and white is represented by all 255s (the highest possible value).
With styles, the style you would like to add is followed by a colon ( : ), and then closed by a semi-colon ( ; ). With inline CSS, the last value specified does not need a semi-colon, but you can always add one to keep your syntax consistent, if you would like. It won’t affect the result.
Hopefully, with this example, you can see the pattern required to style HTML elements with inline CSS. It’s important to note that if you were creating a website from scratch, you would want to include your CSS in a separate file, but this is for WordPress users who would rather not mess around with the CSS too much and simply want to add some basic styles to the pre-existing CSS that comes with their theme. I’m going to end this section here, but I will add a full post on CSS in the near future.
Small Tag
In this section, and for the next few sections, we’ll take a look at a few elements that add meaning to our text, and less importantly, happen to add some styling to it as well. The first one up is the small tag. This tag would achieve what you would think as far as styling goes, but it’s important to note that the main reason to use it would be to add some context to your text.
The small tag is used on text that’s kind of like a byline. You could, in fact, use it for an author name. I use it, at times, to list a photo attribute or a photo description. Footnotes would be another good use of the small tag. The syntax is similar to the link tag we looked at earlier.
In addition to the small tag, we’re also going to take a look at the paragraph tag. Looking at these two elements together will highlight the difference between the two. Their syntax is pretty much the same:
<p>This is a paragraph. The paragraph tag is used for...paragraphs. Otherwise, it would be confusing, and I would quit building websites altogether. <small>This is small text. It can be used inside of a paragraph, or...</small></p> <small>...it can be used outside of a paragraph!</small>
Strong
The strong tag is very similar to the small tag. It provides your text with some context. In the strong tag’s case, it emboldens the text and adds some force to it. The result is bold text:
<p>The <strong>strong</strong> tag can also be used inside or outside of a paragraph. How convenient!</p>
Emphasis
You can also, as you may have guessed, add emphasis to your text as well. This is achieved using the em tag which, of course, stands for emphasis. Super easy, right? Let’s give it a look then:
<p>This is not emphasized text. <em>This</em> is emphasized text.</p>
Block Quote
You may want to add a block of text from some other source. Maybe you’re a reporter and you want to put select quotes from an interview in one of your posts. The block quote element would be used to add context to a long quote to help readers know what it is. I’m sure you’ve seen its effect before. In its example, I’m going to pull some text at random from a Wikipedia page:
<p>This paragraph is so you can clearly see the difference between regular text and the text within a blockquote.</p> <blockquote>A block quotation (also known as a long quotation or extract) is a quotation in a written document that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size font. </blockquote> <p>This is another paragraph so that you can clearly see the difference.</p>
List
Since this post is getting a little longer than I anticipated, I’m going to make this the last element we look at. However, I’ll be sure to do a follow-up post in the near future and go over some other HTML goodies that will help you structure your WordPress web pages.
This particular element is going to be the list element. I’m going to give examples of two different kinds that we can use in our markup. I’m going to assume you can surmise what this element is for. That’s right! It’s used to create lists. This element is going to have two different types of tags as well. This time, I’m going to give the code and then discuss the parts in the paragraphs that follow, like I did in the inline styling section. You ready? Too bad, here we go:
<ol> <li>Ford</li> <li>Toyota</li> <li><del>Hummer</del> Chevy</li> </ol> <ul> <li>Red</li> <li>Green</li> <li>Blue</li> </ul>
Bonus! You also get to see the del tag in action as well. This is for “deleted” text. You can use it in conjunction with the ins (which stands for inserted) tag for a neat effect. Try it up top if you’d like. Wrap the word “Chevy” in the tag, just like we are doing with the del tag.
The first list, the ol, is an ordered list. The default effect for ordered list uses numbers to order them, but you can also use Roman numerals and letters, including uppercase and lowercase versions. These require adding a type attribute to the ol tag.
The second list, is the unordered list element. It uses a bulleted list by default, but you can use circles, discs, or squares. Again, this requires using a type attribute.
For more information on ordered lists, check out this MDN article.
And for more information on unordered lists, check out this MDN article
.Well, it was a blast, you guys. I hope that this added at least a couple of weapons to your WordPress arsenal if you’re new to HTML and/or WordPress. As I mentioned early in the list section, I’ll be adding at least one more blog entry in the near future to go over a few more elements. I’ve already got a bunch in mind. Also, like I mentioned, I’ll do my best to add an entire post on CSS soon, too. I hope to see you there!
Oh, and be sure to check out all of Rabblry’s coding and web development posts!
Featured image by Miguel Á. Padriñán from Pexels