Everyone with their own website should know some HTML basics. That includes the most technophobic writer who just uses the visual content editor portion of their WordPress dashboard.
And if you are customizing any themes for the Genesis framework, then you absolutely need to know a little bit about HTML and how to make changes to the code on your site.
HTML is the most basic code that presents every website. It is the language of the internet. It the code our web browsers interpret to display everything we look at on the web.
No matter what underlying technology the platform powering a website uses – PHP, Javascript, Ruby on Rails, Dot-Net, Pearl, Python, Rails, C#, MySQL, ASP, etc. – at the end of the day they all pretty much generate or manipulate HTML in some form to present a website.
Therefore having a basic understanding of HTML and how to quickly make minor changes in it is very powerful and increases your ability to offer the best presentation of your website, no matter what level you aspire to work on the internet. These basic concepts will help you make your website stand out from the crowd.
Basic HTML Verbiage
Like all things good and geeky, HTML is an acronym. It stands for HyperText Markup Language. That makes sense when you consider that the web is powered by the hypertext transfer protocol (hence the http:// at the beginning of web addresses.) “Hypertext” is the stuff websites are made of.
The basic HTML element is a tag, which in its simplest form consists of a less than sign, a little bit of text designating what the tag is, followed by a greater than sign like this: <html> Tags can often have additional stuff in there too for more control over those website elements.
There are two main varieties of HTML tags. Many tags come in pairs. There will be an opening tag and a corresponding closing tag. For example here are the opening and closing tags for a paragraph <p></p>
Notice that the closing tag has a slash after the less than sign. That slash tells the web browser to close the tag.
The reason why many tags come in pairs is because there can be stuff in between the tags. Let’s face it, a pagragraph of nothing is pretty boring. So usually you’ll see something more like this:
<p>My paragraph of text goes here. Look at me! I’m coding!</p>
Of course, just to keep things interesting, some HTML tags are self-closing tags. You can think of them as self-contained units with nothing but code in the middle. Because they don’t span other content they have the closing portion at the end of the single tag.
For example, if you want to drop your text down to the next line, but you don’t want a whole new paragraph, then you can use a break tag: <br /> Because the break doesn’t have to span any content, it just happens at one point, it’s a self-closing tag.
The image tag is probably the self-closing tag you will use the most running content on your website. As an example of an image tag, here’s the one that’s displaying the Genesis Best Practices image at the top of this post:
<img alt=”GENESIS BEST PRACTICES” src=”/wp-content/uploads/2013/06/GENESIS-BEST-PRACTICES.jpg” width=”207″ height=”191″ />
You’ll notice that the image tag has several properties inside it. Obviously if you edit these properties you can change how the image is displayed.
Basic HTML Document
Here is the basic code for a rudimentary HTML document with all the required pieces:
<!DOCTYPE html>
<html>
<head>
<title>Title of document goes here</title>
</head><body>
Hello world! I’m a web page. Visible text goes here…
</body>
</html>
No matter how simple or how complex, pretty much every stand alone web page will have all of those elements in there somewhere.
- Here is a good reference for a basic list of HTML tags.
- This is a full list of HTML5 compliant tags. (I’ll address HTML5 here in a moment.)
Nesting Tags
Even if you’ve never played with Lego’s as a kid, you are probably familiar with the little multicolored interlocking bricks. You can build something with legos, like say a house, and then take the bricks apart and build something completely different, like say an airplane.
Even though you can build radically different things with Lego’s you still use the same basic components – the blocks. Those blocks come in a huge variety of sizes, yet they still all interlock with one another to allow you to build whatever your creativity can come up with.
HTML tags are like those interlocking Lego bricks. They are the fundamental building blocks of a website. Instead of interlocking them, you nest them inside one another to build out the website presentation.
So inside your paragraph tag you might also have tags to do things like add an image, mark text with bold or italics, or hyperlink somewhere else on the web.
The key is to think about your HTML tags in the same way your algebra teacher wanted you to keep track of your brackets in equations. You generally want to keep them nested inside one another rather than opening and closing your tags in a hodgepodge fashion.
You can see some very unexpected results when you have several opening tags in a row that don’t get closed in the opposite order to keep them nested neatly.
Classes and ID’s
Another thing you will quickly notice when you view the source code of a web page in your browser is that many of the HTML tags will contain classes and ID’s. You will see things like class=”entry-title” or id=”content” inside many of the tags.
These classes and ID’s are added so that our CSS style sheets can target specific elements on the page and apply different styles to each.
The next post in this series will delve into how CSS works. But for now just know that these HTML items are called CSS selectors and when combined with a CSS style sheet become an incredibly powerful combination which do the overwhelming majority of the heavy lifting when it comes to presenting a website.
HTML5
The last thing I want to bring up in this basic HTML discussion is a little bit about HTML5 because there are a few things you should know about it.
HTML5 is simply the next standard of HTML that is being widely adopted on the web. This new standard appears to be the way everything is heading on the web for a number of reasons.
One of those reasons is that HTML5 allows developers to do many things with straight HTML that previously had to be accomplished with other technologies like Flash, Javascript and the like. If you look at the link I posted above you can see that HTML5 adds about 30 or so new tags for us to use to display content.
These additional tags give developers more control and organize web pages in a more clearly standardized and structured way. Prior to HTML5 we pretty much had to use the <div> tag for every content area and use classes and ID’s to differentiate them. HTML5 adds tags like <header> <nav> <article> <aside> and <footer> which will make our lives much easier because we can style these tags directly via CSS, needing fewer classes and ID’s. Plus, these additional tags standardize things across the web, making things better for everyone.
So from a very basic perspective, while the underlying principles of HTML5 are pretty much the same as the previous iterations of HTML, the actual implementation can be very different that previous ways of doing things with websites.
Because the internet is moving towards HTML5 across the board, it is very important that you use the latest version available of your preferred web browser. The major browsers are rapidly coming up to speed with the latest versions of Chrome, FireFox, Safari, and yes, even Internet Explorer (from versions 10 and up) supporting all, or nearly all. of the major HTML5 capabilities. Here’s a good interactive graphic chart that shows browser support for many of the new HTML5 features.
If your main web browser doesn’t support the latest HTML5 features {*cough* Internet Explorer 7, 8 & 9 *cough*} then you should seriously consider using an alternative. Otherwise more and more of the internet is going to be “broken” for you because your browser simply doesn’t support what the websites are presenting.
Here at Web Savvy Marketing we are committed to moving forward with HTML5 in all of our development projects. In fact we are already in the process of converting our WordPress themes to HTML5 to ensure they will continue to offer the best technology available to our customers.
This is the fifth in our series of articles on Best Practices for Genesis Theme Customization.
Thank you so so much for really nice series. I’m newbie in Genesis and your series help me very much. Now i can learn Genesis easily. Thank you so much 🙂
Good basic info on HTML 5. Cheers!
This is what I really want, thanks for sharing beasics of Genesis framework, I’ve started playing with Genesis framework few days back.
Thanks Chris for valuable information.I am planning to shift to Genesis Framework and your tuts are quite brief.