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.