Example HTML Page About HTML

  1. Headings
  2. Paragraphs
  3. Anchors
  4. Images
  5. Lists
  6. Divs and Spans
  7. Forms
  8. Breaks
  9. HTML5
  10. Resources

Headings

Headings!

Headings are used for titles and shit!

They come in a variety of sizes for subheadings and whatnot!

No really, you've got 6 heading size options, <h1> thru <h6>

Check out how small they get!
I'm not quite sure who uses all these heading tags...

Paragraphs

Humble paragraphs (<p>) are for large bits of text. Believe it or not, many websites contain large blocks of text, so these paragraphs really come in handy. Lorem ipsum dolor sit amet and the rest.

You can also apply Bold, Italics, and Underline to your text. Don't actually do this with HTML tags (<b>, <i>, and <u>), use CSS!

Anchors

The power of the early web came from hyperlinks, made using anchor (<a>) tags. These let you link to content on your own page/site, or on a different site (crazy, right?). This one will jump to a different part of this page. Just set the "href" attribute to the id of the section you want to jump to, preceded by a "#" sign. This one will take you to Google. Just set the "href" attribute to the URL you want to go to.

Images

How could you enjoy cat photos on the internet if you couldn't include images on web pages? That's why we have the <img> tag! Just set the "src" attribute to the URL of the image, like so:

Lists

Check out all these kinds of lists:

  1. Ordered lists! (<ol>)
  2. Numbers, displayed in order!
  3. As if these were steps for something!
Definition lists! (<dl>)
A kind of list no one really uses!
Here's a term!
Here's the description!

For unordered and ordered lists, each item in the list is wrapped in an <li> tag.

Divs and Spans

It's really hard to show off a <div> tag or a <span> tag, since they're both for arbitrary divisions text! This whole section is wrapped in a <div>, since it's meant to be it's own little section. This subsection is wrapped in a <span>, because maybe it's important or something. Div's and span's are both great targets for CSS for positioning content on the page or styling important pieces of text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus facilisis, turpis eu pharetra ornare, massa ipsum volutpat orci, vel aliquet mauris neque sed sem. Donec vel vestibulum est. Morbi volutpat pharetra metus quis rhoncus. Sed consectetur sagittis turpis, in tempor augue. Etiam nec enim at nisi aliquet tincidunt at quis elit. Duis non nisl id leo euismod dapibus. Phasellus at lobortis eros, ac consectetur purus.

 

Forms

Forms are a common way of accepting user input on a page, so HTML provides a number of input options. Here's an example form, wrapped in a <form> tag:

Example form: Text Field:

Password Field:

Text Area:


Radio Buttons:
Thing 1 Thing 2 Thing 3

Check Boxes:
Option A Option B Option C

Dropdown:


Multiple Selections:


You don't need to wrap these input elements in a form tag, they all work alone. This is usually preferable, especially when using the form to fire an AJAX request (more on that later). There are many more types of inputs as well. You can also disable fields with the "disabled" attribute, require fields with the "required" attribute, allow autocomplete with the "autocomplete" attribute, etc.

You should jump to this part of the page if you clicked the link above.

Breaks

In case you were wondering, the line breaks in between the form elements above were accomplished with the <br/> tag, and the line breaks (with the visible line) in between the sections of this page were accomplished with the <hr/> tag.

HTML5

HTML5 introduced a whole bunch of new tags. They don't always do much, most are just there to make the markup make more sense and be easier to read. For example, you can put header content in a <header> tag, footer content in a <footer> tag, body content in an <article> tag, subsections of content in <section> tags, etc.

Some HTML5 tags do a whole lot. Some notable ones include the <audio>, <video>, and <canvas> tags.

Audio:


Video:


Canvas:

Resources

That's about it for the basics. Here are a few links to some other example pages I've made:

And here are some good resources for learning more HTML