Why use the HTML HTML tag

Entry: HTML tags - building websites

HTML entry: change pages

Most beginners do not learn HTML from scratch, but sit in front of a website that they want to change. Learning by doing is a classic approach that is not unusual even for newcomers to computer manufacturers and large software houses: You are presented with a program and are supposed to make small corrections and improvements. If you are lucky enough to inherit your first program from a good programmer or your first website from an experienced web designer, you will learn good programming practices right away.

Unlike a C programmer, we see the effect of every change directly when the page is opened in a browser. If something goes wrong, a run-up to the validator (https://validator.w3.org) can help track down the error.

HTML tags

Are tags with a beginning and an end Container or containers for information and structure the content. Usually the label consists of only a few letters and is an abbreviation for an English term.

<p>Absatz Paragraph</p> <h1>Überschrift Header<h1> <a href="http://wikipedia.de">Anker oder Link zu Wikipedia</a>

Most HTML tags come in pairs:

  • An opening tag

    tells the browser: »A paragraph begins here«, »From here it gets bold«.

  • A closing

    tag with a slash after the angle bracket says: "This is where the paragraph ends" and
    "No more bold text".
+ --- HTML attribute | + --- Value in single quotes | |<p>a text with a <a href="…">link</a></p> | | | | | | | + --- closing | | | HTML tag with | | | Slash | | | | | + --- closing tag | + --- opening tag + --- opening HTML tag

head and body

An HTML page consists of the page header (head) and the actual content (body). The head tag contains information about the website for browsers, screen readers and search engines. The browser does not display anything between and on the website.

<html> <head> <title>Meine Webseite</title> </head> <body> </body> </html>

The title tag in the head of the website is the only exception. Its content is displayed in the title bar of the browser window. What is in the title tag appears in the browser bar, is saved in the bookmarks and displayed as a heading in the search results. The title tag is the mother ship of all headings and the Google Search Console complains when the title of the page is missing.

Website structure

The website visitor only sees what stands between the opening and the closing tag.

HTML template without tags for the structure
<html> <head> <title>Meine Webseite</title> </head> <body> Lorem ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. … Sed dictum mauris euismod mauris. </body> </html>

The browsers ignore the line breaks in this simple HTML template and show a paste of text. The text needs HTML tags to get in shape.

Anything between

and

creates a line break and becomes a big bold heading; anything between

and

becomes a text paragraph with a line break.

Not only the reader, but also the search engines assume that concise headings say something about the content of the page.

...

Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Mauris ante neque, vehicula quis, convallis sit amet, vestibulum ornare, arcu.

Donec at lorem et elit congue dictum. Cras sapien ligula, rutrum quis, posuere id, faucibus id, risus. Maecenas sed est volutpat arcu adipiscing tempus. Sed dictum mauris euismod mauris.

The browser automatically breaks the text within HTML tags such as p or h1 if it becomes too wide for the browser window. There are special tags for a line break, but a web page appears on the phone, tablet and 30 "monitor, so we can never predict how wide the text will run in the visitor's browser.

Structure text

Line breaks in HTML markup are ignored, but certain HTML tags (also known as block tags) bring a line break with them.

h1, h2,… h6
creates graduated headings (HTML h1, h2, h3 ... heading - header)
p
creates a paragraph of text with a line break (p - paragraph of text)
ul, ol
generate unordered or ordered (numbered) lists (ul, ol, li • HTML enumerations)
Unordered lists are shown with a leading list item, ordered lists with an index. In both lists, each list element is enclosed in li tags.
div
The div tag combines several elements into groups and forms structures for the layout with CSS.
table
creates a table with tr and td tags (HTML table - tables)
tags within the tag represent the rows of the table. Within the tr tags are td or th tags for table cells.

Tags without line breaks

Left in the text, italic or bold text is marked by tags that do not lead to a line break (also as inline tags designated).

a
Link or »anchor«, is automatically underlined (HTML a link, anchor tag, hyperlink)
i, em
italic - slanted - font (em, strong, b, i italic / bold)
b, strong
bold font (em, strong, b, i italic / bold)
code
Representation as computer code (HTML code tag)

Overview: List of HTML tags with a short description

Images in HTML

Images, video and audio - »media« are linked to the website via the path to their folder and their file name.

img
Show images on web pages (img - images in HTML pages)
Video
Embed video in web pages ()

Nest HTML tags

Other tags may lie within a p-tag: Nesting is permitted. In the example, the a-tag lies between the opening and closing p-tag.

<p>HTML für die Struktur, <a href="https://www.mediaevent.de/css/">CSS</a> für das Aussehen</p>

HTML cannot do anything against the colors that an a-tag brings in the browser. CSS must be used for this.

Nesting HTML tags has its limits. Which tags are allowed in an element is specified for each element. For example, a p-tag may not have a div tag or a table with the table tag. Which tags can be used within another tag must therefore be checked for each HTML tag.

There are also HTML tags that do not have an end tag (referred to as "void" in the standard).

<img src="bild.png" width="100" height="100" alt=""> <br>

Examples of "empty" tags without an end tag are img, br, link, meta, and input.

HTML tags can be nested, but the end of an HTML tag cannot cross another opening tag:

<p>Hier ist der <a href="eineSeite.html">Link</p></a>

Engage and disengage

At the beginning of this page is the term good programming practice like. The indenting and indenting of the nested HTML tags is part of it: not just a good HTML style, but a better overview of the nested structure is the bonus.

Many code editors such as BBEdit and Brackets fold nested elements, which helps with troubleshooting, if the HTML framework does not want to bend to the CSS rules again.

Comments in HTML

HTML comments are special HTML tags: What is between the opening and closing comment tags is not displayed on the page by the browser, does not create a line break and does not take up any space. HTML comments are used to document the source text, but also for special instructions.

<!-- Kommentar im HTML-Quelltext -->

HTML comments help, for example, to better recognize the beginning and end of an HTML div tag in the source text.

<div class="main"> … </div><!-- Ende Block main -->

"Conditional comments" had a special function in the past: They filtered CSS rules for old Internet Explorer such as IE8 and IE9. Your days are numbered, because as of IE10 Internet Explorer no longer listens to conditional comments.

External sources