Now we open the file in a browser and voilà!
Notice how the content of the <title> element appears at the top of the browser tag.
Mike: How did you open the file in the browser?
Professor: O h yes, so rry a bout that. Inside Notepad++, I chose
Run→Launch in
Chrome
. If you use anoth er browser, it will automatically app ear under the Run menu
item in your Notepad++. You can of course also simply double- click the file or drag
and drop it into the br owser. On ce the file is open in the browser, you don’t have to
repeat th is operation. If you modify the source code—the origin al HTML code, that
is—you simply refresh the browser window. I f you use Chr ome like I do, you can do
that by pressing
F5. La te r, you will use mo re than a single file to build a page. In that
case, you w ill sometimes have to force reload all files of a page, which you can do
by pressing
Ctrl+F5 on Chrome. On Windows, to switch between the text editor and
browser quick ly, you press
Alt+Tab, a standard key combination for switch ing between
running tasks.
Maria: What would happen if we forgot to include the <title> elemen t?
Professor: Nothing fatal, to be honest. One of the basic rules of rendering web pages
is that the browser always tries its best to show the content. Of course, if the document
isn’t fully formatted according to the recommendations, the results are sometimes not
in our favor. If you forget the title, then the name of the file containing the document
usually takes over its role. If nothing else, that looks ugly and unprofessional.
1.4 Minimal HTML Document
Professor: One of the general prerequisites to good technical design is simplicity,
which should not be confused with minima lism. In our last example, we saw a truly
minimal HTML document, which you will rarely see in pr actice. Even with no extra
content it is n ormally a good idea to flesh out this skeleton HTML document. For in-
stance, most web developers share the belief that the trad itional <head> and <body>
elements can contribute to clarity, by cleanly separating your document into two sec-
tions. You pack all the content into the <body> section, wh ile the other informa tion
about your page goes to th e <head> section. Sometimes it is also a good ide a to wrap
both these sections in the tra ditional <html> element:
<!DOCTYPE html>
<html>
<head>
<title>The Smallest HTML Document</title>
</head>
4 Meeting 1. Content and Structure
<body>
<p>But it’s my only line!</p>
</body>
</html>
Mike: I noticed that an element can contain not only text but another element as we ll.
For example, you placed the <ti tle> ele ment within the <hea d> element.
Professor: Good o bservation! T he content of an element can in fact be a ny valid
HTML conforming to the rules of that specific eleme nt. We call puttin g one element
into another nesting. Wh en an element is nested (contains othe r HTML elements), it
is imp ortant that it contains whole elements, inclu ding start and end tags. So if, for
example, an <elementA > starts before an <elementB >, th en it must by all mean s
end after the <elementB >:
<elementA > ... <elementB > ... </elementB > ... </elementA >
The element that is contained inside another element inherits some of its behavior,
and we often say that the contained element is a descendant of its owner, which is in
turn its parent. The direct descendant is also called a child. Th is concept will become
especially important when we come to styling elements with CSS. Now I only mention
it so that later the terms will already sound familiar to you.
Maria: What are those p eriods inside?
Professor: Oh, yes. A set of three periods is an ellipsis. An ellipsis indicates the
omission of content that is not important for u nderstandin g the explanation.
We will soon come back to our last example and furnish it with a little more. For
that purpose we need another element called <meta>. This element is used to pro-
vide additio nal page description (so -called metadata), which is not displayed on the
page, but can be read by a machine. The informa tion stored in the <m eta> element
includes keywords, author of the documen t, character en coding, and other metadata.
The <meta> element has neither content nor the closing tag:
<meta>
An element that is composed only of the opening tag is called an empty or void ele-
ment.
Mike: I don’t understand that. Where do you p ut all the information you talked about
if there is no content?
Professor: That’s the job for attributes. An attribute is the means of providing addi-
tional information about an HTML element. For example, by using the s rc attribute
on the <img> element, one can tell the browser where to find the image to display.
There are two things you should know about attributes: they are always specified after
the element name in the start tag, and they come in name/value pairs like this one:
1.4. Minimal HTML Document 5
name="value"
The quotes ( double style are the most common, but single style quotes are also al-
lowed) around the value are not necessary under HTML5, as long as the value doe sn’t
contain some restricted character (mostly =, >, or a space). That said, it is still a good
practice that you always use quotes. Your code will look clean er and more readable,
which in turn lessens the possibility of errors. Likewise, it is not necessary that you
use lower-case names and values, although it is recommended that you do so.
Some attributes do not have values. All that counts is their presence: they are either
present or not, similar to an electrical switch, wh ic h can be put in on o r off position .
That type of attribute is called a Boolean attribute after an English mathematician,
George Boole, the inventor of the so-ca lled Boolean log ic based on only two values.
Because Bo olean attributes have no value (the value is implied by their presence or
absence), we omit the equals sign as well:
name
There are often cases when an element has more than on e attribute. In that case the
attributes are separated by spaces.
If I confused you with all this theoretical talking, don’t worry. I will now show you
how this works in practice.
Maybe you’ve already heard about the character encoding. Basically, that’s a system
that tells you how each character of a given repertoir e is represented physically. In
a computer, this physical representation consists of a series o f ones and zeros, called
bits. Relax, I’m not going into more detail with this explanation. T he important thing
is that the browser mu st know what enc oding has bee n used to store the document
text so it can read it back and show it properly. If you don’t provide the encoding
informa tion to your markup, a browser will of cou rse try to g uess it, which may drive
it into an obscure security issue. You should provide this info rmation through the
charset (that’s short for character set) attribute of a <meta> element, assigning it the
value utf-8. Tod ay, more than half of all web pages are encoded in UTF-8 and
honestly, I don’t think you will ever need to use a character that is not in cluded in
UTF-8.
Let’s check if y ou followed me. Can you a dd a <meta> element containing a ch aracter
encoding attribute to our previous example without my help?
Maria: You didn’t tell us in which section to put it. Let me think
.... You said that the
content went into the <body> and all the other information in the <head>. Something
like the following code, perhaps?
<head>
<meta charset="utf-8">
<title>The Smallest HTML Document</title>
</head>
6 Meeting 1. Content and Structure
Professor: Exactly! One more thing h ere: when saving your work, don’t forget to save
it in UTF-8. For example, if you edit your document with Notepad (on Windows) th e
Save As dialog box lets you choose UTF-8 from the Encoding list at the bottom. In
Notepad++ , there is a top-level menu
Encoding, und er which you select En co de in
UTF-8
.
Maria: Is the order of the above elements within <head> important?
Professor: Not really. HTML5 only specifies that the ch aracter encoding declaration
must be within the first 1024 bytes of the document. Translated into English, always
include it as early as possible.
Mike: What if I wanted to write a page in some other language than English?
Professor: T he encoding ha s nothing to do with the natural langua ge of your we b
page. It only define s the set of characters you will use and, as I said before, you
will hardly ever need a character (English or non-English) that is not a part of UTF-
8. I’m glad you asked that, though. Your question takes us to the one last thing
we should add to our basic document. Specifying a web page’s natural language
is considered a good style by many as it can be a useful piece of information for
many users—for example, for filtering web search results by language. Interestingly,
as far I as I know, Google Translate ignores this tag, relying o n its own language-
recogn ition algorithms. A nyway, you specify the language using the lang attribute
on any element. For English, the attribute value will be en, and you can find codes
for many other languag es a t
www.w3schools.com/tags/ref_language_codes.asp. In a
most likely scenario that your whole web page uses a single langu age (in our case
English) you simply add the lang a ttribute to the <h tml> e le ment:
<html lang="en">
By putting it all together we arrive at a decent starting point for any modern web page
you want to build:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Smallest HTML Document</title>
</head>
<body>
<p>But it’s my only line!</p>
</body>
</html>
Mike: I noticed that you indent the code, and even some lines more than others. How
do y ou know how mu ch to indent whic h line?
Professor: You don’t have to k now that. The indentation you see is in fact completely
optional and without a ny effect on how the browser interprets the co de. At the same
1.4. Minimal HTML Document 7
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.