Html basics: Learn 5 Handy tags for WordPress

 What is Html basics and why do you need to know some of the html basics?

Html Basics – Html is the abbreviation for hyper text markup language. Html forms the basis and give structure to most web pages. This language is broad and allows from basic structure and layout of text and content to very complicated elements that allows for data capturing and more. CSS or Cascading Style Sheets works in unison with HTML and as the name suggest provides style modification abilities.

Don’t be intimidated by how complicated all of this sound as you only need to be able to apply a few html basics to make your content look great and easy to read. WordPress offer various editors and plugins to generate the code for you usually for more complicated uses eg. contact/response forms. You can directly insert html basics into your content by using the text tab.

In this post we are only interested in learning the html basics, tags that you will need to make alterations to the way your pages display.

Getting to know the html basics.

As a rule tags must have an opening and a closing tag, this mean that you will be wrapping pieces of your text in the HTML tags, that will give the desired effect applied to the text between the tags.

In WordPress the pages are structured in templates that complies with web standards.


Header tags

Header tags, as the name indicates point out and style headings in browsers. To create a page main heading you will apply the H1 tag as follows:

<h1>My Page Title</h1>

It is crucial to always only have a single/1 heading one tag per page. More than one tag will mean that the page will be discussing more than one topic and this will result in poor SEO ratings, as each page should have only one topic.

H2 to H6 defines sub headings that can be defined to have different sizes and colors. The usage of subtitles not only make your content easier to read but also sends structure to the browser displaying your content improving SEO ratings.

Paragraph tags

In order to define paragraphs we use the <p> tag in the same way as headers, shown above only wrapping and entire paragraph at a time. In WordPress the paragraph tags <p></p> are automatically inserted every time you use the return/enter key.

Something to keep in mind is that you must always keep your paragraphs continuous, this is to allow for dynamic/responsive layouts. It is sometimes tempting to break a line to fit your current layout and page but when this pages are displayed on smaller or bigger display ports, your text may appear broken and difficult to read.

But what if you need to force short text string and you do need a break?

The line break

the tag to use here is the line break tag written as
you will notice that it combines the opening and the closing into one tag, therefore the slash is included into a single bracket and using this tag breaks the line to the next line not a paragraph.

In many cases you would want to create a bullet list and you will specify that separately, not using line breaks.

The List tags

There are 2 types of lists, ordered and unordered lists. The ordered list is numbered as below:

  1. Item
  2. Item
  3. Item

The unordered list display bullets instead of numbers as below:

  • Item 1
  • Item 2
  • Item 3

In order to declare the list you will embed 2 sets of tags, one wrapping the entire list and the second declaring the list elements.

Lets look at a sample.

<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>

The sample above is an ordered list and the same syntax are used for the unordered list. More list types exist but goes beyond the scope of this tutorial.

Table tags

Creating tables is handy but you must keep widths in mind when creating tables for responsive page layouts.

Start declaring the table with the tag. Then in each table you have rows and cells. Each table must have at least a single row that is declared with the tags.

With in this row you can now add cells using tags. In this example you will notice the width attribute is specified at 300 pixels you can also declare the border as follows: border=”1”

<table style=”width:300px”>
 <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>


 

Html is a widely used language and learning more of this will only help you in many places. You can find more samples and tutorials on HTML basics to advanced tags here:

Wysiwyg editors are software applications that allow for easy editing and creation of HTML. They basically works like word processors but outputs pages in HTML.

Renier van den Berg
Working alone, providing digital services to businesses in different sectors, comes with an advantage. I get to see the similarities in businesses operating in different sectors and will gladly help you to implement the right digital strategies and applications to save money and generate more business leads.