This is the basic necessary content all HTML documents should contain.
- Visible content is placed in the
- Data about the page is placed in the
<!DOCTYPE html> <html> <head> <title>A New Site</title> </head> <body> Hello World! </body> </html>
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
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>↩
<p>It’s out of this solar system!</p>↩
<img src=image1.jpg” />↩
<h2>Chuck Yeager's X-1</h2>↩
<p>it was a pretty fast ship.</p>↩
<img src=”image2.jpg” />↩
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> -->
Head contains data about the page, like its
title. It also has scripts or stylesheets you want to load with the page.
Body contains all the content of the page. Most of your elements go here.
<body><p>My Page Content</p></body>
Paragraph contains text.
Lists contain child items which are somehow related.
Ordered lists usually include a number to indicate where the item falls in the list:
Unordered lists usually just make a bulleted list:
Headings give visual hints to a reader and divide the page into sections.
h1is the largest heading.
There are four in-between:
h6is the smallest heading.
<h6>A Deeply Nested Header</h6>
Images will show pictures on the page.
imgis self-closing, so it can’t have any children.
<img src=”imageFile.jpg” >
Anchors create a hyperlink to other pages and other anchors.
acan have children: they all turn into a hyperlink to the
href! Try it on an
imgto make a clickable
<a href=”http://space.com”>Go to space!</a>