HTML Basics for WordPress Users

I understand coding is scary for those not used to it. I avoided it myself for a long time. Knowing some basic HTML can help you manage your website, saving you time and money.   Here are a few basic rules to get you started.

1. HTML tags are wrapped in these < > symbols. For example, a paragraph tag looks like this <p>. We’ll call the “p” the tag label for now.
2. The majority of tags have an opening tag <p> and a closing tag </p>. Adding the /before the label means that it is a closing tag.
   1. Regular HTML tags wrap around some sort of content, usually text, or more code. Here is an example of paragraph tags wrapping around text:
      <p>This is my first sentence. This is my second sentence.</p>
      The above example would display as:

      This is my first sentence. This is my second sentence.

3. There are a couple tags that are self closing. The main ones you’ll see are a <br />, <img /> and <meta />. The self closing tags end in a space, then />. These tags don’t have a closing tag, because they are self closing.
4. You can add additional information inside an opening tag called an attribute, or one that is self closing. It would look like this:
   <p class="myclassname">This is my paragraph,<br clear="left" /> it has a page break in it that will clear items that have been left aligned. </p>
   Note that we have added an atrribute called a class to the paragraph, and we have told the page break to clear any left aligned items. The above example will display as: 

    

    

   This is my paragraph,
   it has a page break in it that will clear items that have been left aligned.

5. If you forget to add your closing tag, it can cause the page to display improperly.
6. Keep your tags lowercase. Like this <p>, not like this <P>.

See, it’s not that complicated. Now rather than learning all of the HTML language, we are just going to focus on a couple basic tags.

The Paragraph Tag

<p> begins a paragraph

</p> ends a paragraph

More information about the paragraph tag here.

The Page Break Tag

<br /> this adds a page break. It normally goes within the paragraph tags. See this example:

<p>This is my paragraph,<br /> it has a page break in it that will clear items that have been left aligned. </p>

The above example will display as:

This is my paragraph,
it has a page break in it that will clear items that have been left aligned.

More about the Page Break Tag.

The DIV Tag

A div is essentially a container or a box. It can be used to organize information and for display purposes.

<div> this is begins the div/box

</div> this ends the div/box

You might put a paragraph within a div like this:

<div align="center"><p>This is my paragraph,<br /> it has a page break in it that will clear items that have been left aligned. </p></div>

The above example will display as:

This is my paragraph,
it has a page break in it that will clear items that have been left aligned.

You can use a stylesheet to tell the <div> to do things like be somewhere special on the page, have a border or background color, etc.. Your web designer will create the stylesheet, but that is something we are not going to talk about here as it would be too complicated.

More about the DIV tag.

The Image Tag

<img src="my_image.jpg" /> This is an image tag. As you notice it is self closing. The src tells where the location of the image is. Often times it may look like src="http://www.mywebsite.com/images/my_image.jpg. This tells us that the image named my_image.jpg is located on the www.mywebsite.com website and in the images folder. Search engines like you to add alt text to the image tag so that search engines know what the image is of. This is also helpful to blind folks or those needing screen readers. The alt text is merely a description of the image. It would look like this: <img src="my_image.jpg" alt="I would put my image description here" />. You can also specify a height and/or width to your image. Images are measured in pixels. An image with height and width attributes would look like this: <img src="my_image.jpg" alt="I would put my image description here" height="100" width="100" />

Additional information about image tags here.

The Anchor Tag

The anchor tag is most commonly used to link text or images to another file, website, or email address.

<a> begins the anchor

</a> ends the anchor

The most common attribute that you’ll see in an anchor tag is the href. This is the location you are linking to. Here are a few examples.

<a href="about.html">link to the about page</a>

In this above example, the “link to the about page” text would be linked to a page called about.html that is located in the same folder as the page you are viewing.

<a href="about.html" target="_blank">link to the about page</a>

In this above example, the “link to the about page” text would be linked to a page called about.html that is located in the same folder as the page you are viewing. In this case, the target="_blank" has been added which tells the browser to open the file in a new window.

<a href="mailto:john@gmail.com">send me an email</a>

In this example, mailto: has been added along with an email address. maito: tells the browser to use the computers default email program to create an email. In this case to go to john@gmail.com. If you are on a public computer, like at a library, there is probably not going to be a default email program, and thus the link will not work. Therefore, it may be better to write the link like this so that the user can write down the address. <a href="mailto:john@gmail.com">send me an email at john@gmail.com</a>

Additional Information about anchor or link tags here.

Other Resouces

There are many other resources available on the web. Here are a few to get you started:

• W3C Schoools – HTML Tutorial
• Web Monkey – HTML Cheat Sheet