Current Assignment(s)

A3: Markup
P1 Workshop (Assessments)
Due 11:55PM Monday, 10.15

“Beginning HTML”

Topic Overview

Comments in HTML

Leaving Messages and Notes in HTML Adding HTML Comments TODO

Attributes

Review: HTML Elements and Tags Adding Attributes Revisit the Root Improving Document Structure TODO

Declaring Doctype

Review: DOCTYPE In the Past In the Now TODO

Head Elements

Review: The Head Meta Viewport Title Link Style Review: Head Elements TODO

Body Elements

Review: The Body Structural Markup Semantic Markup TODO

Semantic Markup

Bold and Strong Italic and Emphasis Superscript and Subscript Quotes and Blockquotes Abbreviations and Acronyms Citations Definitions Addresses Insert and Delete Strikethrough TODO

Lists

List Types Ordered Unordered Definitions Nested Lists TODO

External Hyperlinks

Hyperlinks and Hypertext Creating a Link Setting the Target Links to Other Sites E-mail Links TODO

Internal Hyperlinks

Linking Internally in the Site From One Page to Another To a Specific Part of the Same Page Namining IDs TODO

Proper and Polite Code

Nobody Likes Rude Code 1. Logical or Linear Ordering 2. Properly Nested Tags 3. Indented Elements TODO

3. Indented Elements

There isn’t total protocol for indent depth, although standard procedure is to indent one tab (or 2 spaces) for each new element that is a child of the one above it.

Indentation doesn’t effect how the page renders, but makes a huge difference in the readability of the code.

HTML

<!DOCTYPE html>
<html>
  <body>

    <!-- This is a mess, and considered in poor taste: -->
    <menu id="hot-mess">
            <ul>
    <li><a href="#">Home</a>
      </li><li><a href="/about">About</a></li><li>
                    <a href="/contact">Contact Me</a></li></ul>
    </menu>

    <!-- Rather, this is considered best practice: -->
    <menu id="class-act">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact Me</a></li>
      </ul>
    </menu>

  </body>
</html>

Here’s an example with nested lists:

development best-practice code elements indent