Introduction
This is the second in a three part blog on Cascading Style Sheets, or CSS. In the first part, we saw what CSS is and where and why it is used.
In this part, we shall see what Semantic Markup is, why it is recommended and what enhancements it brings for Web pages.
Basics of Semantic Markup
The closest literal meaning of the word ‘semantic’ is the word ‘meaning’. As applied to Web pages, the term ‘semantic markup’ means using the correct tag to accurately describe the type of content of a Web page.
Before CSS was introduced, designers had limited options to design and present the content of their Web pages, the most common way for which was to use table cells and font tags to create styles. This used to severely limit the presentation techniques for the content.
CSS was introduced to enable designers create a consistent technique to define the style information for Web documents.
Standard tags provided by CSS
- Heading tags
As we had seen in part 1 of this blog, CSS enables Web page designers to separate the content of a page from its presentation. This is done using tags.
Heading tags are the equivalent of the ‘Level 1 heading’ style in any popular word processing program. A majority of the Web pages usually start with a heading tag, followed by several subheading tags (followed by their content) arranged hierarchically.
Except for the Web page’s title (which appears in the browser’s title bar), using heading and subheading tags is highly recommended to organize the page content in a sequential and logical flow. Heading and subheading tags are usually indicated in the Web page’s HTML code as ‘h1’ (for the heading), ‘h2’ (for the section heading), ‘h3’ (for the section subheading) and so on. An example of using heading tags in a sample Web page is shown below.
Using heading tags
- Paragraph tags
Since the content of the page will usually be arranged in paragraphs, a tag is available for this purpose. This tag (<p>, </p>) enables the page designer to arrange the content in paragraphs. A code example followed by its output in a standard browser for the paragraph tag are shown next.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>A Simple Page</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
<style>
h1, h2
{
font-family: sans-serif;
color: #3306FC;
}
</style>
</head>
<body>
<h1>A ‘heading 1’ heading, followed by its paragraph</h1>
<p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
</body>
</html>
Using Paragraph tags
- List tags
List tags, as the name suggests, can be used to create numbered or bulleted lists of items on a Web page. These are amongst the most underutilized tags, since the type and variety of options that they provide are almost limitless. Several options are also available for nesting of lists. This page provides several quick examples of the usage of list tags, with their types and categories.
- Table tags
Tables should preferably be used to display data present in a tabular format, such as in a spreadsheet. Table tags are probably used incorrectly the most, that is, they are used to tabularize data that would be better presented, perhaps as a list. Several good examples of the usage of table tags for the formatting of tables and their cells are presented in this link.
To summarize part two of this blog, we saw how CSS offers us several tools enabling us to display our Web page in the correct and intended manner, while letting us keep the HTML code maintainable.
In the third and concluding part, we shall see how to define style rules, and look at some cross-browser implementation issues.
Related posts:
- Understanding Cascading Style Sheets – Part 3 Introduction This is the concluding part in a three part blog on Cascading Style Sheets, or CSS. In the first part, we saw what CSS is and where and why...
- Understanding Cascading Style Sheets – Part 1 Introduction Cascading Style Sheet, usually used in its abbreviated form as CSS, is a style sheet language designed to enable the separation of a document’s content from the way it...
