HTML - The structure of websites

Table of Contents

The Hypertext Markup Language (short HTML) is a text based language which is usually used to build up the structure for a webpage.

HTML is NOT a programming language due to the fact, that you can’t implement processes or logic with HTML.

Sime exampe for a HTML file

<!doctype html>
<html lang="de">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title of the page</title>
  </head>
  <body>
    <p>This text will be displayed in the browser.</p>
  </body>
</html>

What did we define here?

<!doctype html>
- It is a HTML 5 file
<html lang="en">
- Start of the html area and define the language of the page
<head>
- Start of the head area of the website
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- The viewport of the webpage adjusts itself to the size of the clients device
- To learn more about what the Viewport is look HERE.
<title>Title of the page</title>
- This will be shown in the tab of the browser
</head>
- End of the head area
<body>
- Start of the body area
<p>This text will be displayed in the browser.</p>
- Display a “paragraph” with the given text inside it
</body>
- End of the body area
</html>
- End of the html area

Result

What are HTML-tags?

Basically a webpage consists of HTML tags, which most of the time always have a start- and an end-tag: <tag></tag>

Examples:

<html></html>
<head></head>
<body></body>
<p></p>

Each “tag” has a special functionality. The most important HTML-tags can be looked up here: https://www.w3schools.com/tags/ref_byfunc.asp

But there are some exceptions which do not require an End-tag. Examples:

<meta />
<img />
<input />
<br />
<hr />

What are attributes?

Attributes are additional information that can be stores inside an HTML-tag:

Examples:

href in <a> Tags
src in <img> Tags
type in <input> Tags

These attributes are very dependent on each HTML-tag itself. Some of these attributes are required while others can be optional.

Universal attributes can be added to all HTML-tags. These are:

class
id
style
tabindex

class, id and style are primarily used for styling, see Specificity – The priority in CSS for more information.

Of course there are more “globally” used attributes:
https://www.w3schools.com/tags/ref_standardattributes.asp

What is the DOM?

The Document Object Model (short DOM) is the tree structure which results from the given HTML-tags.

Here is a nice visualisation from W3Schools:

DOM HTML tree — Source: https://www.w3schools.com/js/js_htmldom.asp

This “Document” object can also be accessed via JavaScript to adjust the given DOM or perform check on it.

If you have an invalid DOM (e.g. a <div> is opened but never closed with a </div>) the browser usually tries to compensate or adjust accordingly but if you have to many errors in your DOM you will have very strange errors or problems on your webpage.

Thats why you should regularly check your DOM with the W3C Validator (https://validator.w3.org/) and fix at least the errors, if not also the warnings.

Share this post

HTML – The structure of websites