HTML and CSS Reference
In-Depth Information
Several elements do not have end tags. These are called
void
elements. A void element should not contain any
content and therefore does not have an end tag. I point out these elements as the topic progresses.
The <html> Element
Open your
index.html
file in your text editor again (if you've closed it) and take a look at the second line of the
code, and the very last line:
<html>
…
</html>
The DOCTYPE Declaration
Take a look at the first line of the code:
<!DOCTYPE html>
The DOCTYPE is a small piece of code that should be placed at the start of each web page to indicate which
standard the respective page complies with. The DOCTYPE in this example indicates the code is compliant with
HTML5.
When you open a web page in your browser, the browser looks for a DOCTYPE declaration. It examines the
DOCTYPE to decide whether the page is using modern web standards, such as HTML5, or if it was designed to
work with older browsers. The browser then uses this information to determine how to interpret the code and dis-
play it on the screen.
These lines indicate the start and end of the <
html>
element. The
<html>
element is the root of an HTML docu-
ment. This means that it should contain all your HTML code. The only code that should not be placed within this
element is the DOCTYPE declaration (see sidebar). You can see that all the other elements (the
<head>
and
<body>)
are nested within the
<html>
element in your code.
Attributes
Start tags can also contain additional information by using
attributes.
These attributes contain a
value
(or a set of val-
ues) and are listed before the tag is closed with the > sign. Here's an example, the <
img>
element. The <
img>
ele-
ment is used to add an image to your web page. Note that this is a void element so it has no end tag.
<img src="image.jpg" width="300" height="100"
alt="A description of the image.">
This image element has four different attributes:
src
,
width
,
height
, and
alt
. Each of these attributes is as-
signed a value that passes some information to the browser. The value is placed within quotation marks. This ex-
