Wednesday: What is syntax in HTML?

At this point you have used a handful of tags to structure your content (content is the stuff that visitors experience on the final Web page). Today we need to talk about syntax. Syntax is the order in which code is written. If you get the order wrong, the code is considered broken and will not perform as intended. Spoken language is much the same; if the syntax of your sentence is wrong, people might well be confused. Yoda is a great example of broken syntax.

When writing HTML, you can get by with just tags (your code) and plain-language text (your content). But even then, syntax matters. If you put your content between your ‹head› and ‹/head› tags, Web browsers are going to be confused.

But HTML syntax gets a little more complicated than that. In addition to specifying an HTML tag, we can also identify just one attribute of that tag. It's like when sports analysts are talking about a professional athlete. They might talk about the athlete's speed (one attribute) or they might talk about the athlete's agility (another attribute). And if they mention one of these attributes, they are almost always going to follow it up with some kind of value statement, like saying that the athelete's speed is faster than other players at that position, or is too slow to keep up with teammates, or whatever. To apply this syntax to HTML, if you want to specify a kind of tag (rather than refer to a general tag), then you will add attributes and values, in that order.

Here's an example: Most of us are going to code our project Websites in English. Some of you may choose other languages, however. Regardless, we should all specify that language on line 2 of our HTML documents by adding an attribute and value to our ‹html› tag. This is primarily for the benefit of Web readers for blind visitors; you want their reader to pronounce your text intelligibly, right? So set the language for each document you create!

If the document will only contain English, then write this:

 ‹html lang="en"›

If the document will be written in Spanish, however, write this:

 ‹html lang="es"›

There are a number of language options. Check out W3School's HTML Language Code Reference page for a full list.

We also need to learn how to add comments in HTML. Instead of just having left and right hats bracketing off a tag, comments include a bang and some dashes, like so: ‹!-- initiates the comment and --› finishes the comment. If, for example, I wanted to note that the body of my document is where all my content belongs, I could write

‹!-- All content needs to be placed in the body of the document --›.

Everyone here needs to include at least one comment in your code to remind you to add comments as you code. For beginning coders, comments are life-savers. Moreso when we get into CSS, but they're still pretty good to have any time you are learning a new piece of code - just add a comment next to it explaining what it does and why it's there. Your future self with thank you.

Today we're going to spend much of our class time in Google's drawing app, sketching out the structure of your project Website. You're going to take the idea you put forth in the Do Now and break it into sections that make sense to exist on different pages.