HTML – From Origins to Benefits

The underlying function is based on the fact that images, texts, videos, or other files are represented electronically in the markup language and can thus be understood universally and independently of the web browser, provider, etc.

History of HTML

Starting in the year 1990, a way was sought for the internet to design consistent rules, especially with regard to published information. This information was to be prepared in such a way that it would be available to and readable by any software – that was the Hypertext Markup Language, known as HTML.

Even before the internet went public, the Briton Tim Berners-Lee designed the basic framework of HTML. At first, he focused on scientific information that was to be exchanged over the internet. Nevertheless, this was the beginning of HTML, which has been continuously renewed and optimized ever since. Today, HTML is developed continuously and without version numbers as the “HTML Living Standard” of the WHATWG.

An HTML element usually consists of an opening tag (e.g. <a>), the content, and a closing tag (</a>). A “tag” is therefore only the markup in angle brackets, while the “element” encompasses the opening tag, content, and closing tag together. Attributes appear in the opening tag and supplement the element, e.g. href for links as well as src and alt for images.

What do you do with HTML?

HTML is above all there so that information can be passed on universally, not dependent on the provider, program, web browser, or provider, but rather readable by all devices in the same way. With this hypertext you can, for example, form web pages that can display chapters, headings, colors, backgrounds, graphics, and much more by means of special codes.

The focus is on developing a consistent structure that is then used worldwide. CSS also plays an important role here; this stands for Cascading Style Sheets, which helps to format the content. The main purpose of CSS is presentation, based on the area and the content. HTML and CSS in combination can therefore provide a structuring and presentation of content, for example by means of web pages.

With HTML5 came semantic structural elements that describe the makeup of a page in terms of content – such as <header>, <nav>, <main>, <article>, <section>, and <footer>. They improve machine readability, accessibility (screen readers), and SEO. Purely presentational elements such as <center> or <font>, by contrast, are considered outdated (deprecated) and should be replaced by CSS – appearance belongs in the stylesheet, not in the HTML.

HTML and SEO?

HTML is also important for search engine optimization (SEO). There are several factors with which visibility in search engines can be improved through HTML.

The title tag is a good example, because it determines the title of the article. Through keyword research, the most important keywords are searched for first; the main keyword should be at the beginning of the title. This way Google can directly determine what it is about. Poor labeling or a keyword that does not appear in the title can lead to the article being disregarded in the ranking.

Another important aspect is the meta description. It is not an automatic excerpt of the first characters of the article, but a self-contained <meta name=“description“> element whose text (around 155 characters) is defined freely and can appear as a preview snippet in the search results. Many systems such as WordPress offer a field for this; manually, the tag looks like this:

<meta name="description" content="Short page description">

Modern web pages are based on three building blocks with a clear division of tasks: HTML provides the structure and the content (headings, texts, images), CSS handles the design (colors, layout, typography), and JavaScript ensures behavior and interactivity (e.g. form validation, dynamic content). This triangle of “structure – design – behavior” is the common entry-level model.

There are many more HTML markups that support SEO, such as the heading tags – SEO and HTML go hand in hand. Anyone who wants to do optimal SEO marketing should bring along basic knowledge of HTML. More on this in our guide to search engine optimization.

HTML Code

Every HTML file begins with a basic framework that is structured the same way in every file and is filled in individually on each page.

The basic framework (<!DOCTYPE html>, <html>, <head>, <body>) is a starting schema that is adapted individually on each page – the <head> with title/meta, the <body> with the visible content. It also contains elements that remain invisible in the finished document, such as details in the <head> area (not to be confused with the visible <header> element).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title</title>
<meta name="description" content="Short page description">
</head>
<body>
<!-- Visible content of the page -->
</body>
</html>

Creating HTML: How does it work? Which program?

There are various programs with which you can create HTML files, for example:

• Windows Notepad
• Microsoft Editor
• HTML editor
• Nvu
• BlueGriffon (also for Mac)
• Adobe Brackets (also for Mac)
• Visual Studio Express

The exact process of creating an HTML file depends on the program, but the basic principle remains the same. In just three steps, for example, an HTML file can be created in Windows Notepad.

Step 1:

Open Windows Notepad, which can always be found in the “Windows Accessories” area.

Step 2:

Copy the HTML basic framework into the file. The basic framework can be taken from this article.

Step 3:

This HTML file must now be saved via “Save As,” whereupon a new window opens. Now .txt can be selected under the File type field, and then the extension must be changed from .txt to .html. “Save” and the HTML file has already been created.

Quellen

• Polaris Systems, Entstehung und Zweck von HTML: https://www.polaris-systems.de/tutorials-beitrag/entstehung-und-zweck-von-html.html
• Code Crowd, 10 wichtige HTML Tag: https://code-crowd.de/blog/die-10-wichtigsten-html-tags/
• Wiki.selfhtml, HTML Tutorial: https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Grundger%C3%BCst