HTML Basics

Minimal Page

This is the basic necessary content all HTML documents should contain.

  • Visible content is placed in the body element.
  • Data about the page is placed in the head element.
<!DOCTYPE html>
<html>
  <head>
    <title>A New Site</title>
  </head>
  <body>
    Hello World!
  </body>
</html>

Tags

Tags are textual segments, which the computer parses and forms into elements. Most elements have an opening and closing tag.

A paragraph element looks like this:

<p>It’s out of this solar system!</p>

Some elements are self-closing. That means they don’t have a closing tag.

Image is one element that self closes:

<img src=”imageFile.jpg” />

Attributes belong in the opening tag. In the img tag above, src is an attribute. Attribute values (like imageFile.jpg) must always be enclosed in matching quotes like ' or ".

Whitespace & Indentation

Indentation helps people (especially you!) read your code. Try to follow these rules when you write or edit code:

  • ↩ Put each new element on its own line.
  • → Use indentation to make child elements easier to see.
  • Putting multiple items on one line is okay if the line is short.
  • Be consistent!

<h1>My Favorite Spacecraft</h1>↩

<p>Here are my favorite spacecraft.</p>↩

<ol>↩

→<li>↩

→ →<h2>Voyager</h2>↩

→ →<p>It’s out of this solar system!</p>↩

→ →<img src=image1.jpg” />↩

→</li>↩

→<li>↩

→ →<h2>Chuck Yeager's X-1</h2>↩

→ →<p>it was a pretty fast ship.</p>↩

→ →<img src=”image2.jpg” />↩

→</li>↩

</ol>

Comments

Comments are ignored by the computer. Use comments to leave messages to people who will read your code, like yourself! Did you do something in a weird way and need to remember why? Use a comment:

<!-- I did this for a reason... -->

Comments can also be used to temporarily disable elements:

<!-- <p>I'm invisible!</p> -->

Common Elements

  • Head contains data about the page, like its title. It also has scripts or stylesheets you want to load with the page.

    <head><title>Page Title</title></head>

  • Body contains all the content of the page. Most of your elements go here.

    <body><p>My Page Content</p></body>

  • Paragraph contains text.

    <p>Hello world!</p>

  • Lists contain child items which are somehow related.

    • Ordered lists usually include a number to indicate where the item falls in the list:

      <ol><li>…</li>…<li>…</li></ol>

    • Unordered lists usually just make a bulleted list:

      <ul><li>…</li>…<li>…</li></ul>

  • Headings give visual hints to a reader and divide the page into sections.

    • h1 is the largest heading.

      <h1>Page-Level Header</h1>

    • There are four in-between: h2, h3, h4, and h5.

    • h6 is the smallest heading.

      <h6>A Deeply Nested Header</h6>

  • Images will show pictures on the page. img is self-closing, so it can’t have any children.

    <img src=”imageFile.jpg” >

  • Anchors create a hyperlink to other pages and other anchors. a can have children: they all turn into a hyperlink to the href! Try it on an img to make a clickable img.

    <a href=”http://space.com”>Go to space!</a>