<html>

Topic:

The two columns below have the same text but differ slightly in code and layout. This shows difference between using tags to structure your document and using tags to achieve a visual layout. This distinction becomes very important later in the course.

<p> tags versus <br> tags:

The column on the left uses the <p> tag to begin and end each paragraph. Whenever you use the <p> tag, it will create a space after the paragraph.

The column on the right uses the <br> tag to begin each paragraph. This may not be useful between paragraphs, but sometimes you will want to use the <br> when you do not want a space between two lines of text.

<h> tags versus font size tags:

The column on the left side of the page uses <h> tags to create the bold headers at the beginning of each section. The column on the right uses a combination of font size tag and <b> tag to create the same effect. Notice that whenever you use an <h> tag a space is inserted afterward. Designers use the font size and bold so that they can avoid that space for a tighter look on page layout.

What does it matter?

The <h> tags are part of the structural design of html. This means that search engines, indexing robots and screen readers that read web pages out loud for the visually impaired all understand <h> tags as headers announcing topics. Computers that read html expect <h1> to designate the main title, <h2> to designate the next subdivision, such as a chapter, and so forth. Some search engines and indexing robots look for the <h> tags, just as they look at your <meta> tags. When you use a larger font size with <b> you only change the visual layout of the page. The structural cues to other browsers will be missing. Structure also becomes crucial for using style sheets and moving on to dhtml.

<p> tags versus <br> tags:
The column on the left uses the <p> tag to begin each paragraph. Whenever you use the <p> tag, it will create a space after the paragraph.
The column on the right uses the <br> tag to begin and end each paragraph. This may not be useful between paragraphs, but sometimes you will want to use the <br> when you do not want a space between two lines of text.

<h> tags versus font size tags:
The column on the left side of the page uses <h> tags to create the bold headers at the beginning of each section. The column on the right uses a combination of font size tag and <b> tag to create the same effect. Notice that whenever you use an <h> tag a space is inserted afterward. Designers use the font size and <b> so that they can avoid that space for a tighter look on page layout.

Why does it matter?
The <h> tags are part of the structural design of html. This means that search engines, indexing robots and screen readers that read web pages out loud for the visually impaired all understand <h> tags as headers announcing topics. Computers that read html expect <h1> to designate the main title, <h2> to designate the next subdivision, such as a chapter, and so forth. Some search engines and indexing robots look for the <h> tags, just as they look at your <meta> tags. When you use a larger font size with <b> you only change the visual layout of the page. The structural cues to other browsers will be missing. Structure also becomes crucial for using style sheets and moving on to dhtml.

You may find it useful to compare the html code for these two columns:

You can go to View>Page Source if you want to see the full code. However, the significant differences are highlighted below in the bright green type, using the last paragraph for an example.

<h3>Why does it matter?</h3>

<p>The <h> tags are part of the structural design of html. This means that search engines, indexing robots, text-based browsers, and screen readers that read web pages out loud for the visually impaired all understand <h> tags as headers announcing topics. Computers that read html expect <h1> to designate the main title, <h2> to designate the next subdivision, such as a chapter, and so forth. Some search engines and indexing robots look for the <h> tags, just as they look at your <meta> tags. When you use a larger font size with <b> you only change the visual layout of the page. The structural cues to other browsers will be missing. Structure also becomes crucial for using style sheets and moving on to dhtml.</p>

<p><font size="4"><b>Why does it matter?</b></font></br>
The <h> tags are part of the structural design of html. This means that search engines, indexing robots and screen readers that read web pages out loud for the visually impaired all understand <h> tags as headers announcing topics. Computers that read html expect <h1> to designate the main title, <h2> to designate the next subdivision, such as a chapter, and so forth. Some search engines and indexing robots look for the <h> tags, just as they look at your <meta> tags. When you use a larger font size with <b> you only change the visual layout of the page. The structural cues to other browsers will be missing. Structure also becomes crucial for using style sheets and moving on to dhtml.</p>

Other comment notes for this unit:
bold or strong | lists