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
, andh5
.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 thehref
! Try it on animg
to make a clickableimg
.<a href=”http://space.com”>Go to space!</a>