WSG “Site Structure” 1

Steve Spence

Updated: 30 October 2017

2012-2024

Major Sections of Chapter 5

This assignment covers the first two of the chapter's major sections.

Semantic Markup
Site File Structure and Naming
Content Management Systems (CMS)
Search Engine Optimization (SEO)

A quick review

Nesting Russian dolls

<html> 
<head> 
</head> 
<body>
<p> </p>
</body>
</html>

As you learned through the Code Academy exercises, well-formed HTML is structured a lot like Russian dolls. Tags generally are nested within other tags.

The new idea

Nesting Russian dolls

<html> 
<head> 
</head> 
<body>
<p> </p>
</body>
</html>

It's important that the tags go in the right places, but its also important that the right tags be used for the right reasons. In short, "...the most critical concept to understand is semantic markup" (136).

Semantic Markup (136)

HTML markup is considered semantic when standard HTML tags are used to convey meaning and content structure, not simply to make text look a certain way in the browser.

Semantic Markup (138)

In plainer English:

Semantic markup is a fancy term for common-sense HTML usage....Never choose an HTML tag based on how it looks in a web browser.

Semantic Markup, continued

“Semantic” = “Structural” = “Logical” = “Meaningful”

Since "semantic" isn't a common word, people often use other terms to describe the same (proper) use of HTML. All of these terms are intended to communicate the same basic point.

Semantic Markup: one bad and two good examples

<i>Don’t Make Me Think</i>: Is this an emphatic statement, or is it a reference to the book with this title by Steve Krug? The old-fashioned, outdated <i> tag means only "put these words in italic," so browsers and search engines don't know.
<em>Don’t Make Me Think</em>: Browsers and search engines know that the (semantic) <em> tag is used for words and phrases that deserve special emphasis.
<cite>Don’t Make Me Think</cite>: Browsers and search engines know that the (semantic) <cite> tag is used to mark up the titles of books, movies, newspapers, etc.

Semantic Markup, another example

This text below is a screenshot of a separate example page, which you can see by following the link. (The code won't display properly in these slides because they use specialized CSS rules.)

Site File Structure and File Names

Thinking semantically is important for more than just HTML tags. Semantic file and folder names also are important to your readers, to the people maintaining your site, and to search engines like Google.

A good example (from WSG 3rd edition, 130)

This poorly named url contributes nothing to search engine relevance or site structure legibility:

www.whatever.edu/depts1/progs2/org004/bio_424.html

In contrast, anyone (and any search engine) can parse this plain-language content arrangement at a glance:

www.whatever.edu/departments/biology/ornithology/field-ornithology-bio-224.html

Site File Structure and Naming, continued

For pages on a static web site, the page's URL details the actual names and location of the files and folders on the computer where they are stored (i.e. the web server).

For example, take another look at this page's URL:

www.whatever.edu/departments/biology/ornithology/field-ornithology-bio-224.html

Working backwards, the URL shows that this web page is a file called "field-ornithology-bio-224.html," and it is saved in a folder called "ornithology," which is in a folder called "biology," which is in a folder called "departments."

Dynamic web sites work differently, and their native URLs are not semantic. (Amazon's URL's, for example, are not semantic.) But semantic naming is so important that many dynamic web servers allow you to create an alternative, semantic address for every page in your site. Wordpress calls these pretty permalinks.

Also use semantic structure for HTML content containers (WSG 139)

Designers can add labels to particular tags within a document. You also should think semantically when choosing these labels.

For example, the section of our syllabus pages that includes widgets (like the calendar or recent Twitter posts) is contained within a <div></div> tag. This <div> tag is labeled using the class attribute:

<div class="widget-area"> CONTENT GOES HERE </div>

A short-sighted designer might have named this <div> tag "right-hand-column." This is not semantic, since that label communicates where the content is supposed to appear on the page rather than what it is. Instead, the designer chose "widget-area."

This label ("widget-area") is semantic: it identifies what this section is, not where it happens to appear or what it happens to look like.

Among other things, this practice reflects the flexible nature of modern web pages. When you access this page on a phone, for example, this section appears at the bottom of the page instead of on the right.