A tag is a HTML element. Each HTML element has its own usage.
A tag is created by using < and > and the tag-name in between those two brackets.
Most tags have to get closed by using the same tag with a / before the tag-name.
However there are also some self-closing tags, which as the name says don't have to get closed.
<!-- Regular HTML element -->
<p>This is a paragraph.</p>
<!-- Self-closing HTML element -->
<br>An attribute is added to a tag. These attributes add additional information for the tag.
An attribute is created by using the attribute-name and adding ="" if it needs a value. The value is written in between those two "".
If the attribute doesn't need a value you don't have to add something, the attribute-name is enough.
<!-- Attribute with value -->
<a href="https://lukat.lu/">This is a link.</a>
<!-- Attribute without value -->
<a href="https://lukat.lu/ico/icon.png" download>This is a downloadable link.</a><!DOCTYPE html> just tells the document that it has HTML5 Standards.
The lang attribut is to define your Website language.
The charset UTF-8 as example has europeen charachters such as ä, ö, ü.
Just enter your Website Title in <title></title>, it is usually shown at the top of the Browser.
Last tag, the <link rel="stylesheet" type="text/css" href="path_to_file.css"> includes your external stylesheet. Enter the path to your stylesheet in the attribute href.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="path_to_file.css">
</head>
<body>
</body>
</html>With every Browser that supports HTML5.
<link rel="icon" ...> is used to include an icon.
This icon is normally shown next to the title, at the top of the browser.
The attribute type defines the type of the image, in the example image/png.
The attribute href is the path to the file and the attribute sizes defines the size of the image.
<link rel="icon" type="image/png" href="ico/16.png" sizes="16x16">
<link rel="icon" type="image/png" href="ico/32.png" sizes="32x32">
<link rel="icon" type="image/png" href="ico/96.png" sizes="96x96">
<link rel="apple-touch-icon" type="image/png" href="ico/icon_bg.png">
<link rel="apple-touch-icon" type="image/png" href="ico/152.png" sizes="152x152">
<link rel="apple-touch-icon" type="image/png" href="ico/167.png" sizes="167x167">
<link rel="apple-touch-icon" type="image/png" href="ico/180.png" sizes="180x180">The following meta tag needs to be placed in the <head>.
This tag allows you to scale the webpage on a mobile browser. This makes it easier to design your mobile webpage.
The initial-scale parameter defines the scale factor of the webpage. The user-scalable parameter defines if mobile users can zoom into the webpage or not.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">With mobile Browsers.
