pageSUMMARY

A very brief introduction to HTML tags, META tags, Head Content and the code that controls editable template regions.

Getting into HTML Basics

Discover and comprehend the Code, Head Content and Design panes

If you look in the Head Content:

VIEW/HEAD CONTENT

...which can be seen sandwiched between the Code and Design panes (figure 1), you’ll notice that there are now three ‘head items’ showing. If you click on each one, it will highlight the associated code in the Code window. If you were to remove that piece of code, the associated head item would also be deleted. This makes it really easy to see what everything does, and therefore makes it all easier to learn.

Split View in Dreamweaver

Figure 1 - Split View in Dreamweaver shows the Head Content icons

Click on the middle head item and you’ll see that it’s responsible for the <title> of the page. In the Code pane, the title is currently ‘Untitled Document’, a phrase sandwiched between two HTML ‘tags’, <title> and </title>.

Opening and closing tags

This is how HTML works - every element has an ‘opening’ tag and a ‘closing’ tag. The latter is identical to the former, with the addition of a ‘/’ before the word or letters.

For example, <h1>Headline One</h1> is how you would define a main headline.

Every HTML page (we’ll gloss over the encoding information at the top) is enclosed by an <html> </html> tag. Everything that appears on the page or in the background is enclosed by this tag. Everything in the Head Content is enclosed by an <head> </head> tag, and everything on the page appears within the <body> </body> tag.

As a test (working in Split View), click in the Design pane (the currently blank area at the bottom of the document window) and type something in. As you type, you’ll see the corresponding code appear in the Code window.

Once you’ve grasped the basic HTML tag concept, when you look at the Code pane again, there’s very little there that can’t be easily understood. The only potentially confusing items are the ‘TemplateBeginEditable’ lines of code, but even these are fairly self-explanatory.

Basically, these lines of code define which parts of a page created from the template will be editable - and which parts will be un-editable. When you create a new template, two ‘Editable Regions’ are automatically created. The rest you’ll define later on.

Default editable regions are preset for the page title and (some of the) head content for reasons to do with usability and search engine optimisation (SEO).

Why is the title content a default editable region?

The Title is what appears at the top of a browser when you’re visiting a web page online. It should clearly and succinctly describe the content of the page - it’s also what appears as the headline for a result in standard Google search results - so it’s very important to have a different one for every page. This wouldn’t be possible if it wasn’t made an editable region in the template.

Look at the head item in the Head Content pane again. It has a blue line around it. This tells you at a glance that the Title tag is enclosed within an editable region. If you were to move the <title>Untitled Document</title> line above the <!-- TemplateBeginEditable name="doctitle" --> line, it would become uneditable on other pages, clarified by the disappearance of the blue line around its icon in the Head Content pane. Simple, no?

footNOTE

Keywords META Tag
In September 2009, Google announced that they did not use the 'Keywords' META Tag in their ranking decisions. At all. You may decide to leave it out, but as smaller search engines still use it, you might decide to leave it in... your call.

Why is some of the head content an editable region?

By default, the editable head content region is empty - but the region has been put there because you’ll be wanting to add META tags. These consist primarily of a comma-separated list of keywords and/or phrases, and a page description. Originally these were used by search engines to determine what the page was about - but keyword-stuffing and other abuse has lowered the importanced placed on them by search engines, especially Google.

Nevertheless, META Tags need to change from page to page just like the title - because not every page will contain the same content. Google doesn’t like a site to have identical titles or descriptions - it makes it harder to determine what range of topics a website contains - and your website’s search engine rankings could suffer as a result.

Humans suffer too

From a usability perspective, remember you’re actually writing for humans - not browsers, computers or even search engines. If search engine results contain generic, samey titles and descriptions (or even, horror of horrors, ‘Untitled Document’), the page from which they come (no matter how good its actual content might be) won’t get a look-in. Make the META tags different for every page, no matter how dull the job is (and it is quite dull).

For now though, just give the page a title which is generic and promise yourself that you’ll change it on every page as they are created.

So now that you’ve grasped the basics, let move on to some page styling.

HTML Basics - End of Article

Go to previous article | Go to Home Page | Go to next article

Feedback required!