Syntax & terminology for HTML & CSS, basic HTML document. Quiz on Thursday.

HTML syntax & terminology

      Hello world!

A basic HTML document that displays only the text “Hello world!” There are 8 tags in this document: 4 opening tags (ex. <html>) and 4 closing tags (ex. </html>). The body element includes both opening and closing tags and everything in between. (Note that Title is nested in Head.)

      Hello            world!

In HTML & CSS, white space collapses. That means that the above 3 examples, from a code perspective, are the same. They display “Hello world!” ← like this. Spaces and carriage returns are effectively for the programmer’s own housekeeping; they allow you to make the code readable, navigable, and easily editable for a more streamlined process.

<html xmlns="" xml:lang="en" 

Ideally, the first few lines of the document, including the opening HTML tag, will look something like the above (not a good idea to copy this to your site automatically). This document type declaration and namespace tells the browser how to render the document (which mode to use). See this explanation—my source here—if curious. (No need to study this bit, though.)

<elementtype attribute="value">content</elementtype>

Terminology for the components of an element. There are accepted element types. An element will have certain possible accepted attributes, each with a specified value; though there are some attributes applicable to any element type. The content is generally what the browser is displaying, according to the specifications of the tags.

<a href="" target="_blank">Huh?</a>

An actual HTML element. There can be any number of attributes (including 0) for a given opening tag.

<link rel="stylesheet" href="/style/main.css"
 type="text/css" />

The Link element belongs somewhere in the Head. This is how the HTML document finds its CSS counterpart. (Note that this is a single-tag element. The / at the end actually serves to close it.)

CSS syntax & terminology

selector { property: value; }

Terminology for the components of a complete CSS rule. The rule begins with a selector, which connects it to one or more HTML elements, and contains declarations (just one here) between { and }. A failure to close brackets will lead to broken styles. Properties and their values are separated by :. There are a limited number of properties available, and along with their allowed values, they make up the CSS lexicon.

    body { padding: 1.2em; }

An actual CSS rule.

    body { padding: 1.2em; color: black;
           background: #ff6; }

One rule can include multiple declarations, separated by ;—they all apply to the same selector. The last declaration doesn’t technically require a semicolon (they separate, not close declarations), but it’s advised to think of the semicolon as a cap to the declaration—it keeps you from jumbling declarations when your rules list gets extensive.

Talking to yourself

<!-- HTML comment -->
/* CSS comment */

Comments are completely ignored by browsers. They allow you to create markers in your code for your own reading and navigation (like white space). An HTML comment begins with <!-- and ends with -->. A CSS comment begins with /* and ends with */. What goes in between is, just between you and me, between you and your code.

Breaking it

Know your syntax. If you miss a single character, you can break an entire document. It can be hard to find an error once you’ve made it.

Review (terms)

  1. Language (ex. English or HTML or CSS)
  2. Syntax (ex. < = " " > or { : ; } )
  3. Lexicon (element types or properties, with accepted values)
  4. Terminology (studying the language)
  5. Element (HTML)
  6. Element type (HTML)
  7. Attribute (HTML)
  8. Value (HTML)
  9. Tag (HTML)
  10. Opening tag (HTML)
  11. Closing tag (HTML)
  12. html (element)
  13. head (element)
  14. title (element)
  15. link (element; HTML connection to CSS)
  16. body (element)
  17. Rule (CSS)
  18. Declaration (CSS)
  19. Selector (CSS connection to HTML)
  20. Property (CSS)
  21. Value (CSS)
  22. Comment (HTML or CSS)

2,406 Responses to “Syntax”

  1. michael jordan shoes


  2. kd shoes says:

    kd shoes


  3. nike flyknit racer


  4. ultra boost adidas

    After 80 s “shoe powder” to fly to guangzhou for “Jordan 6 generations”

  5. Disney Angry Birds

    Syntax ♥ Design for Information and Interaction on the Internet

  6. kl gengster 1

    Syntax ♥ Design for Information and Interaction on the Internet

Leave a Reply

You must be logged in to post a comment.