HTML: Building On The Fundamentals

Learning objectives

By the end of this chapter you will:

have an understanding of more complex text structures (including tables, block quotes, definition lists, and other 'nested' element structures)
~~be able to whistle the training montage from Rocky IV in concert pitch~~
be able to insert images (and group them with captions)
have an elementary understanding of file paths when including visual media. </aside>

Picking up from where we left off...

Last chapter we learned about HTML. HTML stands for HyperText Markup Language and it's the standard language used to create and design web pages. Imagine HTML as the skeleton of a website — it outlines the structure and layout of a webpage by using a series of elements or tags. These tags tell your web browser (like Chrome, Firefox, or Safari) how to display the content of your webpage.

Here's a simple breakdown of HTML’s key concepts:

Tags: HTML is made up of various tags, which are enclosed in angle brackets, like <body>. Most tags have a starting tag (<body>) and an ending tag (</body>), with content in between. The ending tag has a slash before the tag name to mark the end of the element. For example,
```
<p>It was the best of times. It was the worst of times.</p>.
```
Elements: An element is formed by a start tag, some content, and an end tag. For example, the previous paragraph element (<p>) is used to define a paragraph of text.
Attributes: All elements can have attributes, which provide additional information about the element. Attributes are placed in the start tag, and they often come in name/value pairs like name="value". For example:
```
<img src="Dracula.jpg" alt="Christopher Lee as Count Dracula in the 1958 British gothic horror film 'Dracula'">
```
… has two attributes (src and alt), telling the browser where to find the image file and providing alternative text if the image can't be displayed.
Structure of an HTML Document: At its most basic, an HTML document has a structure that includes a <!DOCTYPE html> declaration, which tells the browser that this is an HTML5 document, followed by the <html> element, which encloses the entire content. Inside <html>, you have the <head> section, which contains meta-information about the document, like its title, and the <body> section, which contains the content that's displayed on the webpage.

With that under our belt, here's a very simple example of an HTML document:

<!DOCTYPE html>
<html>
<head>
		<meta charset="UTF-8">
    <title>Character Profiles</title>
</head>
<body>
    <h1>Jonathan Harker</h1>
    <p>Jonathan Harker takes up his post as librarian in Klausenburg but in actuality is a vampire hunter that has come to flush out Dracula.</p>
</body>
</html>

<!DOCTYPE html> declares the (HTML5) document type.
<html> is the root element that contains all other HTML elements.
<head> contains meta-information about the document.
- <meta> can do a variety of things, but it is used here to specify the “character encoding” for the HTML document (so that extended and non-western characters display correctly).
<title> sets the title of the document, which appears in the browser tab.
<body> contains the content of the document, such as text, images, and other media.
<h1> is a header element, defining a large heading.
<p> defines a paragraph.