Document Structure
An HTML document has some requirements in order to be rendered correctly. Most browsers try to guess the meaning of the document if it is not correctly set up. Thus you might end up with the right result, but it can be implemented incorrectly. This may lead to your page looking differently across browsers, because browsers guess differently. To ensure that your page looks consistent across browsers should write HTML correctly.
The correct way to set up an HTML document is like this:
I'll now give an explanation of the elements present in the setup, namely <html>, <head>, <body>, and the document declaration <!DOCTYPE html>.
Document declaration
At the top of the document, you should have a document declaration, telling your browser how to read the document. Writing <!DOCTYPE html> tells the browser to read the document as a HTML5 page.
Html
The `<html>` element encloses everything on the page. All your code should be within those opening and enclosing tags.
The child elements of `<html>` is the `<head>` and `<body>` elements.
Head
This element contains information about the document, and will not be rendered in the browser. Examples are link to resources, metadata, and the title shown in browser tabs.
Below are some useful tags to know:
<meta charset="UTF-8"> tells the browser how to interpret characters. Using UTF-8 you can display nordic characters correctly. There are also other uses for the meta element. Look here for more information.
<title> is the title of the page and is usually shown on the tab for that page, and should reflect both the title on your page and where on the site the user is.
<link href="style.css" rel="stylesheet"> includes a stylesheet for your document, separating your style from the document. Link can also include other resources, look here for more information.
Body
Everything inside the body is shown inside the browser window, and thus is the content of your page.
The elements inside the <body> element are often either inline or block elements, depending on their default display value.
Block level elements always start on a new line and takes up the full width available. Examples of block level elements are:
div
h1 - h6
p
form
Inline elements does not start on a new line, and only takes up as much width as necessary. Examples of inline level elements are:
span
a
img
It will become clear later on what these example elements are. Just remember that block levels start on a new line, while inline elements stay on the same line.
You can read about all the different display values here, but note that display is a CSS property, and block and inline are the two values you should know at this point.
Last updated