Some tags don't have to get closed!
A tag is a HTML element. Each HTML element has its own usage.
A tag is created by using
> 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 -->
Some attributes don't need a value.
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>
HTML5 Basic Structur
Make sure to write this correct to make it HTML5 valid. Example: Do not forget the '!' in the <!DOCTYPE html> tag.
<!DOCTYPE html> just tells the document that it has HTML5 Standards.
lang attribut is to define your Website language.
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
<link rel="stylesheet" type="text/css" href="path_to_file.css">
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.
type defines the type of the image, in the example
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">
Mobile Webpage - Viewport
The following meta tag needs to be placed in the
This tag allows you to scale the webpage on a mobile browser. This makes it easier to design your mobile webpage.
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.