Basic HTML & HTML boilerplate

Elements and Tags

Elements and Tags are the building blocks of HTML.

Elements are what makes up a HTML document. You can put elements inside of other elements. An element can include three things: a tag, attributes, and content.

A Tag is the thing that indicates an element’s purpose. For example, the <p> tag indicates a paragraph of text is in that element, and the <li> represents a ‘list item’. You’ll notice they’re always surrounded by angle brackets. Opening and Closing tags mark the beginning and end of an element and wrap its content, like so:

<p>This is a paragraph.</p>

You can see the closing tag includes a / before its name; otherwise it would be another opening tag.

Always double-check that you’ve closed all your elements; otherwise, a browser can and will get mixed up trying to understand your HTML document.

Lastly, having elements inside of each other (“nesting”) looks like this:

<p>This is a sentence, with an <em>em</em> element ("emphasize") inside of it.</p>

or this:

<div id="main-container">
  <h1>The h1 tag indicates the primary header of the document.</h1>
  <p>Some text.</p>
</div>

In the above example, you can see our first case of an attribute. It starts with a lowercase name, and then is almost always followed by an = and a ‘value’ that’s surrounded in double quotes, “like this”. An element can have many attributes, in which case you separate them by spaces, as you’ll see soon. Attributes give information about an element in particular.

Pageflow

In most circumstances “normal flow” is the way that elements are laid out on a web page. Every element in HTML is inside a rectangular box. Shown on the picture below.

Screenshot of the CSSclasses GitHub page with elements highlighted with black borders.

Every element on the page highlighted.

In our example, each of these boxes are one of two different types: inline boxes or block boxes. So what exactly does this mean? Let’s start with block boxes.

Block boxes

Block boxes are stacked vertically one after the other in the order they’ve been written in the HTML file, and they usually occupy the whole width of the page. They normally start in the upper left corner and go down to the bottom.

Here is a small example with 3 div elements or 3 boxes. Don’t get confused by the additional CSS. It’s there for the purpose of making the boxes visible.

See the Pen CSSclasses Block Boxes by CSSclasses (@CSSclasses) on CodePen.

Inline Boxes

Inline Boxes work a bit differently. These boxes will also start at the upper left corner, but will arrange themselves horizontally.

Here’s an example of that as well.

See the Pen CSSclasses inline box by CSSclasses (@CSSclasses) on CodePen.

So HTML elements are by default either block boxes or inline boxes (of course, there are exceptions to this rule, but we don’t have to worry about that for now). For example, div is a block element, and so are headings like h1 or h2. span or strong on the other hand are inline elements. Here are lists for the different elements:

For now, keep in mind, that every box has some sort of display value.

HTML Boilerplate

There is some basic structure you don’t need to spend too much time on that is always there. Let’s handle this in a very quick walkthrough (code, line-by-line comments):

<!DOCTYPE html>
<!--This is a doctype. Every HTML file should have one.
Basically you only need this one nowadays, as this means HTML5 (what you're learning here)
for modern browsers but old browsers still pick up that your file is some kind of HTML.-->
<html>
<!-- Here the HTML starts, so we put an opening <html> tag here. -->
  <head>
<!-- Inside the <head> we can put some meta information… -->
    <meta charset="UTF-8">
    <title>Our Page Title</title>
<!-- … like charset and title. -->
  </head>
<!-- And we close our <head> element and open the <body>, where the actual content goes. -->
  <body>
    <h1>Hello world!</h1>
  </body>
</html>
<!-- And in the end we close the <body> and <html> tag. -->

And there we are, this is our first valid HTML file! Here it is again, so you can neatly copy&paste it:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Our Page Title</title>
  </head>
  <body>
    <h1>Hello world!</h1>
    <!-- put all the content here! -->
  </body>
</html>

Are you looking for a place to put your CSS? Don’t rush, we will come to that. At the moment, we are looking at HTML only. If you know what you are doing, you can skip over to the CSS part.

(Practical) Elements

Headings (h1-h6)

There is a hierarchy of heading elements that you can use for headlines. They start with h1 and end with h6.

<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>

Paragraph

This is the perfect tag if you want to markup text. Even this text is wrapped in a p.

<p>Some text</p>

Strong, em, break

These are some inline Elements that you can nest inside a paragraph. Strong and emphasis give some meaning to pieces of text, while break forces a linebreak.

<strong>Strong</strong> and <em>emphasis</em>,
<br>break

Images

The image tag is special as it is self-closing, it has no closing tag (like the break tag). It also has a special attribute, the src, which carries the path to the actual image. The alt attribute is an image description, which is displayed if for some reason the image does not load and always will be read to screen reader users.

<img src="https://placehold.it/664x442" alt="placeholder image">

placeholder image

Links take the user to another page. The tag is an a which stands for anchor. It comes with the href (hyper reference) attribute, that tells the browser where to go to. You can also add a title attribute that shows once the user hovers over it.

<a href="http://cssconf.eu" title="CSSconf EU">CSSconfEU</a>

Div

The div element is an element that does not have any special meaning or special styling. It’s perfect for grouping other elements together and assigning them a class or an id.

<div>I do nothing special</div>