Return to simplyFULL - Articles Index
HTML stands for Hypertext Markup Language, but never mind, it's not important.
In this article I will try to explain in the simplest and least technical terms possible what HTML is and how to use it to provide semantic value to the content of your website. I will try to provide the bare minimum amount of information to enable you to update web pages properly. You understand then, there is a lot that I'm not telling you. You can find additional information in the list of links at the bottom of the page.
I will be happy to make any improvements to this explanation that I can. If you find anything confusing or insufficient, please let me know.
This web page is built using essentially raw text, with almost no visual design added to it. Welcome to the good ol' days.
The text that is displayed in a browser (the thing in which you are reading this text, right now) has various display characteristics based on what type of text it is, and the type of text is indicated by HTML tags. This is to say, the content is marked up using tags.
This is tagged as a paragraph, so it has normal text display. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent interdum lorem id arcu. Donec vel ante. Ut vel odio. Donec mattis sapien nec felis.
This is tagged as a blockquote, so it is indented on both sides.
The original purpose of HTML, in the very early days of the internet, was to identify to the browser what type of text was being displayed, so the browser would give the text an appropriate presentation. In recent years search engines have been developed that can also read the HTML tags and rate the content appropriately. That is, a heading-1 that reads “apples and oranges” has more semantic value than a heading-2 or a paragraph that say the exact same thing.
The job of search companies is to locate real content and index it, so they have become adept at avoiding being spoofed. If someone - not yourself - were to tag the entire content of their web page as heading-1, the search engine would recognize that something was not right and probably black list the entire website.
The best way to get a high search engine ranking is to write high-value content. This means a document should have correct outline structure, marked up with correct semantic tags. (A good outline structure also helps you to write content well, and helps your site visitors understand your content well, also.) See the following example.
Maecenas tortor nibh, fermentum vel, scelerisque eu, euismod scelerisque, lorem. Quisque malesuada consequat sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Morbi ultrices adipiscing odio. Cras viverra rhoncus augue. Donec eu orci eu lectus vestibulum aliquet. Suspendisse consequat vulputate massa. Sed nunc felis, molestie non, scelerisque ut, semper ac, nibh. Vivamus luctus orci a felis.
In hac habitasse platea dictumst. Donec vel mauris. Donec laoreet, tortor ut convallis viverra, metus ipsum mattis tortor, et pulvinar risus lacus at dolor. Nunc in neque. Sed tortor arcu, elementum at, varius id, tristique sed, elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Tags are special codes that are placed in front and in back of portions of text. They begin with a less-than symbol (<) and end with a greater-than symbol (>). There is a beginning-tag and usually a similar looking ending-tag. The actual content is between the tags.
<p>This is a paragraph, so indicated by the “p” in the beginning and ending tags. The ending tag has a slash in it.</p>
The list of HTML tags is small anyway, but you only need to know a few of them.
The above list looks like a list because it is marked up as an unordered list. You'll find fuller explanations of lists in the links below.
To see all of this in action, click on “View” in your browser menu, then click on “Page Source” or perhaps “Source”. A new browser window will open up showing you the source code for this page. (If you are using Firefox, as you should be, the source code will be nicely color-coded). In the source window you will see all of this text, neatly wrapped up in HTML codes.
When you update the content of a website, meaning the text and perhaps images, you'll use some sort of an editing package, whether it's your own or provided on-line. There will probably be two editing modes; WYSIWYG (What You See Is What You Get), meaning a visual editor, or an HTML editor. To use the HTML mode you will need to be careful about coding the tags properly. Using the WYSIWIG mode might seem easier, but you can wind up with lots of un-necessary code (called tag soup) in your web page. I usually enter text using the WYSIWIG mode, but then review and correct using the HTML mode.
You'll have to decide what works best for yourself. If you don't have the technical background or the emotional desire to wrestle with the code, then just use the WYSIWYG mode: it will be alright.
These are suggestions, based on standard ideas of best practices. Your web pages will be better if you adhere to these concepts.
It is most likely better to make updates to your pages than not to, so go ahead and do it. However, figure out a way to have a convenient backup of your page. If things get way out of whack, you might need to revert to the previous version. You can always copy the existing code out to a text file and save it somewhere before you begin making changes.
Don't let yourself get freaked out. It's okay if you're not a geek. In the spirit of fun and lightheartedness, remember this quotation, marked up as a blockquote.
“If a thing is worth doing, it is worth doing badly.”
— Gilbert Keith Chesterton