One of the reasons that Brand-Yourself is built on WordPress is because of the system’s ability to let you put content on the web–without having to worry about how it gets there. Important, because unless you dedicate yourself to 
learning how to build a page, your end product may not get you anywhere. Walter Feigenson is an excellent example of this: as he points out in an article he wrote for us, he’s not an HTML expert and doesn’t know a whole lot about websites and how they are created.
That’s not to say he doesn’t have worth to the Web; Walter offers some great advice on how to create good content, and content is king. However, from the technical side of things, he’s got a bit of a problem: Flash (the technology his main page is built off) doesn’t index well on search engines. If you search “Walter Feigenson”, you’ll notice the first hit does not point to his site, but rather to his blog.
It’s not particularly important, since he spends the majority of his time updating his blog. But this is a common peril of the Internet: not all Web technologies are created equal. Particularly when branding yourself, you want a substantial amount of Google search indexing. WordPress is excellent for this, as it is built on HTML and CSS.
However, even as user-friendly as WordPress can be, on occasion you may need to go “under the hood” and change some things about your blog post. If you look up toward the top of the post editor, you’ll notice an option to view your post either in “Visual” or “HTML”. Clicking on the HTML editor will allow you to see some of the code added to your post automatically. Here’s an explanation of HTML.
How HTML Elements Work
First thing first: HTML works on a tag-based system. Most HTML elements have an open and closing tag like this:
<strong>Text affected</strong>
An opening tag is always paired with a closing tag. You can identify the closing tag as the one with the “/”. If you have a broken tag, it means that there’s an opening tag without a corresponding closing tag. Don’t ever add or delete one without adding/deleting the corresponding pair; otherwise you will end up with unexpected results.
There are also empty elements: these are elements that don’t have two tags and include the “/” within the tag. An example is an <img> tag.
Common HTML Elements
<p></p> – this is a paragraph tag
<div></div> – this is a division tag, and is commonly used to divide that page in order for CSS or Javascript to affect specific portions of the page. It’s particularly useful for laying out a page and for dynamically updating a portion of the page without reloading the entire page.
<h1></h1> – like the paragraph tag, this is a heading tag. There are tags for h1-h6.
<strong></strong> – bold
<em></em> – italicize
<span style></span> – span works like div; however, in the world of a WordPress post you will most commonly see it with a “style=” attached. This allows you to use CSS code to apply to the text between the tags, opening up font families, sizes, colors, and a multitude of other presentation options. Bold and italicized text should really also be done this way, though WordPress defaults to using HTML code for that.
<img> – the <img> tag is an empty element; it’s attributes let you link a picture and set certain display qualities about it
<a href> – the <a> tag will be a very common sight in a post; it’s a link tag, and it’s attributes do things like target the link to open in either the same page or a new one.
<html></html>, <head></head>, <body></body> – you will never see these in a WordPress post, but they are the most basic parts of any webpage. The <html> element indicates that all captured text should be interpreted, the <head> element is where CSS style sheets and other metadata about the page is linked in, and the <body> element tells the browser where to begin displaying text. Your post falls within these tags automatically.
For a detailed guide on how each of these tags is utilized, you should reference W3Schools. For an overview of the most common web languages, check out my post from last week. And of course, stay tuned for a brief overview of CSS and how you can use it to achieve the exact look you need in a post.
While WordPress offers a fairly useful set of tools out of the box, HTML and CSS can save you a lot of frustration if used well.
Create a Brand-Yourself.com Account to Manage Your Online Reputation!
Brand-Yourself.com is an award winning toolset that helps you proactively manage your online reputation and promote yourself across the social web. Create an account today to see how we can help you win new opportunities, jobs and clients online. It’s easy and it’s fun!
