Essentially, “semantic markup” means “using the appropriate tag at the relevant time,” and
well-formed semantic markup is an essential aspect of any website. The following is an
example of the wrong way of doing things—relying on font tags to create a heading and
double line breaks (<br /><br />) for separating paragraphs:
<font size="7" color="red" face="Helvetica">Article heading</font>
<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet
å elementum erat. Integer diam mi, venenatis non, cursus a,
å hendrerit at, mi.
<br /><br />
Quisque faucibus lorem eget sapien. In urna sem, vehicula ut, mattis
å et, venenatis at, velit. Ut sodales lacus sed eros.
The likelihood of this displaying consistently across browsers and platforms is low. More
important, the tags used don’t relate to the content. Therefore, if the styling is removed,
there’s no indication regarding what role each element plays within the document structure
and hierarchy—for instance, there would be no visual clues as to the importance of
the heading. Also, the use of double line breaks (<br /><br />) instead of paragraph tags
means the “paragraphs” cannot be styled in CSS, because there’s nothing to inform the
web browser what the content actually is.
Instead, the example should be marked up like this:
<h1>Article heading</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed-> aliquet elementum erat. Integer diam mi, venenatis non, cursus -> a, hendrerit at, mi.</p>
<p>Quisque faucibus lorem eget sapien. In urna sem, vehicula ut,-> mattis et, venenatis at, velit. Ut sodales lacus sed eros.</p>
Here, the heading is marked up with the relevant tags, and paragraph elements are used
instead of double line breaks. This means the page’s structural integrity is ensured, and the
markup is logical and semantic. If attached CSS styles are removed, the default formatting
still makes obvious to the end user the importance of the headings, and will visually display
them as such.
In this section, we’ll look at how to mark up paragraphs and headings, explore logical and
physical styles, and discuss the importance of well-formed semantic markup.
well-formed semantic markup is an essential aspect of any website. The following is an
example of the wrong way of doing things—relying on font tags to create a heading and
double line breaks (<br /><br />) for separating paragraphs:
<font size="7" color="red" face="Helvetica">Article heading</font>
<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet
å elementum erat. Integer diam mi, venenatis non, cursus a,
å hendrerit at, mi.
<br /><br />
Quisque faucibus lorem eget sapien. In urna sem, vehicula ut, mattis
å et, venenatis at, velit. Ut sodales lacus sed eros.
The likelihood of this displaying consistently across browsers and platforms is low. More
important, the tags used don’t relate to the content. Therefore, if the styling is removed,
there’s no indication regarding what role each element plays within the document structure
and hierarchy—for instance, there would be no visual clues as to the importance of
the heading. Also, the use of double line breaks (<br /><br />) instead of paragraph tags
means the “paragraphs” cannot be styled in CSS, because there’s nothing to inform the
web browser what the content actually is.
Instead, the example should be marked up like this:
<h1>Article heading</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed-> aliquet elementum erat. Integer diam mi, venenatis non, cursus -> a, hendrerit at, mi.</p>
<p>Quisque faucibus lorem eget sapien. In urna sem, vehicula ut,-> mattis et, venenatis at, velit. Ut sodales lacus sed eros.</p>
Here, the heading is marked up with the relevant tags, and paragraph elements are used
instead of double line breaks. This means the page’s structural integrity is ensured, and the
markup is logical and semantic. If attached CSS styles are removed, the default formatting
still makes obvious to the end user the importance of the headings, and will visually display
them as such.
In this section, we’ll look at how to mark up paragraphs and headings, explore logical and
physical styles, and discuss the importance of well-formed semantic markup.
No comments:
Post a Comment