DEV Community: Tom Streeter

HTML Markup: Tag, You're It

Tom Streeter — Tue, 18 Aug 2020 18:07:25 +0000

Overview

The element is the fundamental building block of an HTML document. The purpose of the HTML element is to provide semantic meaning to content of the page.

A headline isn't a headline because of how big it is or its typeface. It's a headline because someone has decided that its purpose on the page is to be a short introduction of what follows. Thus, the beginning and and end of the most important headline on a page is marked by opening and closing <h1>...</h1> tags.

A paragraph is a set of sentences that are somehow related. It may be visually set apart using line-spacing or indentation, or even making the very first letter larger. Spacings or indentations have nothing to do with whether or not something is a paragraph, though. The formatting is only there to cognitively tip you off that this group of sentences needs to be thought of as being interrelated somehow. A paragraph may be formatted, but formatting does not make something a paragraph. In HTML, what makes a paragraph a paragraph is the opening and closing <p>...</p> tags.

Semantics refers to how the structure of some thing can provide meaning beyond what the content of the thing itself literally says. HTML is used to define the structure of a document by delimiting its content with HTML elements in order to functionally label the various parts.

Syntax

Most HTML elements takes this general form:

<name attribute="value">This is the element's content.</name>

Things to note:

Elements are delimited by two tags: the opening tag (e.g. <name> ) and the closing tag (e.g. </name> ) . Closing tags contain a / character followed by the name of the element being closed.
An open tag can contain more than one attribute, but it isn't required to have any. Some tags that don't have attributes with values serve no purpose, though. For example, an <a> (anchor) tag with no attributes is valid ... but kind of pointless.
Most attributes require a value be given, but there are rare exceptions.
The closing tag never contains attributes or values.
The element is everything from the beginning of the open tag to the end of the closing tag. So saying "the blockquote element" means "everything from <blockquote> to </blockquote> including the words that come between them." Those words in-between the tags are the element's content.
Elements can contain other elements as content. An element cannot start inside another element and then end outside it. It also cannot start outside another element and then end inside it.
An element that contains another element is called a parent element. An element that's entirely inside another element is called a child element. An element that's both inside and outside of another element is called a mistake. It's like your dog: in or out, buddy. Not both.
Whitespace generally doesn't matter in the element's content. Multiple spaces between words in the element's content are collapsed to a single space. Linefeeds and newlines are ignored entirely. There is an element with the name pre (<pre> ... </pre>) that preserves all whitespace and linefeeds in the content as written.
Elements that are unknown to a browser are simply ignored without error. In this way they are much like students. Don't understand something? Ignore it and act as if it doesn't exist!
Not all values of attributes require quotation marks, but most do so they are properly interpreted by accessibility software. Since it is always OK to surround values with quotes, it is considered a best practice to just surround all values with quotes no matter what.
An attribute can have multiple values. Values may be separated by commas, semi-colons, or spaces depending on the attribute. The delimiter you choose from memory will usually be wrong. Them's the rules.

While the vast majority of elements require both opening and closing tags, there are a few that don't require closing tags. These are formally referred to as replaced elements. This means that that the tag will be replaced entirely by content from outside the HTML document. Examples of this kind of element includes the br, hr, img, embed, video, and iframe elements.

Replaced elements are informally referred to as "self-closing" elements. Other self-closing elements can be found within the head element of an HTML document. These are not replaced elements since they aren't intended to be visible to the page's readers.

Most replaced, or self-closing, elements have multiple attributes. In the following img element, there are two attributes, src and alt.

<img src="foo.png" alt="An image of a foo">

The src attribute takes a value that defines where the source of the image may be found. It is written in the form of a URL (Uniform Resource Locator) and may be either absolute or relative in form. These concepts will be covered in more detail than you ever wanted in another post in this series.

The alt attribute's value is a textual label describing what the image depicts. This value may or may not be displayed by the browser if something prevents the image from being displayed.

Since everything necessary to display the image is present in this tag and there is no need for content within the element itself, no closing tag is necessary. Any closing tag would simply be ignored because that's what a browser always does when it doesn't understand something.

A version of HTML called XHTML required that replaced elements end with the characters /> (e.g. <br /> or <hr />. The current HTML 5 standard doesn't require this because it annoyed everyone. There are some among us who got used to doing it, so it's not considered wrong -- just unnecessary. Like Kardashians.

HTML Element Categories

HTML elements can be categorized by the function they serve. The following is a list of the most important categories with links to a comprehensive list of the elements that comprise them. The list is found on the Mozilla Developer Network (MDN)

Main Root: The single from which all others in an HTML document descend.
Document Metadata: Elements that describe information about a page, not the information that appears on a page.
Sectioning Root: The single element from which all visible content in an HTML document descends.
Content Sectioning: The elements that logically structure the overall HTML document.
Text Content: Elements that define the semantic role of discrete content blocks.
Inline Text Semantics: These semantic elements classify arbitrary chunks of text within a block.
Image and Multimedia: These are elements that embed images, audio, and video content within HTML pages
Embedded Content: Other types of non-HTML content that can be displayed within the context of a web page are marked with these elements.
Scripting: Elements that allow for including code that allows the user to interact with the page's content to perform tasks.
Table content: Elements that allows data to be organized in a tabular manner.
Forms: Elements that allow users to enter information to be processed by the web server through a variety of means.
Interactive elements: Elements used to create inteactive user interfaces.
Obsolete and Deprecated Elements: These are elements that should not be used. Ever. Really. Not ever. Even if you really, really, really want to. Even if you found some code that uses it and it makes your page look the way you want it to.

No one memorizes all of these elements. Some become familiar through repeated usage. All share some attributes, some have unique attributes. No one remembers them all. That's why there are online references like MDN. Lists like this can assist in determining where to find an element that fulfills a particular kind of role.

Semantics: Meaning from Markup

Tom Streeter — Wed, 12 Aug 2020 17:20:29 +0000

The Power of Patterns

Thinking is hard. It takes effort. It takes energy. It takes time. Many species have developed the ability to recognize patterns to minimize the effort required to accomplish tasks. What humans can do that many other species can't is extend this ability to abstract symbols.

This figure illustrates what recognizing patterns can do. We really don't need to read every letter in order to understand what's being communicated as long as we understand the patterns that words in our language typically employ. Your mind can "fill in the blanks" because it knows when vowels usually show up in words and you can insert letters "on the fly" to make reasonable guesses as to what the groups of letters mean.

This can only work if you have an intuitive understanding of the language being used. Indeed, being able to identify that something is something based only on patterns you recognize isn't a bad working definition of the word "intuitive." When someone says they can read a language but can't speak it, that usually means they've begun to pick up the patterns. It's not a small thing.

You know that HTML stands for Hyper Text Markup Language and that individual HTML elements follow patterns we refer to as syntax. The syntax of HTML elements are so well-defined that your text editor will typically color-code their different parts so they're easier to understand at a glance.

Markup Provides Structure

You also know that HTML elements can be grouped in particular ways to give HTML documents their overall structure. You can think about individual HTML elements as containers when they're used this way.

This is the basic structure of every web page ever written. There's nothing accidental about it. Each element means something to the browser.

The <html> element is the container within which the HTML document is held. The <head> element contains meta elements. These elements are not part of the page's visible content, it's information about the page's content that only the browser needs to know. The <title> element is meta information. It's not part of the page's content. It's information about the page that's there for the benefit of the web browser. Think of it this way: Some of my students would call me "Dr. Streeter." That's incorrect, as it turns out. I never finished my Ph.D., so it's really not appropriate to call me that. It's a title; It's not my name. It's an arbitrary label (albeit one that's hard to get and I didn't). The text of every HTML <title> element could legitimately be just A Page. It'd be accurate, but not very helpful.

(Don't do this.)

(Really.)

I don't know how the word "title" was chosen. It would have been just as accurate to use the word "label" or "identity." It is <title>, though, but it's only a "title" as far as the web browser is concerned.

The <body> element, on the other hand, is the container for the content meant to be seen by people. It's why the page exists. The <head> element contains a series of elements that are meant to be understood by web browsers. The stuff inside the <body> element are read by computer programs called web browsers (or User Agents if you really want to show off) that are reading the HTML documents for people.

That last part is crucial. HTML is read by machines, not people. People are meant to see the output of what a browser interprets from what's in the HTML document.

The reason tools like Codepen.io exist is that the <html> and <head> elements are really more boilerplate than anything else. Yes, they're important, but it's not the part of the web page we (as humans) spend the most time on (if we're doing it right). The part of the page we really care about is inside the <body>. When you use a tool like Codepen, you're able to just work with HTML markup fragments as if you were writing them in the body of a full HTML document -- but without having to actually write a whole document and stick it on a server somewhere.

We want to be able to do that because the HTML elements that appear within the <body> element take this idea of structuring content to a whole other level. To understand the importance of this, it's worth taking a little side trip to think about we really use words.

Structure Provides Meaning

Consider the following text:

ea efflorescere quo malis occaecat veniam exquisitaque instituendarum voluptate exquisitaque anim tempor quis fabulas dolor senserit relinqueret ne esse admodum singulis nam vidisse ab exercitation elit voluptatibus irure sunt familiaritatem o quae probant consectetur ullamco offendit voluptate ab eiusmod ita voluptate sempiternum exercitation do ea vidisse offendit adipisicing familiaritatem cupidatat multos hic quis adipisicing singulis laboris quid enim fugiat incurreret sint tractavissent deserunt admodum nisi deserunt comprehenderit est se iis tractavissent quamquam culpa tempor elit

There is no way to know what this is. The words are a kind-of-sort-of-Latin called lorem ipsum text that's commonly used as dummy text when mocking up all kinds of print and electronic documents.

In this example there are no capital letters. There are no sentences. We don't know what's supposed to be what. Could be a cookie recipe. Could be a ransom note (has anyone seen my cat?) Since the words are essentially nonsense, the only way we're going to get any clue about what this is is from the structure of the words in relation to one another.

Let's add capital letters and some punctuation:

Ea efflorescere quo malis. Occaecat veniam exquisitaque instituendarum voluptate. Exquisitaque anim tempor quis, fabulas dolor senserit. Relinqueret ne esse admodum singulis nam vidisse ab exercitation elit voluptatibus. Irure sunt familiaritatem o quae probant consectetur ullamco offendit. Voluptate ab eiusmod ita voluptate sempiternum exercitation do ea vidisse offendit. Adipisicing familiaritatem cupidatat multos hic quis adipisicing singulis. Laboris quid enim fugiat incurreret sint tractavissent deserunt. Admodum nisi deserunt comprehenderit est. Se iis tractavissent quamquam culpa tempor elit.

Same letters and spaces, but now, at least, we can see what's supposed to be a sentence. Sure, the words still don't mean anything to us, but at least we can recognize a basic structure. We know it's (probably) not just a list of words.

Let's add a bit more structure:

Ea Efflorescere Quo Malis

Occaecat veniam exquisitaque instituendarum voluptate. Exquisitaque anim tempor quis, fabulas dolor senserit. Relinqueret ne esse admodum singulis nam vidisse ab exercitation elit voluptatibus. Irure sunt familiaritatem o quae probant consectetur ullamco offendit.

Voluptate ab eiusmod ita voluptate sempiternum exercitation do ea vidisse offendit.

Adipisicing familiaritatem cupidatat multos hic quis adipisicing singulis.

Laboris quid enim fugiat incurreret sint tractavissent deserunt.

Admodum nisi deserunt comprehenderit est. Se iis tractavissent quamquam culpa tempor elit.

Now we're getting somewhere! Without knowing a single thing about what any of the words mean, you might be able to make a reasonable guess as to what's going on. You won't be able to translate it, but just the form of the words communicate something.

What different interpretation would you make if you saw this instead?

Ea Efflorescere Quo Malis

Occaecat veniam exquisitaque instituendarum voluptate. Exquisitaque anim tempor quis, fabulas dolor senserit. Relinqueret ne esse admodum singulis nam vidisse ab exercitation elit voluptatibus. Irure sunt familiaritatem o quae probant consectetur ullamco offendit.

Voluptate ab eiusmod ita voluptate sempiternum exercitation do ea vidisse offendit.

Adipisicing familiaritatem cupidatat multos hic quis adipisicing singulis.

Laboris quid enim fugiat incurreret sint tractavissent deserunt.

Admodum nisi deserunt comprehenderit est. Se iis tractavissent quamquam culpa tempor elit.

See what changed? Why would you choose to use a numbered list instead of a bulleted list? Does your guess about what these words mean change because of the way the items are presented?

Semantics Are Meanings Communicated Through Structure Defined By Markup

I hope you can see that the structure of the words -- the way they are arranged in relationship to one another -- suggests what the words themselves might mean. We know some structure has been imposed because the appearance of some of the words have changed in recognizable ways.

How does HTML markup make this happen? Let's look at the markup and see:

<h4>Ea efflorescere quo malis</h4>

<p>Occaecat veniam exquisitaque instituendarum voluptate.
Exquisitaque anim tempor quis, fabulas dolor senserit. Relinqueret
ne esse admodum singulis nam vidisse ab exercitation elit
voluptatibus. Irure sunt familiaritatem o quae probant consectetur
ullamco offendit.</p>

<ol>
    <li>  Voluptate ab eiusmod ita voluptate sempiternum
exercitation do ea vidisse offendit.</li>
    <li> Adipisicing familiaritatem cupidatat multos hic quis
adipisicing singulis.</li>
    <li> Laboris quid enim fugiat incurreret sint tractavissent
deserunt.</li>
</ol>

<p>Admodum nisi deserunt comprehenderit est. Se iis tractavissent
quamquam culpa tempor elit.</p>

Let's break down what we see — and don't see:

The first four words are a heading. In the context of this HTML page, this heading is a fourth-level heading. That means that somewhere else in this document, there are first, second, and third-level headings. The beginning and the ending of the heading are marked by the <h4> and </h4> tags. It says nothing about what a fourth-level heading should look like. CSS dictates that, not the HTML.
There is a block of text surrounded by the elements <p> and </p> that sets it off as a paragraph. It's literally the use of those tags that means the content should be considered a paragraph. In this case paragraphs happen to have an extra line before and after them and no indentation of the first line. That's only because the CSS is set up that way. All the HTML does is say "this is a paragraph." If the CSS defined indentations and no extra lines, the same markup would work just as well.
Three sentences form a list in which their order matters. We know the order matters because they're displayed in numerical order, but those numbers could just as easily be letters, roman numerals, or even spelled out as words. The <ol> and </ol> group the items on that list. Individual list items are defined by <li> and </li> tags. If the order of the sentences didn't matter, bullet points would be more appropriate and unordered list (<ul> and </ul>) tags would be used.

List items must be surrounded by either ordered list tags or unordered list tags so the item "knows" what kind of marker to add. If you knew nothing about HTML you'd never know that this was a numbered list. And it doesn't have to be numbered as I pointed out in the description. "Ordered" and "unordered" is all the HTML defines. How those concepts manifest themselves are up to CSS.
The last two sentences are marked off as a final paragraph with our old pals <p> and </p>.

Documents can have further internal structures that aren't necessarily visible to the eye, but still have meanings that matter. The figure above is the structure of the web page where the text of this blog post originated. See where there's a <section> element with an id attribute with the value semantics? That could just as easily say "You are Here."

Except that would be stupid.

Which doesn't mean I wouldn't do it.

It just means I didn't think of it before I grabbed the screenshot.

Look at all those other tags. Now look at the page you're reading.

You should be able to find that level-3 heading since it's up there at the top of the page. What about the rest of them? What does a <header> look like? What about a <nav>? What the heck is a <div> and why would it have an id with a value of "wrapper"? What's the deal with all those <section>s?

Many of those tags have names that are descriptive of what kind of region they are meant to define. They mean something. When content is ascribed particular meaning through the use of particular markup tags, it's referred to as semantic markup.

Semantic markup provides meaning. It doesn't define appearance.

Understanding this is what separates people who understand what they are doing when they markup a document from people who just cut-and-paste tags on a page and hope they work.

If you want to know specifically what those tags you see mean, you can look them up. The main takeaway from this post is that the purpose of HTML is to define a meaningful structure to a document. Sometimes those meanings will result in special formatting, but it's not always the case.

When you learn about a particular element's tag, don't think about it in terms of what it makes something look like. Think about it in terms of what it says something means.

That's the essence of semantic markup with HTML. Understand that and you'll understand HTML in a pretty deep way.

An Introduction to Things My Students Never Read

Tom Streeter — Wed, 12 Aug 2020 01:58:56 +0000

There's an old joke among teachers that if you want to hide something from a student, stick it in a textbook. The 18 years I spent teaching at various colleges and the other 12 spent in the corporate training world have only convinced me to extend it to handouts, slide decks, most sentences not ending with "... and this will be on the quiz."

The flip side of that is that there are few places less conducive to learning something than a college classroom or a corporate training room. The only things you can guarantee are that everyone had trouble finding a parking spot, no one really wants to be there at that particular moment, and a significant portion of the class really needs to go to the bathroom.

I loved teaching and can honestly say the best part of the gig was the students. I still hear from many and I'm thrilled when I do. Students today have it far tougher than I did when I was an undergrad back in the early 1980s. I've never had time or patience for the "kids today are soft" stuff. Nowadays I tell people that I'm a freelance web developer when I have to be serious and when I don't I tell them I'm a professional cautionary tale. A lot of the work I do is related to the beer business somehow .

I really enjoy reading the tutorials published here. Even when it's a topic I'm familiar with I like to see how other brains make sense of them. The other day I came across a directory that held the website I used as a supplement for my last semester teaching basic web development. As I read through a couple of the pages I thought maybe ought to see the light of day again. The last university I taught at still hasn't killed the site, but it's really just a matter of time. My class was intended for students who weren't majoring in an IT-related field, so these are pieces that assume zero prior knowledge. I've never posted here before, so this seems like a good way to start.

So here's the plan: I'm going to take a two or three of the pages I wrote for my class and convert them to blog posts and post them here. There will be a little editing just to make examples less specific to the university I was at and just generally tighten things up (because there are no finished blog posts, only current drafts). Eventually they'll also make their way onto my personal site, but I haven't gotten around to really building that out yet (professional cautionary tale, remember?). If there's any interest when I've worked through the stuff I'm revising, I'm open to requests.

The first piece is going to deal with what is meant by "semantic HTML." Stay tuned.