HTML is an immense topic, so in this post I’m going to focus on the basics of html and what bloggers need to know in order to effectively edit their HTML blog code and run their site effectively.
Using HTML appropriately is important not only for your users, but also for how your website will be read by other computers, including search engines, so using html correctly can help with your SEO Optimization.
While this is by no means a complete tutorial, I hope the information helps clarify some of the myths and misunderstandings about html, as well as provide you with a practical list of tags that you can and should start incorporating into your blog.
What is HTML?
HTML stands for hypertext markup language. It is a language used to organize data within a page. This does not have to be a webpage. Originally the language was developed by researchers as a method of organizing and presenting information on internal networks. In the 90s, however, HTML became the standard markup language used across the web, which is why we usually associate HTML only with web pages.
HTML is NOT Styling
HTML has (almost) nothing to do with a page’s appearance. A page’s look, also known as styling, is done by CSS, another widely used programming language.
HTML changes affect the appearance of the page only because other styling information is included in the page. Generally, this includes things like: a header tag makes text larger and thicker than a paragraph tag. There are some basic black and white style attributes built into html, but these are usually overriden by CSS.
From a blogger’s perspective, the CSS is taken care of for you by the theme you select, so it’s more important to know the HTML basics than how to manipulate the CSS on your site.
Introduction to HTML
HTML consists of a series of tags that represent different types of information on the page. The term “tags” refers to a set of of opening and closing brackets used in conjunction with a command. The opening tag contains the letter or command, while the closing tag contains a backslash before the command.
For example, “p” stands for paragraph, and is a very common tag. An implementation would look like:
<p>This is text in a paragraph</p>
While the computer reads this command, using the opening and closing HTML tags to understand where the paragraph begins and ends, the user will simply see the text inside the tag: “This is a paragraph” displayed in plain text on the screen.
Tags are extremely important because they mark the hierarchy of data on the page, which will be read by (among other things) search engines, and are thus used to help determine what type of information gains precedence on any given page.
Tags can also contain further information, called attributes. For example, consider the link tag:
<a href=”www.example.com”>Link</a>
The tag “a” defines the tag as a link, but the attribute “href=” is needed to indicate where the link goes. Other common attributes include type, class, and src attributes.
Common HTML Blog Code
The following is a list of common HTML tags you should be familiar with as a blogger.
- <h1></h1> This is an example header tag. HTML supports h1 through h6 for header hierarchy.
- <p></p> This is a paragraph, or text tag.
- <div></div> Div tags are used to indicate blocks of related tags on a page. For instance, all the information in a column might be enclosed in a div.
- <ol></ol> Ordered list. This list will provide numbered elements.
- <ul></ul> Unordered list. This list will provide bulleted elements.
- <li></li> List item. This indicates one element enclosed within either of the two list-types above.
- <a></a> Link, used to hyperlink text.
- <img> This indicates an image. This tag is unique in that no closing tag is necessary.
- <em></em> Emphasis. Used to italicize text.
- <strong></strong> Used to bold text.
I hope this introduction to html helps you identify which elements of your html blog code are working for you, as well as helps you make decisions about placing markup on your page. Please note that in this post I’ve only considered tags that you’re likely to use editing the main portion of a blog, and not the entire html structure of a page, which is completed automatically by most blog engines.
For a more complete list of tags, W3 Schools has a great reference list. If you’re completely new to the world of HTML, I also strongly recommend considering a basic course, which will improve your content, structure, and appearance of your website. CodeSchool is by far my favorite resource for anyone new to HTML/CSS.