html

The first thing anyone will tell you is HTML stands for hypertext markup language.

so what?

When HTML started, it was supposed to provide two basic ideas: structure and linking. Beyond that, everything was supplementary. The big idea here was to make the source human readable and also match the structure.. Here is a minimal HTML document. It has an empty body.

<html>
  <body> 
  </body> 
</html>

While functionally, this document does absolutely nothing visually, it is successful in conveying its structure. Structure is critical in HTML. The following is an example of bad structure.

<html>
  <body> 
</html>
  </body>

But why is it bad? because there is ambiguity. The web browser will start reading: here begins an html document, here begins its body, here ends the document. But what of the body? did it end? Should the browser keep going until it reaches the end of the body? or should it stop at the end of the html? Both are valid options considering the error, so which takes precendence? If a web page programmer isn't able to decide this, how is a computer supposed to?

real world stuff

In HTML, each tag starts like this <tag> and ends like this </tag>. This rule pretty much holds across all HTML files. There's a caveat here, but we'll deal with it later.

Structure

HTML is broken up into two kinds of tags, structural and presentational. The critical point here is that structural tags apply a kind of importance to content. Text that appears inside a paragraph tag is a paragraph. There is meaning there!

Similarly, text that appears within a heading tag has meaning too, it is a heading, it has importance. There is meaning there too. By applying tags in HTML, you automatically give context to its content.

While this discussion may seem bizzarely religious, it is important because it gets you thinking about how you structure text. Just like a well written paper, even the lowly HTML document should have structure that identifies its meaning.

On to coding.

code

Before we begin, let's make a cheat sheet of elements that we'll start off using.

  • HTML
  • <html> ... </html>
  • Body
    • <body> ... </body>
    • Body Content
      • Headings
      • <h1>...</h1>, <h2>...</h2>, <h3>...</h3>, <h4>...</h4>, <h5>...</h5>, <h6>...</h6>
      • Paragraphs
      • <p> ... </p>

What really matters, for now, is the body content. Using this code that we have, we can make simple webpages that are capable of conveying structure. If you have used a language like LaTeX, then this series of tags is about equivalent to what you get in run of the mill TeX: headings and paragraphs.

Let's see a sample HTML page

<html>
<body>
  <h1>Hello World!</h1>
  <p>This is my very first webpage. It has a bit of
  everything. A little heading here. A little paragraph
  there.</p>
</body>
</html>

This is pretty much what most html pages look like. They have a body and that's about it. Nothing too fancy.

This is a good first start. Go off and make a webpage!