TAGS
The
basic structure of an HTML document includes tags, which surround the content
and apply meaning to it.
Change
the text of your document (myfirstpage.html) to look like this:
<! DOCTYPE html>
<Html>
<Body>
This
is my first web page
</
Body>
</
Html>
Now
save the document again, return to the browser and reload the page.
The
appearance of the page has not changed at all, but the purpose of HTML is to
apply meaning, not presentation, and this example has defined some key elements
of a web page.
The
first line at the top, <! DOCTYPE html> is a document type declaration
and allows the browser to know what flavor HTML is using (HTML5, in this case).
It is very important to stick this in - If you do not, browsers will assume
that they really do not know what they are doing and act in a very peculiar
way.
To
get back to the point, <html> is the opening tag that starts things up
and tells the browser that everything between that and the closing tag </
html> is an HTML document. The material between <body> and </
body> is the main content of the document that will appear in the browser
window.
Close tags
The
</ body> and the </ html> put an approach to their respective
elements (more about elements at a time).
Not
all labels have close tags like this (<html> </ html>) Some tags, which
do not wrap content will be closed. The line break tag, for example, looks like
this: <br> - a line break does not contain any content so that the tag
cheerfully sits by its lonely self. We will find these examples later. All you
need to remember is that all tags with content between them must be closed, in
the format of opening tag → content → closing tag. It is not, strictly
speaking, always a requirement, but it is a convention we are using in these
tutorials because it is a good practice that results in a cleaner code, easier
to understand.
You
can find "auto-close" tags, so a br tag, for example, will look like
"<br />" rather than simply "<br>". This is a
remnant of XHTML, a form of HTML based on another markup language called XML.
HTML5 is much more relaxed than XHTML and will be happy with any format. Some
developers prefer one way, others prefer the other. We tossed a coin and
decided to stick with the simpler version.
ATTRIBUTES
Labels
can also have attributes, which are additional bits of information. The
attributes appear inside the opening tag and their values are enclosed in
quotation marks. They look something like <tag attribute =
"value"> Margarine </ tag>. We'll find the tags with
attributes later.
Again,
the quotes are not always essential, but it is a convention of good practices
that HTML Dog uses to achieve consistency and clarity. We suggest you do the
same.
ELEMENTS
Tags
tend not to do much more than mark the beginning and end of an element. The
elements are the bits that make up the web pages. You would say, for example,
that everything that is between (and includes) the <body> and </
body> tags is the body element. As another example, while
"<title>" and "</ title>" are labels,
"<title> Rumple Stilt skin </ title>" is a title element.