Using HTML Editors: Understanding HTML Documents

By Gabriella Sannino

When you first begin using HTML editors and open your first webpage (HTML document), the code may seem daunting. However, HTML is the most basic of web languages; it’s the core language of the Web and not hard to learn. In this article, we’ll cover the basics of HTML and webpage creation when using the text, or coding side, of HTML editors.

Coding With HTML Editors

Many HTML editors provide syntax highlighting, which allows you to easily discern HTML from text, CSS, JavaScript or other language. These HTML editors also show highlighting when a line of code is written correctly [image1] vs. incorrectly [image 2]. When working with code, pay close attention to these clues; one line of incorrect code can turn a beautifully crafted webpage into a blank page. Thankfully, these are quickly corrected errors.

Image 1 – Correct HTML

Image 2 – Incorrect HTML

Basic HTML Principals

Once you understand the basic principles of HTML, the rest becomes much easier to learn.

HTML Tags
HTML is made up of tags, written using the greater than and less than symbols. As well, most tags come in pairs, with a start (opening) tag and end (closing) tag, which look like this:

<tag>expression</tag>

Without the closing tag, and without the “/” in the closing tag, the HTML doesn’t work. Although some tags don’t require a close, these are rare exceptions.

HTML Documents
When opening a new document, many HTML editors will automatically provide the basic layout of a webpage. This document will look similar to this:

Basic HTML Document

Each piece has a particular part to play, an exact order, and can only hold certain information.

HTML DOCTYPE declaration – Although the DOCTYPE declaration isn’t a tag, it is an essential part of your webpage and always the first line of the document. This tells the web browser what version of HTML you’re using and how best to interpret the code. Which version of HTML should you use? As a beginning coder, Transitional HTML is most likely the best choice.
<html> - This is the first tag of a document, which tells the browser “start reading HTML now”. Its closing tag is the final tag of a document, telling the browser that the page is finished. These must be the first and last tags of the webpage.
<head> - The second tag of a document holds the meta-information, or general information, about the webpage. This is the place for scripts, links to design (CSS) files and other information about the page.
<title> - The title tag is required for HTML documents, but it’s also a tag you want to use. Just as it sounds, the title tag shows the title of the page. However, visitors also see the title tag when searching for your site, so it acts as a marketing message and a page title.
<description> - The description tag is also a tag you want to use. It defines the description of your page, and also doubles as a marketing message, much like the <title> tag.
<keywords> - Keywords define the bare bones of what your page is about. For instance, the keywords for this page might be: using HTML editors, HTML documents, HTML code.
<link> - The link tag is used by the browser to reference companion documents, such as your stylesheet (CSS, which defines how your webpage looks).
<body> - This is the only area you put information that you want your visitors to see. The words in this article, for instance, are placed inside the <body> and </body> tags. Were it to be in the <head> area, you wouldn’t be able to see the article.

Tags such as the title, description, keywords and link tags must be contained within the <head></head> area. As well, notice that none of them have a matching close tag. Instead, they use “/” at the end, which is the accepted way of closing these tags.

Inside the HTML Body Tag

As you progress through learning HTML, you’ll find yourself wanting to learn how to create links, different sized fonts and other common HTML events. Some of the most common, and thus most quickly learned, include:

Headings – Headings provide different font sizes, such as those used at the top of a page, section or important paragraph. These are defined with tags that start with “h” and end with a number. The number defines how small or large the font is.

Example: <h1>This is a heading</h1>

Paragraphs – Paragraphs are defined simply by <p> and </p>.

Example: <p>This is a paragraph.</p>

Links – Unlike the link tag used in the header, links in the body are written using <a href=””> and </a>. The “href” is an attribute, which defines where the link is supposed to go when you click on it. The actual address goes between the quotes, while the text you want the user to see goes between the tags.

Example: <a href=”http://mysiteexample.com”>My Site</a>

Images – Image tags are written using <img src=”” width=”” height=”” />. Notice that the closing tag is replaced with the “/” close. Src is short for “source”, which is the address of the image on your server. It’s important to fill out the width and height information, so the image shows in correct dimensions.

Example: <img src=”http://mysiteexample.com/image.jpg” width=”100” height=”100” />

Most HTML tags use letters that match what you want to do. “H” defines “heading”, for example. As well, many HTML editors provide an auto complete feature that automatically provides closing tags.

As you can see, learning to code HTML is sort of like learning a new language; there are a number of rules (and exceptions to every rule), and even “punctuation” guidelines. But once you get down the basics, you’ll be able to code your own webpage, and master more advanced coding techniques. Regardless of your level of HTML expertise, you’ll want to find the right HTML Editor, so check out our comparative reviews. At TopTenREVIEWS We Do the Research So You Don’t Have To.™