HTML is the foundation of almost everything on the Internet. It is the pillar on which the web is built, and has been for decades.
Without a fundamental knowledge of HTML everything you do with WordPress or any other web development or design system will have limits.
Although my first steps in web creation were with HTML and a simple text application, over time I focused on CMS and practically stopped learning, and it was a mistake, because there comes a point where to move forward, to dedicate yourself to web creation, you have to learn at least HTML and CSS, and then, if you want to program seriously, you have to master PHP and JavaScript.
Although it is less and less essential to know code to design and develop websites, thanks to the ease of current frameworks such as Elementor, Divi or WordPress itself, if you really want to have no limits you must learn the fundamental markup and programming languages for the Internet.
And today I’d like to start with the foundation of it all, HTML.
The best of all is that you don’t need to learn everything at once, there are a series of basic HTML codes that every WordPress user should know to apply them on a daily basis, and this is what we are going to learn today, slowly, step by step.
Table of Contents
What is HTML?
HTML is the abbreviation of hypertext markup language, which means that it is not quite a programming language, because HTML does not order your computer to execute things, what it does is that it takes a text that you have on your page and applies a markup, bold, alignment, size, etc..
In addition, HTML gives you the ability to include links and images, and with HTML5, the latest version, manipulate them to your liking.
HTML code is contained within tags, and is very easy to read. A simple HTML page would look something like this:
<html>
<head>
<title>Here is the web title</title>
</head>
<body>
<h1>Here is the viewable title for readers of the website</h1>
<p>Content</p>
<p>More content</p>
<p>More and more content</p>
<h2>Heading</h2>
<p><img src="https://wphelp.com/wp-content/uploads/2021/02ache.png"></p>
<p><a href="https://wphelp.com/">A link to a website</a></p>
</body>
</html>Code language: HTML, XML (xml)When viewed from a browser it would look like this:
As you may have noticed, HTML is actually quite simple. In fact, even if you have never seen HTML code before, you can probably guess what each of the tags means, just from the context.
Having seen this, let’s now see what are the basic HTML codes, the most common ones, that you will see in every web page.
Bold
When you wrap your text in <strong> tags you are telling the browser to make the text bold.
You can also use <b> , but since search engines prefer semantic markup, which means something, you’d better get used to using<strong> . Example usage:
You can put <strong>text in bold</strong> using this tag.
Code language: HTML, XML (xml)Italic
Another common HTML tag is <em> short for emphasis, which is the semantic use of italics in HTML. You can also use, if you prefer, the tags <i>. Example of use:
You can put <em>text in italics</em> using this tag.
Code language: HTML, XML (xml)Underlined
The tag <u> is the one we will use to underline text. It is rarely used, because as links tend to have automatic underlining in most browsers, if you underline text it could lead to errors and users clicking on sites where there is no link, and that would be a bad user experience.
Example of use:
You can put <u>underline text</u> using this tag.
Code language: HTML, XML (xml)Headings
I would dare to bet that the most used basic HTML codes are the headings. I’m referring to the HTML <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, tags that we use to divide our content into smaller sections.
With headings always keep in mind to use them in a logical hierarchical order. Search engines like it, they find it more reasonable, that you use <h2> only under an <h1>, not under an <h3>.
Although most web pages only have a single <h1>, Google no longer penalizes you for having more. Just remember that if you reuse in your content an <h1> it is like resetting the hierarchy of the previous lower headers on the page, or that section of the page.
Example usage:
<h2>H2 is the most commonly used heading tag.</h2>.
<h3>You can then nest inside an h3.
<h4>And so on.</h3> <h4>And so on.
<h2>Then go back and start another section</h2>.Code language: HTML, XML (xml)All the headers I am using in this guide for each section of the HTML elements are h2.
Image
Inserting images is one of the most useful things HTML allows us to do. Years ago the Internet was all text, but today we wouldn’t imagine any web page without at least one image.
All you have to do is to know the URL of where the image you want to display is, and put it inside the HTML <img src> tag (which is an abbreviation of image source).
Example of use:
<img src="https://wphelp.com/blog/wp-content/uploads/2021/ahe.png" alt="image alt text">
Code language: HTML, XML (xml)Notice that you don’t need to close the image tag like the rest, and you don’t even need to put the quotation marks, although most of us use them to make the code more readable.
The <alt> attribute is the text that will be displayed for accessibility and is also indexed by search engines. Don’t forget its importance, because for users browsing with screen readers and other accessibility devices the alternative text is absolutely necessary to use the Internet and enjoy it like the rest of us lucky enough to have no accessibility problems.
Link
And now the links. What would the Internet be without links?
And we can do lots of things with links. In its most basic use we simply put an <a href> tag. The <a> indicates that it is a link, and the <href> is the hypertext reference (the URL) to which we are linking.
Basic example of use:
<a href="https://wphelp.com/">A link to the WordPress Help training website.</a>
Code language: HTML, XML (xml)If you look at the example above, we simply close with a </a> , and you can put any text inside, which will be the clickable link, also called anchor text.
In the browser it would look like this: A link to the WordPress Help training website.
Also, if you want, you can nest HTML code. A very typical example would be to make an image clickable, by inserting an <img src> tag inside link tags, replacing what would normally be text.
Example of use:
<a href="https://wphelp.com/"><img src="https://ayudawp.com/blog/wp-content/uploads/2021/ache.png"></a>
Code language: HTML, XML (xml)Which, in the browser would be the following, an image with a link:
Link attributes
It is not mandatory, but it is sometimes advisable to include some attributes to the links, which make them behave in a particular way, either to override the indexing of the URL or to open it in a new browser window.
The most commonly used link attributes are these:
- rel – Indicates some kind of relationship of the link and where it leads to. For example, to avoid referral traffic back.
- target – Tells the browser where to open the link: _blank will open it in a new window, for example.
- nofollow – This is a widely used value of the rel attribute, and tells search engines that you do not want to pass link juice to the linked site. It is useful when you link to controversial content or content that has nothing to do with your original content. It also prevents people from leaving spammy links in your comments, as they don’t get any SEO benefit.
There are more, but these are certainly the ones you’re going to see most often.
Example of use:
<a href="https://wphelp.com/" target="_blank" rel="nofollow" >WordPress online courses</a>
Code language: HTML, XML (xml)Strikethrough text
Sometimes used to make jokes by crossing out text. It is also sometimes used inside lists, to indicate that something is not available, or any other situation where you want to cross out text.
In these situations we use the <del> tag, short for delete, around the text we want to cross out.
Some people never use this tag, but for others it is very common to use it, for crazy multiple reasons. In any case it is a very easy HTML code to remember, and to use.
Example of use:
You can <del>strikethrough the text</del> using this tag.
Code language: HTML, XML (xml)Lists
Lists are actually one of the most commonly used markup (formatting) today. Besides giving you a lot of white space in your texts, they also serve to organize complex ideas and break them down into easily consumable parts.
There are two types of lists you can make with basic HTML code:
- Ordered lists <ol> – With numbers, such as 1, 2, 3 and so on.
- Unordered lists <ul> – Using bullets and symbols instead of numbers.
To use them you must wrap each list with <ul> or <ol> depending on whether they are unordered or ordered, respectively.
Then, each list item will be wrapped in the <li> tag.
Example usage:
<ul>
<li>This is an unordered list item.</li>
<li>And this one.</li>
</ul>
<ol>
<li>And this is an element of an ordered list.</li>
<li><a href="https://wphelp.blog">This is a link within a list.</a></li>
<li><strong>And this is a bold text</strong> within a list.</li>
</ol>Code language: HTML, XML (xml)And, as you will see this example in the browser would look like this:
- This is an unordered list item.
- And this one.
- And this is an element of an ordered list.
- This is a link within a list.
- And this is a bold text within a list.
As you have seen, you can also nest other tags within lists (bold, links, etc.).
Quotes
At some point you’re going to want to quote someone else’s text, and that’s where the <blockquote> tag makes sense.
Simply wrap whatever text you’ve copied/pasted with the opening and closing <blockquote> tags and you’re done.
Example usage:
<blockquote>This text will be styled in some special way (depending on your theme) to indicate that it is a quote.</blockquote>
Code language: HTML, XML (xml)The previous example would look like this in the browser, varying its appearance according to the styles applied by the theme you have active:
This text will be styled in some special way (depending on your theme) to indicate that it is a quote.
Paragraphs
The HTML of the paragraphs is a bit weird. Depending on the CMS and even the editor or layout you’re using, it may or may not show each line break as a paragraph.
WordPress, for example, does. If you use the block editor it automatically adds block change indicators, which force a new paragraph, and if you use the classic editor, when you press Enter, it adds a   tag on the next line and moves you to the next one.
But this is not always the case, and in fact browsers, by default, ignore line breaks, if they are not accompanied by an HTML tag that tells them otherwise.
The safe thing to do is if you want to keep your paragraphs separate instead of a huge brick of text, wrap each one in opening and closing <p> tags.
This will ensure that the browser displays each block of text as a separate paragraph rather than as a continuous block of text.
Example of use:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>Code language: HTML, XML (xml)Lines and line breaks
Related to what we have seen before with paragraphs, sometimes you will want to separate blocks of text or sections, that’s when we will use the <hr> or <br/>tags.
- <hr> inserts a visible separator line. They are widely used to separate widgets or important sections of a page with a lot or different content.
- <br>is simply a line break. You can use <br/> in the middle of a paragraph (<p>) to make a line break without jumping to a new paragraph, mostly for stylistic or personal taste reasons.
Although you can use line breaks to separate text and paragraphs by inserting them where you want them to break, it is not a good idea to do so. Practice will show you what is most appropriate in each case, sometimes it will be better to use <p> and other times <br/>.
Examples of use:
This is text with a line break at the end.
<br/>
This is another text after the line breakCode language: JavaScript (javascript)It will look like this:
This is text with a line break at the end.
This is another text after the line break
This is a text.
<hr>
This is another text below the visible line.Code language: HTML, XML (xml)And it will look like this:
This is a text.
This is another text below the visible line.
To summarize
HTML is absolutely necessary for the Internet to work as we know it. We all use it the same way, whether you are a beginner or have been developing websites for years.
Basic HTML is still used to run the foundation of every website, including those created with WordPress, just right click on your website and click on the link to “view page source” code to check it out.
No matter how mind-blowing the site looks or how advanced its functionalities seem to you, when there is a broken link or it appears all in bold instead of a single word there is something to fix in the basic HTML code of that page because for sure there is a <a href> or <strong> tag that has not been used well, and you can fix it editing the HTML now that you know the basic HTML codes, which are also the most used.
