Interactive Media: What is semantic markup?

Semantic markup is really pretty basic to understand, and should really be used intuitively, without needing a definition. But if we needed to give it one, we might say that semantic markup is giving the different elements in an HTML document a markup that most closely matches the meaning of those elements. For example, if you were marking up an HTML document for a newspaper article, you would want to be sure that the headline of that article gets an <h1> tag. Because it is the most prominent aspect of the document, it should be the first to grab the reader's attention, and therefore the largest. Next in order of significance, you might want to call attention to the byline, and so on and so forth as you describe and give importance to the various aspects of the document. 

Semantic markup makes sense not only for hierarchy, however, but it also makes the document easier to read, and creates a "nesting" of elements that will make it easier and more streamlined to add CSS to later. Additionally, it makes it easier to find and make mistakes if the document is semantically marked up and allows other web developers to share work on a document more easily and efficiently. 

.

.

.

Unlike semantic markup, "class" vs. "id" attributes can be somewhat confusing. The most important thing to remember, is that you can only use one "id" name per HTML document. Think of it as something identifying where you are at any one given moment. If that map is an HTML document and the "id" attribute tells you where you are, then it only makes sense that (unless you have superhero powers) you can only be at one place at a time on a map. The "class" attribute, on the other hand, works a little bit differently in that you can use them multiple times in an HTML document as well as multiple times on an element in an HTML document. Therefore, you can apply style rules to multiple elements with the "class" attribute, unlike the "id" attribute. This may or may not make your life easier depending on what you want to do with a particular element. It is also important to note that there can be both "class" and "id" attributes in the same HTML document. 

Interactive Media: Web vs. Internet

Although the words "internet" and "world wide web" or "web" for short get tossed around as if they are one and the same, each has a particular function that is best described by saying that the web is an aspect of the internet. Where the internet allows files, documents, etc. to be shared between computers in a community type environment, the web is one channel that allows information to pass between computers.  The web uses hypertext links to transfer various bits of information across the internet, and thus has its own special language to do so. This is called HTML, or hypertext markup language. Thus, in short, the internet can exist without the web, but the web could never exist without the internet; the web is one aspect of the capabilities of the internet. 

.

.

.

After looking at the Happy Cog website, one can begin to identify the HTML components of the page. While the overall design of the website is handled by the CSS aspect of the design, the structural elements of the page are handled by the HTML.  Five of these components are:

1) The Happy Cog logo, which is a graphic element linked into the document. 

2) The title of the page, "We are Happy Cog," which is likely handled with an <h1> tag. 

3) The paragraph that describes the Zappos article, which is handled with a <p> tag.

4) The Facebook and Twitter buttons at the bottom of the homepage are handled by <href> tags that link the text to a specific webpage. 

5) The bolded words in the paragraphs that say "read more" have more emphasis that is handled by an HTML tag that tells readers to click that particular word or group of words for more information or access to a link to a full article.