Basic HTML Techniques for Your WordPress Site

By Lisa Sabin-Wilson

HTML can help you customize and organize your WordPress theme. To understand how HTML and CSS work together, think of it this way: If a website were a building, HTML would be the structure (the studs and foundation), and CSS would be the paint.

Here is a very basic block of HTML:

<body>
<div id=”content”>
<h1>Headline Goes Here</h1>
<p>This is a sample sentence of body text. <blockquote>The journey of a thousand miles starts with the first step.</blockquote> I’m going to continue on this sentence and end it here. </p>
<p>Click <a href="http://lisasabin-wilson.com">here</a> to visit my website.</p>
</div>
</body>

All HTML elements must have opening and closing tags. Opening tags are contained in less-than (<) and greater-than (>) symbols. Closing tags are the same, except they’re preceded by a forward slash (/).

For example:

<h1>Headline Goes Here</h1>

Note that the HTML elements must be properly nested. In line four of the previous example, a paragraph tag is opened (<p>). Later in that line, a block quote is opened (<blockquote>) and nested inside the paragraph tag. When editing this line, you can’t end the paragraph (</p>) before you end the block quote (</blockquote>). Nested elements must close before the elements they’re nested within close.

Finally, proper tabbing, or indenting, is important when writing HTML, mainly for readability so you can quickly scan through code to find what you’re looking for. A good rule is that if you didn’t close a tag in the line above, indent one tab over.

Images

Many times, you’ll want to insert an image in your website, whether within the body of a post or page, in the sidebar by using a widget, or within the template code itself. The HTML markup to insert an image looks like this:

<img src=”/path/to/image-file.jpg” alt=”Image File Name” />
  • <img src=: This is the HTML markup that tells the browser that the website is looking for an image file.

  • “/path/to/image-file.jpg”: This is the actual directory path where the web browser can find the image file.

  • alt=“Image File Name”: The alt tag is part of the HTML markup and provides a description for the image that search engines can pick up and recognize as keywords. The alt tag description will also appear as text on browsers that can’t, for some reason, load the image file.

  • />: This HTML markup tag closes the initial <img src=” tag, telling the web browser when the call to the image file is complete.

Hyperlinks

A hyperlink is a line of text that’s anchored to a web address (URL) so that when visitors on your website click the text, it takes them to another website, or page, in their browser window. The HTML markup to insert a hyperlink looks like this:

<a href=”http://wiley.com”>Wiley</a>

Here’s a simple explanation:

  • <a href=: This is the HTML markup that tells the browser that the text within this tag should be hyperlinked to the web address provided in the next bullet point.

  • “http://wiley.com”: This is the URL that you want the text to be anchored to. The URL needs to be surrounded by quotes, which defines it as the intended anchor, or address.

  • ”>: This markup closes the previously opened <a href= HTML tag.

  • Wiley: In this example, this is the text that is linked, or anchored, by the URL. This text appears on your website and is clickable by your visitors.

  • </a>: This HTML markup tag tells the web browser that the hyperlink is closed. Anything that exists between <a href=“..”> and </a> will be hyperlinked, or clickable, through to the intended anchor, or web address.

Lists

With HTML markup, you can easily provide lists that are formatted differently, depending on your needs.

Ordered lists are numbered sequentially, such as a steps list of things to do, like this:

  1. Write a paper.

  2. Submit to professor.

  3. Panic a little while he grades the paper.

  4. Breathe a sigh of relief when the paper gets an A!

Ordered lists are easy to do in a program like Microsoft Word, or even in the WordPress post editor because you can use the What You See Is What You Get (WYSIWYG) editor to format the list for you. However, if you want to code an ordered list using HTML, it’s a little different. The list looks like this when using HTML markup:

<ol>
<li>Write a paper.</li>
<li>Submit to professor.</li>
<li>Panic a little while he grades the paper.</li>
<li>Breathe a sigh of relief when the paper gets an A!</li>
</ol>

The beginning <ol> tells a web browser to display this list as an ordered list, meaning that it will be ordered with numbers starting with the number 1. The entire list ends with the </ol> HTML tag, which tells the web browser that the ordered list is now complete.

Between <ol> and </ol> are list items designated as such by the HTML markup <li>. Each list item starts with <li> and ends with </li>, which tells the web browser to display the line of text as one list item.

If you fail to close any open HTML markup tags — for example, if you start an ordered list with <ol> but fail to include the closing </ol> at the end — it messes up the display on your website.

Unordered lists are very similar to ordered lists, except instead of using numbers, they use bullet points to display the list, like this:

  • Write a paper.

  • Submit to professor.

  • Panic a little while he grades the paper.

  • Breathe a sigh of relief when the paper gets an A!

The HTML markup for an unordered list is just like the ordered list, except instead of using the <ol> tag, it uses the <ul> tag:

<ul>
<li>Write a paper.</li>
<li>Submit to professor.</li>
<li>Panic a little while he grades the paper.</li>
<li>Breathe a sigh of relief when the paper gets an A!</li>
</ul>