Ian Marshall

Getting Started with HTML and CSS

Lesson 1: HTML Syntax

The very first step in learning anything is exposure.

The mechanics of how letters, numbers, and punctuation are assembled is called syntax, and it takes some getting used to. Think of it like the grammar of a foreign language. It will seem very, very strange when you first see it, but through exposure will become more and more familiar.

When learning web development, you will find exposure starts by playing with finished web sites and applications, finding awe from them, and then reading the underlying code as if it were a spell book. This step is the incubator for all future learning; exposure spurs the inspiration that leads to the next step: tinkering.

So let's dive in, explore the syntax of a new language, and write some working bits of HTML code as if they were spells to learn.

Typing Code:

You will be typing HTML and CSS, and will need some editor to type into, preferably one that shows the result right away as you work. Here are some options:

  • If you're just starting out, a decent option is to simply open another browser tab to JS Bin, an online editor. Type code in the left column (after deleting anything already there), see the result in the right. Easy. A free account will let you save your work, if you want. Pro tip: Double-click on the blue "HTML" to show line numbers.
  • Other online options include JS Fiddle and Code Pen.
  • If you're looking for a more long-term, professional solution, you'll have to download and install a code editor. The one I currently use is Atom, which is free.
  • Other free editors include Brackets, BlueFish, Visual Studio Code, Notepad++ (Windows), and TextMate (Mac).
  • If you're using Atom, or another code editing application, save your work in one folder. (Do not just dump all your HTML files onto your desktop.) Then, from that one folder, drag any file into your browser to see what it looks like. You can edit the code, save the file, and refresh the browser to see your changes.

Additionally, I strongly recommend you learn to touch type, if you haven't already.

Exercise 1.01: Haiku

Instructions:

Using your code editor, create a new document called haiku.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser.

haiku.html


    

Notes:

  1. Yes, you are able to copy and paste the code into your editor. But it helps a lot more to type it in yourself. Trust me.
  2. The coloring above represents semantic hints called syntax highlighting and they're provided by nearly every code editor. They do not represent any special formatting you need to do on your end while typing. In fact, you'll see your own editor change colors and formatting automatically as it identifies the code you're typing. Additionally, it's very likely your code editor will use a completely different set of colors and formatting, so don't expect your code highlighting to exactly match mine.
  3. The < and > are called angled brackets when typing HTML.

Your browser should show something very much like the below output:

Observations:

  1. If you've typed in the HTML correctly, you should indeed see no angled brackets in the browser.
  2. Nothing from line 1 displays, either.
  3. <h1>, <h2>, <h3>, and <p> have partners in </h1>, </h2>, </h3>, and </p>. Together, they surround text, even if the text spans several lines.
  4. <h1> displays text that is larger than <h2>, which is larger than <p>.
  5. <br> does not have a partner and does not surround any text; rather, it seems to divide the text.
  6. What other observations have you made?

Terms:

  1. Line 1 is called a comment. Comments are meant entirely for human readability: notes, explanations, labels, and, well, comments. The browser will ignore all comments, indicated by <!-- at the beginning and --> at the end.
  2. The angled brackets < and > and the text between them are called tags. There are opening and closing tags that work as a pair. (The closing tag is the one with the slash /.) The pair and the text between them form groups called elements. Most elements, but not all, have opening and a closing tags. (The <br> element does not have a closing tag; see below.)
  3. There are six <h> elements, <h1> through <h6>, and the larger the number the smaller the text. These represent headlines, sub headlines, etc.
  4. The <p> element represents a paragraph.
  5. The <br> element does not have a closing tag. It is an instruction for the browser to insert a line break right at the spot the element appears. Sometimes, you may see it written as <br/> or <br /> (the second has a space before the slash), which are slightly older versions that accomplish exactly the same job.

Tinker:

  1. Write your own poem.
  2. Try using different <h> elements, <h1> through <h6>.

Typing code requires precision. The browser doesn't guess your good intentions or provide wiggle room. If there's a stray angled bracket outside of a tag, then it will print it to the screen without asking. So you need to be thorough in your testing. Are there any stray angled brackets?

Here's a short checklist to help you be sure your code is correct.

  1. Does the output (browser) show all the data (text) you want to have shown?
  2. Does the output show anything that should not be shown?
  3. Does the output look like what you expected?
  4. Does every HTML element that needs a closing tag actually have one?

We'll add more to this list as the complexity of our HTML increases. This is a good thing: we're in control. This checklist will help us keep from being overwhelmed or intimidated by code. Our capacity to learn expands when more exposure inspires the interest to do more tinkering. That's when you're ready to add more exposure.

Do not focus on learning at this point.
Just do the tasks without stress.

So, when you're ready, I've prepared nine more snippets of HTML for you to type in and check for correctness. Each is slightly more complicated than the previous, so take your time. The goal is exposure and inspiration, precision, command, and confidence.

Exercise 1.02: Constitution

Instructions:

Using your code editor, create a new document called constitution.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser.

constitution.html


    

Observations:

  1. Nothing new here except at the very end. The weird &hellip; seems to print three dots rather than &hellip;.

Tangent:

  1. It's more grammatically correct to use the ellipses as a single character (…) using &hellip; than as three separate periods (...). Try double-clicking in the parentheses to see what I mean about being a single character. Reference.

Terms:

  1. Many typographical, mathematical, and iconic symbols may be inserted into an HTML page using HTML entities. Here are a few of the common ones:
&lt;Less-than<
&gt;Greater-than>
&copy;Copyright©
&reg;Registered trademark®
&trade;Trademark
&hellip;Horizontal ellipses
&amp;Ampersand&
&ldquo;Left double quotes
&rdquo;Right double quotes
&euro;Euro (currency)

Tinker:

  1. Add the preamble.

Exercise 1.03: Good Advice

Instructions:

Using your code editor, create a new document called good_advice.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser.

good_advice.html


    

Observations:

  1. There are a couple of new elements, <em> and <kbd>, that change the way the text is displayed in the browser.
  2. These new elements occur between the tags of other elements! On line 2, the <em> is inside the <h3>, and on line 3 the <kbd> is inside the <p>.

I Wonder:

  1. How many HTML elements are there?
  2. How many HTML entities are there?

Terms:

  1. <em> indicates its text should have emphasis. By default, the browser prints the text in italics.
  2. <kbd> indicates its text is keyboard input. By default, the browser prints the text in a monospace font.
  3. An element is "inside" another element, or nested, if it is entirely in between the opening and closing tags of another HTML element. Elements without a closing tag (like <br>) cannot have nested elements.

Tinker:

  1. Do an Internet search for "HTML entity list" and check out the results. How would you use them?

Bookmark:

  1. A good HTML entity list will be useful. Start a bookmark folder for your online web development resources. When you find a good HTML entity resource, save the bookmark in it.

Exercise 1.04: Alice

Instructions:

Using your code editor, create a new document called alice.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser.

alice.html


    

Observations:

  1. There are a couple of new elements, <strong> and <cite>, that change the way the text is displayed in the browser.
  2. A single line of code can run long on the same line, or can be split to multiple lines. It doesn't seem to affect the output.

Terms:

  1. <strong> indicates its text should have stress. By default, the browser prints the text in bold.
  2. <cite> indicates its text is the name of some referenced work. By default, the browser prints the text in italics.

Best Practices:

  1. Use elements appropriately. For example, if you want something italicized, you can choose between <em> and <cite> (so far; there are others) that both display text in italics by default. But these elements are not interchangeable. They perform different semantic duties in identifying the role its text content plays in relation to the whole body of text. We'll discuss this more in the next and upcoming lessons.

Tinker:

  1. Typing &ldquo; and &rdquo; takes a lot of work. Is it worth it? What happens if you just use the keyboard "" instead? Which version looks better?
  2. Which version do I use on this web page?

Exercise 1.05: Bunny

Instructions:

Using your code editor, create a new document called bunny.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser.

bunny.html


    

Observations:

  1. There is a new element, <pre>, that changes the way the text is displayed in the browser.

Terms:

  1. <pre> indicates its text is preformatted. It preserves white space, including spaces, tabs, and new-line characters. For other elements, multiple white space characters are automatically reduced to just a single space.

Tinker:

  1. Change the <pre> to <p>. (Don't forget the closing tag!) When is one more useful than the other?
  2. Do an Internet search for "Ascii art." Are there any you can recreate?
  3. Look up "Ascii."

Exercise 1.06: James Bond

Instructions:

Using your code editor, create a new document called james_bond.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser.

james_bond.html


    

Note:

  1. Not every line is code above is aligned to the left edge! Some lines are more indented than others.
  2. In your code editor, you can indent with the tab key or by hitting space bar several times.

Observations:

  1. There are a couple of new elements, <ul>, <ol>, and <li>, that change the way the text is displayed in the browser. They even add things not in the text, like numbers or bullet dots.
  2. The HTML code itself has a new format: lines 4, 10, 13, and 17 are all indented once while lines 5, 6, 7, 8, 9, 14, 15, and 16 are all indented twice.
  3. Another new element, <data>, doesn't seem to change the text at all in the browser, but has some extra stuff in the opening tag (lang="en", for example).
  4. Capitalization was typed in manually. No HTML tag was used to display the text as all uppercase.

Terms:

  1. <ul> and <ol> are for presenting lists. Both require nested <li> elements to indicate text as list items. An unordered list will use bullet dots for each list item; an ordered list will number each list item starting at 1.
  2. The <data> element is used to give additional data about the text inside it, data that are used only by the code and not intended to be displayed in the browser. <data> elements have many possible uses; for the above they provide data on the language used.
  3. The extra text (lang="en", for example) inside the opening <data> tag is called an attribute. "en" indicates "English," "pt" indicates "Portuguese," "cs" indicates "Czech," "hu" indicates "Hungarian," and "ku" indicates "Kurdish."
  4. Attributes will never be in a closing tag.

Information:

  1. There are no HTML tags that change capitalization. Capitalization is considered part of styling, which will be introduced with CSS.

Best Practices:

  1. Some elements are considered containers (like <ul> and <ol>). They're intended to contain other elements rather than just text. For readability (human readability; computers don't care), HTML elements inside containers should be indented and on their own lines.
  2. Elements not considered containers (like <h1>, <p>, and <li>) needn't have their content indented and on their own lines—unless that content is a container. Line 4 above is a <ul> container nested inside a non-container <h2>, so I've given it its own line and indentation.
  3. Indents are cumulative; that is, a container inside a container would have its contents indented twice.
  4. There is much debate (and nerd comedy, if you watch Silicon Valley) about exactly how to indent. It's a matter of taste: some people like two spaces, others four, while others just hit the tab key to indent. (I use the tab key set to four spaces, but you should follow your own heart on this one. Avoid arguments on this topic. Seriously.)

Tinker:

  1. Switch the <ul> and <ol> tags. Which way makes more sense?
  2. Do an Internet search for "HTML language codes." Are there any missing languages? Do they all have two-letter codes?
  3. Add a few more <data> tags for "Spy" in other languages. (Use an online translator, if necessary; use HTML entities, if necessary.)

With this sixth assignment, we've introduced some important new concepts, like containers and data and code formatting. Do not worry about memorizing anything at this point. Take a breath of relief! But do try to make your code look like mine. To that end, I'd like to add a couple of new items to our checklist.

  1. Does the output show all the data you want to have shown?
  2. Does the output show anything that should not be shown?
  3. Does the output look like what you expected?
  4. Does every HTML element that needs a closing tag actually have one?
  5. Are HTML attributes useful and formatted correctly?
  6. Is the HTML code as readable as possible?

HTML attributes introduce many new possibilities because you can have the same element perform different jobs based on additional data provided by its attributes. But attributes should be useful and not just added by habit. Use discretionary attributes sparingly. As we'll see, though, some tags require attributes to function properly.

HTML readability is mostly about proper indentation, but also overall simplicity. Since reading other people's code is a significant part of exposure, it's nice when that code is easy on the eyes. Readability is more than just nice, though, as it plays a big part in debugging, collaborative coding, and long-term codebase maintenance, as well as being a professional expectation.

Exercise 1.07: Equations

Instructions:

Using your code editor, create a new document called equations.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser.

equations.html


    

Observations:

  1. There are a couple of new elements, <details> and <summary>, that seem to work together. They don't change the text at all, but rather how they're viewed. A dropdown is provided to reveal text that's inside the <details> but not inside the <summary>.
  2. The new elements <sup> and <sub> raise and lower a smaller version of the text inside it.
  3. The new element <var> changes the way text is displayed in the browser.
  4. We've used the <data> element in a new way and with a new attribute (class="equation").

Terms:

  1. <details> and <summary> are the first HTML elements that actually do something. Together they create our first user interface (UI) component, a dropdown "reveal" for additional content.
  2. <sup> and <sub> indicate its text should be printed as as superscript or subscript, respectively.
  3. <var> indicates its text is a variable, which is particularly useful for showing mathematical equations. By default, the browser prints the text in italics.
  4. Here, the <data> element is used as a container, a way of grouping text, variables, superscripts, and subscripts into a single element with a class of "equation." This does not affect how the text is printed in the browser, but greatly aids in human readability and semantics.

Best Practices

  1. The class attribute is not a required attribute. It's discretionary, which means it must be useful in order to be included. In this case it adds to the readability of the HTML code by describing its contents.

Tinker:

  1. Add Pythagoras's right-triangle theorem: A2 + B2 = C2. Make sure A, B, and C are each in its own <var> tags.
  2. Create a side project, an HTML document to hold all your riddles or trivia using <details> and <summary> elements. Show the clues but hide the answers in the dropdown. When you're ready, you can send it to a friend who can take your quiz right in the browser!

Exercise 1.08: RSVP

Instructions:

Using your code editor, create a new document called rsvp.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser.

rsvp.html


    

Observations:

  1. The href attribute in the middle of line 7 seems to be a URL to another site.
  2. What other observations do you have? (Do not skip this step!)
  3. ???
  4. ???

Terms:

  1. <dl> indicates a dictionary-type list. In other words, there's a dictionary term (<dt>) that requires a dictionary definition (<dd>). Use a dictionary-type list for glossaries or lists of terms followed by more information about the term. By default, the browser indents any content in the <dd>.
  2. <address> and <time> are similar to <data> elements, but more specific regarding the data type they contain. The datetime attribute above holds a Coordinated Universal Time (UTC) timestamp.
  3. <a> indicates its text is a hyperlink, originally called an "anchor." This is another user interface element: when the user clicks on the link, a new web page will open (the one referenced in the href attribute). By default, the browser prints the text underlined and in blue if it hasn't been clicked yet, or purple if it has.

Tinker:

  1. Could you combine a <dl> with <details>? Which would go inside the other?
  2. Do an Internet search for "Coordinated Universal Time." What does the UTC+0100 mean?

Exercise 1.09: Art

Instructions:

Using your code editor, create a new document called art.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser.

art.html


    

Observations:

  1. The src attribute on line 3 seems to be a URL to another site.
  2. After hovering (with the mouse cursor) over the image for a moment, a tooltip appears with text.
  3. ???
  4. ???

Terms:

  1. <figure> and <figcaption> are used to couple an image and its caption together in one container.
  2. <img> is an instruction for the browser to insert an image right at the spot the element appears, specifically the image referenced by the src attribute.
  3. Like the <br> element, <img> has no closing tag. Sometimes, you may see it written as <img/> or <img />, which are slightly older versions that accomplish exactly the same job.
  4. <small> indicates its text is the small print of a footnote or a contract or the like. By default, the browser prints the text in a smaller font.

Tinker:

  1. Which <img> attribute (src, alt, or title) is responsible for the tooltip? What happens if you change their values, or add new-line characters?
  2. Add more figures, images, and captions. Could you have a list (ordered or unordered) of figures?
  3. Look at version two, below. What's changed? What do you think will happen when the user clicks on the image?
art_v2.html


    

Exercise 1.10: Footnote

Instructions:

Using your code editor, create a new document called footnote.html. Type the code below into that document, matching my syntax and line numbers, and check your work in a browser.

footnote.html


    

Observations:

  1. ???
  2. ???
  3. ???
  4. ???

Terms:

  1. <blockquote> indicates its text is a long quote, enough to take several lines in a block. By default, the browser prints the text indented on both the left and the right.
  2. <dfn> indicates its text is a definition and the term is expected to be used one or more times in the same block of text.
  3. <abbr> indicates its text is an abbreviation. The title attribute provides a unique user interface, a cursor-based tooltip. By default, the browser prints the text with a dotted underline.
  4. <mark> is for throwing focus to some particular text. By default, the browser prints the text highligted in yellow.
  5. <footer> is a container that indicates its contents belong after some primary content.
  6. <hr> instructs the browser to draw a horizontal line (or "rule") right at the spot the element appears. This visually separates the content above from the content below, as with a footnote.
  7. <del> and <ins> indicate its text has been edited. By default, the browser prints the text in <del> tags with a strikethrough and the text in <ins> tags as underlined.
  8. <q> indicates its text is a short quote, often less than one line long. By default, the browser prints the text with quotes automatically placed around it.
  9. <code> indicates its text is computer code. By default, the browser prints the text in a monospaced font.

Tinker:

  1. Inside the <code> are the HTML entities &lt; and &gt;. Why? What happens if you just typed < and >?
  2. Could you rewrite alice.html to use <q> elements instead of all the &ldquo; and &rdquo; HTML entities?

Tinker! It truly is the best (perhaps the only) way to learn. Shuffle HTML together in different ways, create new combinations. Explore! Play! There's nothing like doing for reinforcing patterns learned and discovering those not yet revealed.

Review

There's a lot to learn about HTML. Luckily, we're not trying too hard yet. For now, the exposure alone will help to demystify later attempts at clarifying all the strange syntax requirements.

Most importantly, we practiced typing code and using our tools, the code editor and browser, to test for errors.

We also gave ourselves a list of checks to be sure we're writing the code we expect to write:

  1. Does the output show all the data you want to have shown?
  2. Does the output show anything that should not be shown?
  3. Does the output look like what you expected?
  4. Does every HTML element that needs a closing tag actually have one?
  5. Are HTML attributes useful and formatted correctly?
  6. Is the HTML code as readable as possible?