Elements and attributes
Elements
An HTML page consists of HTML elements. These elements are deliniated with
the help of tags. The name of a tag in HTML is always written in small caps.
Usually there is a start tag, represented by the symbols < and > and an end
tag represented by the symbols </ and >. In some cases only a start tag is required.
This start tag is then closed with the /> symbol.
<h1>Elements and attributes</h1> : An element with a start tag and an end tag.
<link href="HTML_en_css.css" rel="stylesheet" type="text/css" /> : An element
using only a start tag.
HTML elements are nested, meaning that there is a tree structure of elements. In
this example, and in almost every web page, the <html> element is at the highest
level. This is called the root element. Below the root element you will usually find
the <head> and the <body> element. The goal of these elements is explained on
the structure page.
Attributes
Attributes further specify an element. They are always places inside the start tag
and have the format: attribute name="attribute value". Multiple attributes are
separated by a space.
<a href="structure.html">structure</a>: The attribute href is assigned the
value structure.html. This attribute indicates the page that the hyperlink points
toward.
Syntax rules
An HTML document has to adhere to strict (= moet voldoen aan strikte regels voor
de Syntax) syntax rules.
• Every tag has to be closed. If an element only consists of a start tag, one
must use the /> symbol to close the starting tag.
• All tags have to be nested correctly. Every tag needs to be closed within the
enveloping element.
• Inline elements should not contain block level elements. Block level
elements provide structure to the page and are placed below each other by
default. Examples are p and div. Inline elements follow the flow of the text.
1
, The anchor element (<a>), which is used for hyperlinks, is an example of an
inline element.
• Element and attribute names are written in lower case letters.
• All attributes need values and should be enclosed in double (" and ") or
single (' en ') quotes.
• Character entities should be used to represent special characters. For
instance, < is written as <. Other examples are & for &, > for >
and " for ".
Structure
This page teaches you more about HTML structure.
The non-content elements
At the top of an HTML page you will find some elements that are not part of the
content shown to the user. The first element is the doctype declaration. In the age of
HTML5 this is very simple: <!DOCTYPE html>. The doctype declaration indicates
to the browser which version of HTML is used in the page.
After the doctype declaration we find the html element.
<html>
This element contains all other elements - it is the root element of the page.
Next we find the head element, which can contain a few child elements.
The title element contains the name of the page, which is presented in the brower
window bar.
<title>Example website HTML and CSS</title>
The link element is very important. It is used to connect the webpage to external
documents, such as a CSS document. <link href="HTML_en_css.css"
rel="stylesheet" type="text/css" />
Elements used to provide structure
The most important element to provide structure is the div element (although
HTML5 introduced some other important elements next to the div element with a
better defined semantic meaning, such as "article" or "aside"). By including content
in a div element is can be independently targetted using CSS. In the example we
included two div elements, one for navigation and one for the content. There are
two important attributes - the id attribute and the class attribute. Using the id
2
Elements
An HTML page consists of HTML elements. These elements are deliniated with
the help of tags. The name of a tag in HTML is always written in small caps.
Usually there is a start tag, represented by the symbols < and > and an end
tag represented by the symbols </ and >. In some cases only a start tag is required.
This start tag is then closed with the /> symbol.
<h1>Elements and attributes</h1> : An element with a start tag and an end tag.
<link href="HTML_en_css.css" rel="stylesheet" type="text/css" /> : An element
using only a start tag.
HTML elements are nested, meaning that there is a tree structure of elements. In
this example, and in almost every web page, the <html> element is at the highest
level. This is called the root element. Below the root element you will usually find
the <head> and the <body> element. The goal of these elements is explained on
the structure page.
Attributes
Attributes further specify an element. They are always places inside the start tag
and have the format: attribute name="attribute value". Multiple attributes are
separated by a space.
<a href="structure.html">structure</a>: The attribute href is assigned the
value structure.html. This attribute indicates the page that the hyperlink points
toward.
Syntax rules
An HTML document has to adhere to strict (= moet voldoen aan strikte regels voor
de Syntax) syntax rules.
• Every tag has to be closed. If an element only consists of a start tag, one
must use the /> symbol to close the starting tag.
• All tags have to be nested correctly. Every tag needs to be closed within the
enveloping element.
• Inline elements should not contain block level elements. Block level
elements provide structure to the page and are placed below each other by
default. Examples are p and div. Inline elements follow the flow of the text.
1
, The anchor element (<a>), which is used for hyperlinks, is an example of an
inline element.
• Element and attribute names are written in lower case letters.
• All attributes need values and should be enclosed in double (" and ") or
single (' en ') quotes.
• Character entities should be used to represent special characters. For
instance, < is written as <. Other examples are & for &, > for >
and " for ".
Structure
This page teaches you more about HTML structure.
The non-content elements
At the top of an HTML page you will find some elements that are not part of the
content shown to the user. The first element is the doctype declaration. In the age of
HTML5 this is very simple: <!DOCTYPE html>. The doctype declaration indicates
to the browser which version of HTML is used in the page.
After the doctype declaration we find the html element.
<html>
This element contains all other elements - it is the root element of the page.
Next we find the head element, which can contain a few child elements.
The title element contains the name of the page, which is presented in the brower
window bar.
<title>Example website HTML and CSS</title>
The link element is very important. It is used to connect the webpage to external
documents, such as a CSS document. <link href="HTML_en_css.css"
rel="stylesheet" type="text/css" />
Elements used to provide structure
The most important element to provide structure is the div element (although
HTML5 introduced some other important elements next to the div element with a
better defined semantic meaning, such as "article" or "aside"). By including content
in a div element is can be independently targetted using CSS. In the example we
included two div elements, one for navigation and one for the content. There are
two important attributes - the id attribute and the class attribute. Using the id
2
