HTML and CSS Reference
In-Depth Information
HTML5, CSS, and JavaScript features
As I noted, HTML documents are text, so how do we specify links, pictures, formatting, and coding? The
answer is in the markup, that is, the tags. Along with the HTML that defines the content, youll typically
find CSS styles, which can be specified either inside the HTML document or in an external document. You
might also include JavaScript for interactivity, again specified in the HTML document or in an external
document. Well start with a look at how you can build simple HTML tags, and how you can add inline CSS
and JavaScript all within the same document.
Basic HTML structure and tags
An HTML element begins with a starting tag, which is followed by the element content and an ending tag.
The ending tag includes a / symbol followed by the element type, for example
/head
. Elements can be
nested within elements. A standard HTML document looks like this:
<html>
<head>
<title>Very simple example
</title>
</head>
<body>
This will appear as is.
</body>
</html>
Note that Ive indented the nested tags here to make them more obvious, but HTML itself ignores this
indentation (or whitespace, as its known), and you dont need to add it to your own files. In fact, for most
of the examples throughout this topic I wont be indenting my code.
This document consists of the
html
element, indicated by the starting tag
<html>
and ending with the
closing tag:
</html>
.
HTML documents typically have a
head
and a
body
element, as this one has. This
head
element contains
one element,
title
. The HTML title shows up different places in different browsers. Figure 1-3 shows the
title, "Very Simple Example" at the top-left portion of the screen and also on a tab in Firefox.
Figure 1-3.
The HTML title in two places in Firefox
