you will see that this change makes no difference to the way the headings display. Although a single whitespace character is displayed as a space inside an element, a sequence of whitespace characters, even if it contains new-line characters, is collapsed down to a single white space character.
HTML does provide a special character sequence, , for adding extra whitespace characters, but new lines should be created using the tags introduced shortly.
Note
The ampersand character, followed by a sequence of characters and terminated by a semicolon, indicates that this is a special character sequence.
There are a number of special character sequences in HTML. Perhaps the most common ones you will encounter are < and > , which are used for the less than (<) and greater than (>) characters respectively. These are required because the < and > characters have special meaning in HTML. In case you were wondering, nbsp stands for “non-breaking space.”
So what did generate the new lines after each heading? These appear because the elements h1 through h6 are block elements. All visual HTML elements have a display type, the most common of which are block and inline. Whenever a block element ends, the next element automatically begins on a new line.
Next, you can continue by adding some paragraphs to the body:
If you refresh the web page, it will look like what you see in Figure 2.2.
Each paragraph appears on a new line, and there is a space between each paragraph.
It is actually possible to omit the ending tag from a p tag. In fact, there are many cases where the ending tag can be omitted because the next tag in the document implies it. I usually find it easier to add the ending tag in these cases, but the specification makes this entirely optional. You will see throughout the examples that I sometimes omit the closing tag and sometimes include it.
What about XHTML?
If you are already familiar with HTML, you may be aware of XHTML, which is an XML-based version of HTML. HTML5 extends and replaces XHTML as well as HTML. In order to serialize an HTML5 page to XML, all tags must be closed, and the document as a whole must be well-formed. In addition, the html tag should be declared as follows:
and the content type of the document should be set to application/xhtml+xml rather than text/html when it is served to the browser.
If you are not already familiar with XHTML, you can ignore it for the duration of this book: It is typically only used if you have a need to process an HTML page with XML parsers and tools.
The text in a paragraph will automatically wrap if it reaches the far right side of the browser. Additionally, if the user resizes their browser, the text will automatically be adjusted: This process is referred to as a browser reflow.
Sometimes the browser will break your paragraphs in an inconvenient place, especially if it contains very large words. In order to give you more control over line breaks, HTML5 has introduced a tag called wbr that can be added anywhere inside a paragraph as a hint to the browser that this would be a good place to add a line break.
If you would like a line break within a paragraph, you can use the br tag. This is also a self-closing tag so it can be used as follows:
HTML supports several other tags for encapsulating blocks of text. The final one you will look at in this section is the blockquote element, which can be used to capture quoted text, optionally with a citation:
This structure is slightly more complex: The blockquote tag contains the quote, while cite, which is an optional child tag, captures the source of the quote. Figure 2.3 shows an example of this tag in Chrome.
Notice that the blockquote is indented and that the cite element displays in italics. Again, these are browser defaults rather than part of the HTML5 specification.
Finally, as your web pages become more complex, you may find cases where you would like to add comments to remind you what the markup means. Comments can be added as follows, and will not display to the user:
Links and Images
HTML pages naturally consist of far more than text. This section will introduce two of the most fundamental tags found in most web pages: hyperlinks and images.
I will assume you know what hyperlinks are: They are a mechanism for referencing another HTML document and can be clicked to allow the user to navigate to that document.
Start by creating a new page in the same folder as the page you developed in the previous section, but call this one page2.html. Add some contents to this page so that you can distinguish it when it loads.
Now, in the original HTML file, add the following paragraph:
If you reload the page, this HTML will generate the text found in Figure 2.4.
Notice that the text displayed to the user is derived from the content of the a tag, while the page that is loaded when the link is clicked can be found in the href attribute.
This particular URL is referred to as a relative URL because it does not start with a forward slash or a domain name. The browser will attempt to find page2.html in a location relative to the page currently being displayed.
If you had created page2.html in a subfolder called sub, the URL would be represented as follows:
When running a website inside a web server, it is also possible to use absolute URLs. These begin with a leading / and require the full path for the file to be specified.
It is also possible to add URLs to other websites. For example:
You will also notice that the a tag does not cause an implicit new line to be generated in the document. This is because, unlike most of the other tags you have examined, it has a display type of inline.
Hyperlinks can be surprisingly complex. As you progress through the book you will see more interesting features of hyperlinks, such as the manner in which they can
