HTML Fast! (Part 2)

7 min readJul 23, 2015

I’m not here to waste your time.

Intro

I’m going to show you how to write a complete HTML document from scratch. I will explain the intial elements you should know by heart. And then I’ll show you were you can go to find more elements

Valid HTML

Remember this address: validator.w3.org. This is the official HTML5 validator, and it tills you if something is missing form your document that must be there in order to be a valid document (web page). Staying valid is a good thing (don’t ask me why, ask google why).

I will now show you the minimum valid HTML document:

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    
  </body>
</html>

That’s a complete, valid HTML document. Let’s go over the elements. I will incrementally build this document in each part.

Doctype (Document Type Declaration)

First there’s the doctype:

<!doctype html>

This is important to include in the page. All you need to know is that it tells the web browser that this is an HTML5 document. There are older doctypes, that are way longer and more complicated (boring). If you want to know more: here and here.

Document Root

Next add the root element (the html element):

<!doctype html>
<html>
</html>

This element contains all of your document. You put everything inside this element.

The Head

Next, add the head element (goes inside of the html/root element).

<!doctype html>
<html>
  <head>
  </head>
</html>

The head element is where you put all of your metadata; because nothing is visible in the head element. What would you need that isn’t visible? You would put elements in the head that would describe your page more, like a title, description, etc. You could also include elements that would import other files that would be important to your document, like stylesheets (CSS) or scripts (JavaScript).

The Title

The only required element to be put inside the head element is the title element.

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
</html>

The title element allows you to add title text to your document (this text is displayed in web browser tabs, or as the title on a google search result for your web page).

It’s required that you have a title in order to validate, and you must include text content for the title too.

The Body

Finally, there’s the body element.

<!doctype html>
<html>
  <head>
    <title>My Web page</title>
  </head>
  <body>
  </body>
</html>

You place it after the head element, but still inside the html element (body and head are siblings).

The body element contains the content to be displayed on your page. There is no content in our minimal document, and that’s okay (it’s still a valid document).

Now that we know what we’ll need to write over and over again (also known as boilerplate code) before we start to get to the meat of our web page. Let’s get to what it’s all about, the visual content.

The meat of the body

Inside the body element, lies your content. You can put whatever you want here. So let’s talk about that.

Text

You can put text in your body element. “Duh”, you say. But I’ll make an important point: HTML documents are text documents. This means that they have a certain flow, or order, to how they are rendered by web browsers. Certain elements don’t behave like text, but originally, text was all there was (the was no images, videos, or complicated page structures we have today). Keep this in mind.

Text looks like this:

This is text.

Surprised? Didn’t think so. How about this:

The number 1 < 3, and the number 3 > 2.

Nope. We have a problem worth mentioning here. The < and > characters are reserved for HTML’s syntax. We can simply use them as text. So we must use HTML entities.

The number 1 &lt; 3, and the number 3 &gt; 2.

The HTML entities are single characters with a specific code. They begin with a ampersand (&) and end with a semi-colon (;). Inside the entity is the code (a keyword or number of somekind) which defines what character we want to display. All characters can be expressed as an entity. You can find a list of all the entities somewhere out there, but the ones you should always remember are these:

< which becomes <
> which is >
& which is &
  which is a “non-breaking” space character

The last entity is worth more explanation. Why do we need a space character when we already have the spacebar key on our keyboard? Well, it’s not just any old space character; it’s a non-breaking one. This means words wont wrap around when they reach the end of the screen if separated by a nbsp.

One final thing about text: regular space characters collapse into one space character. You can have a thousand space characters all together, and it’ll collapse into one. So things like:

I have a     lot  of         space

Get displayed like:

I have a lot of space

So remember this.

However, the nbsp entity is non-collapsing too! So you can use it to add all those extra spaces if you want.

Inline Elements

Enough about text, what about some elements? Let’s start with what are known as inline elements.

Inline elements stay in the flow of text; you could say they stay in line with them. Here’s what I mean:

This is some text with an <span>inline element</span>.

The span element is a generic inline element, and it will stay in the flow of text. You wont notice the span element, but it’s there, and it’s contents are the text “inline element”. What’s the point? Well, one example would be to make the appearance of this element look different with CSS, but we’ll get to that later.

Some inline elements do have different appearances and meanings behind them that should be used when appropriate. Let’s go over a bunch.

em

The em element denotes emphasis in text like this.

The em element denotes emphasis in text <em>like this</em>.

strong

What about bold text? That’s where the strong element comes in.

I am regular text, and I am <strong>bold text</strong>.

img

The img element displays an image on the page. It looks like this.

<img src="http://google.com/images/logo.gif" alt="Google Logo">

It’s self-closing, and should have two attributes, src and alt.

The src attribute should be a URL to the image you want to display (in example above it is a URL to Google’s logo).

The alt attribute should be some alternative text to display if the image src fails to load (or if you’re blind and can’t see images, then the alt text will be read to you instead). The example above is using the text “Google logo” as the alt attribute’s value. Remember your alt text when possible!

iframe

The iframe element is very cool. It looks like:

<iframe src="http://google.com"></iframe>

It will embed a entire page into the document; a web page within a web page (it’s INCEPTION!).

Similar to the img element, the iframe element has a src attribute which should have a value of a URL to a web page.

Oddly, the iframe element is not self-closing, so don’t forget the end-tag. The content of an iframe is ignore, unless you’re using an ancient web browser that doesn’t understand the iframe element.

And more…

There are a bunch of inline elements. It will do us no good for me to list them all, so I’ll stop here. If you want to know them all, then google for “inline html elements”.

Block-level Elements

This is were things get interesting. Block-level elements are elements that break the text flow (they start on a newline) and occupy the entire width of it’s parent element.

Try out this code on JSBin:

Some text and then a <div>block-level element</div> all of a sudden.

You’ll notice that the div element above will break the text at the end of “Some text and then a”. Also, you’ll notice that because “all of a sudden.” is outside of the div element’s content, that it appears below “block-level element”. It’s as if the block-level element is an invisible horizontal box breaking up the text.

div

You’ll come across a lot of block-level elements, but one you’ll want to know and love is the div element. It stands for document division. It’s a generic block level element, which means you can use it at anytime.

You’ll mainly use this element to structure your document into different parts. You’ll use CSS to target each div element and change appearances for different parts of your page.

p

The p element is the paragraph element. Use it to break up your text into paragraphs:

<p>
I'm a sentence within a paragraph. I'm also another sentence.
</p>
<p>
I'm like a whole new paragraph man. You may think I'm below you, but you wouldn't even know mannn.
</p>

It’s better to use p elements to break up your paragraphs than div elements, because they mean “paragraph”. Get it, they have a meaning, it’s called semantics.

And more…

There are a bunch more of block-level elements. Agian, I’m not going to list them all. You’ll learn them as you go, or should I say, as you goo…as you google!

Summary

So, with all this said, you could make a valid HTML document that looks like this:

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <p>
    Hello guys, welcome to my <em>page</em>.
  </p>
  <p>
    I know it’s not much, but it has <strong>images</strong>:
    <div>
      <img src=”http://example.com/kitten.jpg">
    </div>
  </p>
</body>
</html>

That should make sense to you by now. Hope you’re getting it, even though I’m trying to go fast here…

Now what?

I don’t think you should learn any more HTML elements at this point. Rather, I think you should learn CSS and the semantics behind the different “properties” you can apply to your elements with CSS. That’s where the fun starts, and now you’re ready because you know HTML and the basics.

Feel free to follow me as I will be writing more to come. Hopefully, I can show you web stuff (and how easy it is) in short, fast chunks.

Coming soon: CSS Fast! (Part 1)

HTML Fast! (Part 2)

Intro

Valid HTML

Doctype (Document Type Declaration)

Document Root

The Head

The Title

The Body

The meat of the body

Text

Inline Elements

em

strong

img

iframe

And more…

Block-level Elements

div

p

And more…

Summary

Now what?

Written by Sam Holmes