HTML: Basics

Anatomy of a Website


Content: Text, Media 
+  HTML: Structure + Semantics
+   CSS: Presentation + Design
+    JS: Interactivity

= Your Website

HTML: "HyperText Markup Language"

It is:

- A text file that is "marked up" with tags
- Saved with .html extension
- The native language of web browsers.

It should be:

Semantic
Accessible

Anatomy of an HTML tag

Each tag has a "start tag", "end tag", some content in between, and optional attributes.

<tagname attribute="value">
  content
</tagname>

<a href="http://www.google.com" >
  Google
</a>

Think of a tag as a "command" to the browser and of the attributes as modifiers of that command.

The Basic HTML file

<!DOCTYPE html>
<html>
</html>

The doctype isn't an actual tag, but it needs to be at start at every HTML page to tell browser which version of HTML you're using (HTML5 here).

The html tag is always the first, root tag in the page.

Head

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Title of your page goes here</title>
 </head>
</html>

The head contains "meta" information about the page, information that the browser needs before rendering.

The Body

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Title of your page goes here</title>
 </head>
 <body>
  Bulk of your content here.
 </body>
</html>

The body contains the actual content of the page.

What goes in the body?

Headlines

<h1>Header 1</h1>
<h2>Header 2</h2>
...
<h6>Header 6</h6>

Header 1

Header 2

...

Header 6

Paragraphs

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

Paragraph 1

Paragraph 2

Paragraph 3

Line Breaks

<p>
Imagine there's no Heaven <br>
It's easy if you try <br>
No hell below us  <br>
Above us only sky <br>
</p>

Imagine there's no Heaven
It's easy if you try
No hell below us
Above us only sky

Notice: This tag does not need to be closed, since it doesn't encapsulate anything.

Lists

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  ...
</ul>

Item 1
Item 2

Ordered Lists

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  ...
</ol>

Item 1
Item 2

Formatted Text

<em>Emphasized Info</em>

Emphasized Info

<strong>Important Info!</strong>

Important Info!

<p>
You can have <em>emphasized info</em>
and <strong>important info</strong>
in the same paragraph.
</p>

You can have emphasized info and important info in the same paragraph.

Images

<img src="http://www.google.com/images/srpr/logo1w.png" 
  alt="Google">

<img src="http://www.google.com/images/srpr/logo1w.png" 
  alt="Google" height="50">

<img src="http://www.myspacegraphicsandanimations.com/images/
lights-christmas-graphic55.gif" alt="">

☞ When Should Alt Text Be Blank?

- Show how to copy/paste image URL in browser - Explain dangers of hotlinking. - Talk about relative vs. absolute URLs - Talk about not loading giant images.

Links

<a href="http://www.google.com">Google</a>

Google

<a href="http://www.google.com">
  <img src="http://www.google.com/images/srpr/logo1w.png" 
    alt="Google">
</a>

<a href="http://www.google.com" target="_blank">Google</a>

Google (in new window)

☞ Why External Links Should Open in New Tabs

Internal Links

<p>Jump to <a href="#chapter1">the first chapter!</a> </p>

<h1 id="chapter1">Chapter 1</h1>

<p>Most exciting story in the world. To be continued...</p>

<p>Read more on
<a href="http://en.wikipedia.org/wiki/Fox#Diet">Wikipedia</a>
</p>

Jump to the first chapter!

Chapter 1

Most exciting story in the world. To be continued...

HTML Comments

<!-- I can comment for humans here. -->

<!--
I can write a comment that
spans multiple lines too.
-->

Commonly used by snippet providers (like AddThis):

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
  <a class="addthis_button_preferred_1"></a>
</div>
<script src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f921b5f4f8898ae">
</script>
<!-- AddThis Button END -->

HTML Readability

Use quotes around attributes
Indent to represent nesting
Use same capitalization

Bad:

<ul><li><a href=http://www.google.com>Google</a></li>
<LI>Yahoo</LI></UL>

Good:

 <ul>
   <li><a href="http://www.google.com">Google</a></li>
   <li>Yahoo</li>
 </ul>

Using Whitespace for Readability in HTML/CSS

Developing & Debugging

HTML: Editors

Since HTML files are just text files, many programs can be used to create them. Some programs provide special assistance for handling HTML, like syntax-highlighting or autocompletion.

	Windows	Mac	Online
Free	Notepad++	TextWrangler, Smultron	Cloud9 IDE, JSBin
$$	E-Text Editor	SublimeText, TextMate, Coda, Espresso	Cloud9 IDE, JSBin

HTML Debugging

Chrome: Right-click -> "Inspect Element"
Firefox: Right-click -> "Inspect Element" -> "HTML"
IE: Open Tools -> Developer Tools

Chrome:

HTML Validators

Browsers will often render HTML that has mistakes in it, using different error correction strategies.

To check that your HTML is actually valid according to the standard, run it through the W3C validator.

You can also install the validator add-on for Firefox.

HTML Resources

When you're on your own and trying to code HTML, do a search for the tag you're using ("img tag" or "li tag") and you will usually find good references at the top.

W3Schools is a simple to read reference with interactive examples & will often be the top result. The HTML spec is the official reference, but can be harder to read.

For more tutorial type sites, check out Mozilla Developer Network and the Opera Web Standards curriculum.