WordPress Guide: part 11 – HTML Basics

Thursday, February 25th, 2010 at 9:52 pm

Click here to download the complete 11-part guide in PDF format. (2.5MB)

HTML, by itself, is actually a very easy language to learn. When you combine it with CSS (Cascading Style Sheets) and other web languages, then it becomes a little too much for non-web designers to absorb.

HTML is nothing more than instructions for the browser in the form of tags. Tags (not to be confused with WordPress Tags) are letter codes surrounded by brackets like this: . Your text and images need to be surrounded by these tags so the browser knows where to place the content and how to display it. Otherwise, the browser will do what it wants to. And it won’t be pretty.

Most tags come in pairs – an opening tag: and a closing tag: . You’ll notice the only difference is the “/” in the closing tag. This tells the browser that it has reached the end of this particular instruction. The browser will then continue to look for the next instruction.

Here is a list of the most common HTML tags you will encounter using WordPress:


The Paragraph tag goes at the beginning and end of a paragraph of text.


The Anchor tag is used to create text and image links. The “href” attribute is where the URL goes.


Both the Strong tag and Bold tag designate what text to bold. WordPress uses when you click the Bold button, but if you use the  tag when typing in HTML mode WordPress will treat it the same.


Both the Emphasis tag and Italics tag designate what text to italicize. WordPress useswhen you click the Italicize button, but if you use thetag when typing in HTML mode WordPress will treat it the same.


Unordered Lists are lists that use bullets before each statement.


Ordered Lists are lists that use numbers or letters before each statement.


Both unordered and ordered lists use the List Item tag for each statement in their list.


The Header tags are used for page titles, headings, sub-headings, etc. There are 6 levels of Headers in HTML but there’s usually no reason to go beyond level 3. is the largest and treated as the most important and influential (by SEO standards). Each level after is less influential and appears in a smaller font size. Web pages shouldn’t have more than one tag. My themes use thetag for the page/post titles (that just makes sense to me). The default WordPress themes assign to the page/post titles. So if you’re using a theme that I designed, I advise you not to usetags in your text since there already is one on the page. Usefor your sub-headings andfor any smaller headings.


Tables help you separate content into columns and rows just like a spreadsheet or grid. They start and end with a Table tag. They also may contain the TBody Tags which contains the columns and rows of the table. Cellpadding is the space inside each table cell between the content and the border of the cell. Cellspacing is the space in between each cell. Border determines if there is a border around your cells and how thick it is.


TR stands for Table Row. Every table must have at least one row to start.


TD stands for Table Data Cell. This is the lowest level of the table tree and where your content goes. Every table has at least one table cell.

To create a simple table with two rows and two columns, your code would look something like this:


The Span tag is used for adding a Style (font size, color, etc.) to a specific piece of text or image. The content to be styled goes between the Span tags. The styles you want to assign go in the style quotes. This will require CSS knowledge.


The Image tag is an example of a tag that doesn’t have a closing tag. It closes itself by having its own “/” at the end of the code. The SRC attribute tells the browser the location source. In the example below the “logo.jpg” is located in the “images” folder. The ALT attribute tells the visitor what is supposed to be there if no image is visible. This is important for screen readers that can’t show images. This also helps search engines to determine what the image is depicting.


The Break tag is another “open tag only” bit of code. This is used to start a new line of text without starting a new paragraph.


Comment tags are used for adding notes for the web designer or content author to see in HTML mode. Anything within the Comment Tags will not be visible on the live web page by your visitors.

Part 1: Introduction
Part 2: The Dashboard
Part 3: Writing or Editing a Post
Part 4: More About Content
Part 5: Design & Layout
Part 6: Plug-ins
Part 7: Authors & Users
Part 8: Tools
Part 9: Settings
Part 10: SEO Basics
Part 11: HTML Basics

Tags:

One Response to “WordPress Guide: part 11 – HTML Basics”

  1. Frank Butterfield says:

    Sean –

    This is so awesome!! I really love your WordPress manual! It’s the best one I’ve ever seen.

    I particularly love this last part on basic HTML.

    I’m going to give it to my clients. Some of them are feeling like they can edit their own pages and posts, which I encourage. Your guide will be perfect for them.

    Many, many thanks!!

Leave a Reply