webmaker_logo

Cheatsheet

HTML

Dive into HTML

  1. Elements that Every Page Has
    • <html> (Document Root) creates an HTML document. Everything in an HTML document should be inside an <html> tag except the doctype. <!DOCTYPE html>
      <html>
       <head></head>
       <body></body>
      </html>

    • <head> (Document Metadata Container) contains document information. You can provide general information about the current document in the <head>, such as stylesheets, javascripts, search keywords, character encoding.

    • <title> (Document Title) defines the title of the document, shown in a browser's title bar or on the page's tab.

    • <body> (Document Body) frames the main content of a web page. All content needs to be within the <body> tags It's where all the stuff people actually see goes. Oh, and documents only have one <body> tag.

  2. Text
    • <h1> , <h2> , <h3> , <h4> , <h5> , <h6> (Heading Elements) Heading elements implement six levels of document headings, <h1> is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically. <h1>This is the most important header</h1>
    • <p> (Paragraph) creates a new paragraph <p>...</p>
    • <ul> (Unordered List) creates a bulleted list <ul>
        <li>List Item</li>
        <li>List Item</li>
      </ul>
    • <ol> (Ordered List) creates a numbered list <ol>
        <li>List Item</li>
        <li>List Item</li>
      </ol>
    • <li> (List Item) inserts a list item, and adds a number or symbol depending upon the type of list selected
    • <strong> (Bold Text) <strong>This will display as bold text</strong>
    • <em> (Italic Text) <em>This will display as italic text</em>
    • <span> (Span) serves as a hook for inline styling <span style="color:red;">This text will be red</span>
  3. Links and Images
    • <a> (Anchor or Hyperlink) (<a>) is the building-block of the web. It defines a link. Use the href attribute to define the target of the link <a href="https://etherpad.mozilla.org/simple-mdn">Simple MDN Definitions</a>
    • <img> (Image) produces an image. Use the src attribute to define the image to embed. The image tag does not have a closing tag. Instead a "/" is used as below: <img src="https://developer.mozilla.org/skins/mdn/Transitional/img/mdn-logo-sm.png"/>
  4. Page Structure
    • <div> (Document Division) <div> is a generic container for content. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element (such as <article> or <nav> ) is appropriate. <div>...</div>
    • <section> (Document Outline Section) HTML5 represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading. <section>...</section>
    • <nav> (Navigation) HTML5 produces a link that allows users to jump from one area of a site to another, including from one page to another or within the same page: a section with navigation links. <ul>
        <li><a href="...">Link</a></li>
        <li><a href="...">Link</a></li>
        <li><a href="...">Link</a>
          <ul>
            <li><a href="...">Link</a></li>
            <li><a href="...">Link</a></li>
          </ul>
      </li>
      </ul>

Helpful Resources

Mozilla Developer Network (MDN)

The MDN is an open community of developers building resources for a better web, regardless of brand, browser or platform. There is a complete list of all HTML elements here: https://developer.mozilla.org/en/HTML/Element

Stackoverflow

Stackoverflow is a programming question and answer site. If you have questions, search this site and you'll likely find the answers. http://stackoverflow.com/