Html

Essential HTML

In today’s blogosphere, multiple platforms are vying for our attention, providing a diverse selection for us to pick from. There is a diverse selection of options available, ranging from well-known platforms like WordPress, TypePad, and Drupal to newer alternatives like Habari, Typo3, and CushyCMS. These tools have made it so easy to create a professional online image that even our grandparents could do it effortlessly!
In this modern era of user-friendly visual editors, how many people still have the skill to communicate using HTML, the web’s language? The times when manually writing HTML was considered a prestigious skill within the web expert community are now in the past. Despite editors enhancing our efficiency and productivity by allowing us to focus on content rather than code, it is important to appreciate the web’s foundational structure’s beauty and strength.
Let’s take a break to appreciate HTML, the sometimes neglected hero of the internet, and the foundation of every blogging platform.

Occasionally, despite their proficiency, these editors could be insufficient or we might desire greater independence and knowledge. We may desire to understand the underlying issues to avoid relying completely on them in case of any issues.

In this two-part series, I will guide you through an HTML for Bloggers Introductory Course using the WordPress visual editor. If you are a fan of HTML, this may not be suitable for you. If you need a reminder, are interested in seeing the code you’re creating in your posts, or want to learn how to surpass the limitations of your current editors, then this article is perfect for you.

In this post, you’re going to learn five key, fundamental, aspects of HTML. These are:

  • What is a tag?
  • Formatting
  • Alignment
  • Lists.

The next day we will introduce another crucial element.

  • Links
By the end of the series, you will understand the functions of the buttons in the post editor and have the ability to modify the HTML code if desired.
Even though I am calling it a course, do not be concerned as there will be no examination at the conclusion. Having a deeper understanding of HTML will make you feel more empowered if there were a single reason for it.

HTML foundations

Before we begin, I’d like to provide a quick summary of how HTML functions. If you haven’t had direct experience with it, it revolves around the idea of tags or elements. From now on, I will only call them tags.
Tags give documents and parts of documents special meaning. Web browsers, such as Chrome, Firefox, Internet Explorer and Opera know how to interpret that meaning and display the appropriate page, for your viewing pleasure.

This could possibly be the most basic HTML page that is still meaningful. The page starts and finishes with the word html enclosed in < and > angle brackets, with the closing one having a forward slash, /. In addition to that, we can also observe two more divisions, one named head and the other body.

At the top, there is a division enclosed in a heading and in the main part we see two divisions, one being a main heading and the other being a paragraph. The process will operate in the following manner:

  • The content between the tags determines the text that appears in the title bar of your web browser.
  • The text in side

    and will be the main heading on the page, likely in very large font and bolded

  • The paragraph enclosed in the tags and will be the initial text you see on the webpage.

The image below shows what it would look like if we were viewing it in Mozilla Firefox.

When you consider it, HTML is essentially just a document written in programs like Microsoft Word or Pages for Mac, but with added formatting to assign specific meanings to sections of text. Sometimes, the challenge lies in deciding which element or tag to use and when.

I trust that you can understand how simple it is. After that, log in to your WordPress website and create a new post, ready to customize, as shown in the image.

Practice Regularly: Like any other skill, mastering CSS Grid requires consistent practice. Incorporate it into your projects and don’t hesitate to experiment with different layouts. The more you use CSS Grid, the more proficient you’ll become.

Headers and basic formatting

Following links in order of significance, headers and simple formatting are immediately next in importance. This encompasses: the main headings, highlighting in bold, italics, strike-throughs, and quotations.

Headers

As we all know, for documents to be searched and ranked most effectively in Google, they have to be semantically correct. In short, that means they have to use headers in the right way and use formatting where appropriate. The largest header should contain the core theme or point of the page and the increasingly smaller headers should be for sub-points of that.
Let’s say we’re working on an article about the U.S. election. The primary focus would revolve around the election, with two prominent sub-themes being the Democratic and Republican parties. Take a look at the example that I have prepared for you below:
I have the primary title titled US Election, followed by the subheadings for Republicans and Democrats, each containing regular text content, without any unique styling. Let’s examine the HTML code that has been created by switching to the HTML view.
It is evident that the primary title is enclosed in a H1 tag and the two secondary titles are enclosed in H2 tags. H1 holds the highest level of importance, while H2 to H6 decrease in importance. Now, let’s consider discussing the most recent speech given by Bill Clinton at the Democratic Convention. Take a look at the section below where I have included a H3 and H4 header specifically addressing that topic.

Basic formatting

Now, suppose we were discussing Obama and wanted to emphasize his name by formatting it, like making it bold. In the visual editor, you would select the text and click on B. Now let’s see how we would do it in the HTML editor.
Switch to it, then either type some text or highlight existing text to wrap it with the tags and , as shown in the example: text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Duis malesuada.
The faucets are a mixture of luxury and utility; Duis malesuada.
Once you have completed that task, switch back to the visual editor and you should see an output that looks similar to the image provided below.

 

Italics and strikethroughs

What if we don’t want to make text bold, but instead want to italicize it for a list of important items, or strike through an item to emphasize a correction in our text. As you have likely noticed, they are just as uncomplicated as the earlier items.
The *italics* tag represents emphasis and the ~strikethrough~ is used to denote deletion. Suppose we have a lengthy inventory of items, like cities in New Zealand, listed with commas. Let’s highlight them to make them more noticeable to our reader. Within our visual editor are the cities of Christchurch, Aukland, Invercargill, and Taupo. However, we do not want to italicise the commas or the word ‘and’. Insert the aforementioned list into the Visual editor and then switch to the HTML editor.

Contact Form

Please enable JavaScript in your browser to complete this form.