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:
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 just like this:
or this:
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.
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 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 simple example. Don’t get confused by the additional CSS. It’s just there for the purpose of making the boxes visible.
See the Pen CSSClasses Block Boxes by Kevin Lorenz (@verpixelt) on CodePen.
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 Kevin Lorenz (@verpixelt) 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 just 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):
And there we are, this is our first valid HTML file! Here it is again, so you can neatly copy&paste it:
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.
Paragraph
This is the perfect tag if you want to markup text. Even this text is wrapped in a 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.
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 a placeholder, if for some reason the image does not load.
Links
Links take the user to another page. The tag is simply 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.
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.