frontend-bootcamp/step1-01/html-demo/README.md

HTML Demo

HTML tags are the basis of all web applications. They give the page structure, and define the content within.

An HTML tag takes the following form:

<tag class="foo" onclick="myFunction()" otherAttributes="values"> </tag>

HTML tags can also be nested to create a tree that we call the Document Object Model

<div class="my-page">
  <h1>My Page</h1>
  <ul class="link">
    <li><a href="https://github.com/Microsoft/frontend-bootcamp"> Frontend Bootcamp </a></li>
    <li><a href="https://twitter.com/micahgodbolt"> @micahgodbolt </a></li>
    <li><a href="https://twitter.com/kenneth_chau"> @kenneth_chau</a></li>
  </ul>
</div>

The HTML demo page is a large collection of HTML elements that you will come across during development. The full list of elements can be found on MDN.

To learn more about each element, click on the element names below.

Document Metadata

• html - Root-level element
• head - Provides general information (metadata) about the page
• title - Defines document title shown in browser tab/title bar
• link - Links to external resources (usually stylesheets)
• style - Inline style tag

Content Sectioning

• section - Generic section of content
• header - Introductory content or navigational aid
• footer - Footer for nearest sectioning element
• main - Dominant content
• nav - Navigational aid
• article - Syndicated content
• aside - Related information
• h1,h2,h3,h4,h5,h6 - Section headings

Block Text Content

• div - Generic block level container
• p - Paragraph
• ol - Ordered list (1,2,3)
• ul - Unordered list (bullets)
• li - List item
• pre - Preformatted text

Inline Text Elements

• a - Anchor element for creating links to other pages, files, programs
• span - Generic inline container
• b - Bring attention to content (usually bold)
• em - Stress emphasis (usually italic)
• i - Range of text set off from normal text (usually italic)
• sub - Subscript text
• sup - Superscript text
• code - Fragment of computer code (monospace)

Image and multimedia

• img - Embeds image into document

Table Content

• table - Root table container
• thead - Table head container
• tr - Table row
• th - Table head cell
• tbody - Table body container
• td - Normal table cell

We used to use tables to lay out applications. Each cell would be filled with slices of images from Photoshop or Fireworks. Rounded corners were created by elaborate table tricks

Forms

• form - Form container
• label - Label text for form elements
• select - A dropdown container
• option - Dropdown elements
• input - A form field to collect various types of input. Possible type values include:
  • text
  • checkbox
  • color
  • date
  • radio
  • submit

Next Step

CSS Demo