If you are creating content for a WordPress site, but are not very familiar with html, it can be quite difficult to create nice looking posts and pages.
For that reason, I recommend knowing how html works as well as at minimum the following tags before you get too in to creating your site.
You can use the visual editor to do quite a bit, but if you make the effort to learn html you can create content that looks exactly like you want it to much more easily.
How HTML works
HTML stands for HyperText Markup Language and consists of two types of structures:
- Content placed between tags
The tags around the content tell web browsers what to do with the content. - Content consisting of tags
There are special tags that tell a browser to do things all by themselves. Such tags do not have beginning and ending tags, but consist of a single tag.
So, when creating content, you can either enter special tags which are, in and of themselves, content or you can enter content within tags which tell what to do with that content.
I recommend always enclosing your content within tags, even if it is simply text.
Common Tags which ARE content
Here are some of the most common tags which are, all by themselves, content.
- <br />
This is the break tag. It tells a browser to immediately end the current line and place any following content on the next line. One was used to place this information on the line after the tag itself. - <hr />
This is the horizontal rule tag. It tells the browser to end any current line of text, place a horizontal line, and start any further items under that line. - <img src="http://whatever.com/myimage.jpg" />
This is the image tag.
You use it to place images inside of your posts and pages.
As you can see, the URL (web address) for the image goes inside of quotes after src=, which stands for source=
Some other options that are often useful inside of image tags:- width=”"
The width of the image in pixels. - height=”"
The height of the image in pixels.
- width=”"
- <blockquote>content</blockquote>
Information to contain in a blockquote.
A blockquote functions much like a paragraph but is usually styled quite differently.
There are other such tags, but those are the most commonly useful ones so far as I have found.
Common Tags which CONTAIN content
There are a huge number of such tags, but some of the most common (and useful) ones are the following:
- <p>your paragraph</p>
- This places the text contained within it in a paragraph, providing whitespace between itself and the next items.
- Use this liberally as it makes text easier to read.
- <b>bold text</b>
- This makes the text within it bold.
- While it is supposed to be phased out in favor of "em" I don’t see it happening. When I want bold text I want bold text, not text that might be bold, italic, or who knows what else.
- <u>underlined text</u>
- This makes the text within it underlined.
- <h3>header 3 text</h3>
- This makes the text within it a type three header
- There are h1, h2, h3, h4, h5, and h6 tags.
- h1 is usually used for the most important item on a page
- h2 is usually used for the second most important
- The rest are used for other items of import.
- Because h1 and h2 are typically for a post title and your site name, I normally stick to using h3 and h4 within posts and pages
- These are great for callouts and prominent sections of a page.
- <a href="http://somesite.com/somepage">link text</a>
- This creates a link on the page to the URL http://somesite.com/somepage
- href="" contains the page or item to link to
- Further handy things to place within the <a > tag are:
- title=""
A title to display on mouseover - rel="nofollow"
- Important for search engine ranking. You should normally have this in links on your site which point to external sitesunless you really want to help the target site rank well
- target=""
- This tells the browser how to open the link.
- _blank means open in a new window
- _top means open in the current window
- some-other-text means open in a new window and reference it by the typed text. Further links opened with the same target will open in that same window.
- title=""
Additionally, there are lists:
An unordered list
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
The above looks like:
- First item
- Second item
An ordered list
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
The above looks like:
- First item
- Second item
A definition list
<dl>
<dt>data topic</dt>
<dd>data definition</dd>
<dd>data definition</dd>
<dt>data topic</dt>
<dd>data definition</dd>
<dd>data definition</dd>
</dl>
The above looks like:
- data topic
- data definition
- data definition
- data topic
- data definition
- data definition
And there are Tables
Tables consist of:
- An outer table tag set
<table> </table>
All other table tags should be between these two tags - An optional caption tag
<caption>caption text</caption>
This should come after the opening table tag - Table row tags
<tr> </tr>
These define rows. Only table data and table header tags should be within table row tags. - Table header tags
<th>some content</th>
Header elements
They contain content and come inside of table row tags - Table data tags
<td>some content</td>
These come betwen table row tags to create columns
Each TR tag set should contain an equal number of TD and/or TH tag sets. You can break this rule by making use of colspan and rowspan. If you want to learn to do so, search google for some excellent tuturials.
An example table:
<table>
<caption>My Caption</caption>
<tr>
<th>data 1</th>
<th>data 2</th>
</tr>
<tr>
<td>data 3</td>
<td>data 4</td>
</tr>
</table>
The above would look like:
| Data 1 | Data 2 |
|---|---|
| Data 3 | Data 4 |
While there is a lot more, the above are the most common, useful structures for creating clean pages and posts…in my experience.
