› Dreamweaver tutorial: Tag hierarchy in Dreamweaver

Dreamweaver tutorial: Tag hierarchy in Dreamweaver

What you’ll learn in this Dreamweaver Tutorial:

  • Tag hierarchy
  • XHTML 1.0 Transitional
  • Understanding the Welcome screen

This tutorial provides you with a foundation for working with Adobe Dreamweaver tag hierarchy. It is the first lesson in the Adobe Dreamweaver CS5 Digital Classroom book. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver Classes.

Adobe Dreamweaver Tutorial: Tag hierarchy in Dreamweaver

HTML tags follow a certain order of weight, or hierarchy, to make sure that everything displays as it should. The tag at the top of the hierarchy is the <html> tag, and every other tag you create is contained within it. Tags such as the <body> tag always hold smaller tags, such as the <p> (paragraph), <img> (image), and <strong> (bold) tags. In addition, structural tags (such as those that create paragraphs, lists, and tables) hold more weight than formatting tags such as <strong> (bold) and <em> (italic). Take this line of code, for example:

<strong><p>Big bold paragraph</p></strong>

Although code such as this may work in certain browsers, it isn’t recommended, because the <strong> tag technically holds less weight than the <p> tag. The following code represents a safer and more proper way to include the bold type:

<p><strong>Big bold paragraph</strong></p>

Dreamweaver generally does a great job of keeping tags properly nested, or contained within each other. When you choose to manipulate the code by hand, you should always keep good coding techniques in mind.

XHTML 1.0 Transitional in Dreamweaver

The latest recommended version of HTML is XHTML 1.0, a stricter version of HTML that makes the language more compatible with newer platforms, such as mobile phones and handheld devices, which require code to be perfectly formed. XHTML combines elements of HTML and XML, a language used to describe data. XML, or Extensible Markup Language, has become a popular method of exchanging information among seemingly unrelated applications, platforms, and systems. By default, Dreamweaver creates new web pages using the XHTML 1.0 Transitional standard.

What’s the difference?

Although tags and attributes remain the same, the structure of the language changes with XHTML, becoming stricter. Whereas HTML was very forgiving of sloppy coding practices such as overlapping or unclosed tags, XHTML requires all tags to be closed and properly nested. HTML doesn’t care which case you use when constructing tags, but in XHTML, all tags must be lowercase.

For example, a <br> (break) tag, which normally doesn’t require a closing tag, now must be closed. You can write tags to self-close by using a forward slash—making sure there is a space between the (br) and the forward slash—and then closing the bracket like so:

<br />

The result is a well-formed language that takes advantage of newer browsers and device platforms, while remaining compatible with older browsers. Working with XHTML in Dreamweaver requires nothing more than selecting XHTML 1.0 Transitional as the Document Type (DocType) when creating a new page.

Explorations in code in Dreamweaver

Although this book occasionally refers to the code for examples, hand-coding is not a primary goal of the included lessons. The best way to learn how code represents the layouts you are building visually is to switch to the Code view and explore what’s happening behind the scenes.

It’s important to remember that every button, panel, and menu in Dreamweaver represents some type of HTML tag, attribute, or value; very rarely will you learn something that is unrelated or proprietary to Dreamweaver alone. Think of the Dreamweaver workspace as a pretty face on the HTML language.

Pages

These tutorials are created by and the team of expert instructors at American Graphics Institute.