HTML documents consist of elements that are identified by so-called tags. You can recognize tags by angle brackets. Almost all HTML elements are characterized by an introductory and closing tag. What is in between is called the scope.
An example:
<h1>PSD-Tutorials.de - your graphics, web & learning portal</h1>
This syntax is used to write a first-order heading in the document. The introductory <h1> tag informs the browser that this is just such a heading. The closing < ;/h1> ends the heading. You can recognize closing tags by an opening angle bracket followed by a slash </.
A question arises regarding the spelling of element names: What does it actually look like with upper and lower case? As already described, the focus in this series is on HTML5. Here you can actually choose between upper and lower case. Personally, however, I favor a consistent use of lowercase letters and will continue to do so in this series. In principle, the following things would be correct according to HTML5:
<h1>PSD-Tutorials.de - your graphics, web & learning portal</h1> <H1>PSD-Tutorials.de - your graphics, web & learning portal</H1> <h1>PSD-Tutorials.de - your graphics, web & learning portal</H1>
Elements that you open must also be closed again. So if you set a <h1>, you must also close it again after the end of the heading definition </h1>. There are exceptions to this in HTML5, such as list entries and paragraphs, but more on this later.
Incidentally, there are also so-called standalone tags in HTML. These consist of just one tag, not a start and end tag. A typical example of this is <br />.
This is a line.<br /> This is another line.
This <br /> ; defines a line break.
Such empty tags are usually closed with a slash, even if this is not absolutely necessary in HTML5. The following would also work here:
<br>
You will get to know more of these standalone tags in the course of this series.
Nesting elements
HTML elements can also be nested. Imagine you want to italicize a passage within a heading. The i element is used for italics.
<h1>PSD-Tutorials.de - <i>your graphics, web & learning portal</i></h1>
Pay attention to the correct order when nesting. The last element to be closed is the one that was opened first. In this case, this is the h1 element.
Using attributes
So-called attributes can be defined within opening tags or standalone tags. These attributes can assign additional properties to elements. In earlier HTML times, a comparatively large number of attributes were assigned to elements. This was simply due to the confusion between structure and design. For example, color definitions were transferred directly to the HTML element via a corresponding attribute. In the meantime, a strict separation of design and structure is possible - also thanks to CSS, of course - and this should be adhered to. As a result, there are comparatively few attributes that are still used.
One important attribute is id. This attribute can be used to assign a unique name to an HTML element, which can then be used to address it via CSS or JavaScript, for example.
<h1 id="head">PSD-Tutorials.de - your graphics, web & learning portal</h1>
To assign an attribute, insert a space after the h1. This is followed by the name of the attribute, which is usually written in lower case. The attribute name is followed by the equals sign. The attribute value is then placed in quotation marks.
Incidentally, you can also assign several attributes to an element. For example, it is quite common to define a so-called class and an ID for an element. Here is another example: The heading is uniquely identified via id. The class, on the other hand, is used to assign the heading to a specific category. This allows you to specify that all elements to which the class blue is assigned are displayed in blue. (More on this CSS and color topic later, of course).
<h1 id="head" class="blue">PSD-Tutorials.de - your graphics, web & learning portal</h1>
In this case, the attributes are separated by a space.
Validate the code
You have now learned some basic syntax rules. It is important to stick to these rules, especially at the beginning when you are learning HTML. Once you get into the wrong habit, it is difficult to get it out of your head. You should therefore always check your HTML code for correctness or have it validated. Of course, you don't have to do this yourself. There are appropriate online tools for this. You can find a so-called validator at http://validator.w3.org/, for example.
It is best to switch directly to the Validate by direct Input tab. Here you can copy and paste the HTML code to be checked directly. Make sure to insert the complete code of the file, including the DOCTYPE specification.
To test the validator, paste the following into the text field and then click on the Validate button.
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de - your graphics, web & learning portal</h1> </body> </html>
The result should look like this:
Everything is fine here. (You don't have to worry about the two warnings in this case). If the message This document was successfully checked as HTML5! appears, everything is indeed OK. But what happens if an error occurs? You can simply insert an error into the syntax on purpose.
<h1 id=head">PSD-Tutorials.de - your graphics, web & learning portal</h1>
The introductory quotation mark for head was forgotten here. If the syntax is now validated again, the error is recognized.
The validator then issues a corresponding message. You can see exactly what went wrong in the lower section of the window.
The error is also clearly described here.
Line 8, Column 12: " in an unquoted attribute value. Probable causes: Attributes running together or a URL query string in an unquoted attribute value.
<h1 id=head" >PSD-Tutorials.de</h1>
You can therefore see directly in which line an incorrect entry was made and can correct it. The validator therefore helps you to create clean HTML code. You should always have your code validated. This is because browsers often display HTML code correctly even though the syntax is incorrect. In other browsers, however, in which you do not test your pages, this can look completely different.
