Introduction to HTML
HTML exists to solve the problem of how a rich document can be expressed in plain text. That is to say what are the parts of the document, what role does each part serve (e.g. heading, image, list, emphasised text, link etc.), and how do they relate to one another.
HTML expresses the structure and semantics of a document in plain text.
HTML Boilerplate
When a client's browser gets an HTML file from the server, it begins building a document that will be displayed to the user.
The following HTML boilerplate tells the browser how to construct the page:
The first line <!DOCTYPE html> declares that the document is an HTML document and specifically, this doctype declaration tells the browser that the page should be interpreted using the HTML5 specification.
Every web page is enclosed in html tag defining the start and end of the document. The closing html tag should always be the last line of the page.
The html element has two children, head and body. Both head and body are required and they are the only two valid children of html.
Head
The head element holds metadata about the document; metadata meaning extra information about the document beyond the content of the document.
One required piece of metadata is the title element. Every page is required to have a title; without one the HTML document is invalid. The title element defines what shows up in the browser window, what the page is called when added to favorites/bookmarks, and what the page is titled in search-engine results.
The meta element declares that the charset or set of characters used in this document is utf-8 which includes most characters from all known human languages. This is not required but can avoid some problems you might run into if you use special characters. The charset declaration should fit completely within the first 1024 bytes at the start of the file, so it's best to put it immediately after the opening head tag.
Two other meta tags that may autofill into HTML5 boilerplate:
<meta name="viewport" content="width=device-width, initial-scale=1.0">This sets the width of the area in which the content renders (the viewport) to the width of the device and sets the scale to 1. You can read more about this here.
Other examples of metadata include links to external stylesheets (more later) and scripts to run on the page.
There are MANY options for the meta tag. So many that there's probably not an exhaustive list anywhere.
Body
The body element contains the information actually presented to the user; it represents the content of the document.
More Elements
There are tons of different HTML elements and memorising them is impractical. Instead, it is better to start using the 20 percent of the building blocks that get you 80 percent of the way there. Among these are headings, paragraphs, lists, and images.
Headings
The h1 - h6 tags are for headings and subheadings. It's rare to use past 3 or 4.
Lists
People love lists. There are two types of HTML lists, ordered and unordered.
Images
If there's anything people like more than lists, it's images.
Images are empty elements meaning that they cannot logically have children. They are represented in HTML with a single, self-closing element.
Some people put a slash at the end of empty elements but it is unnecessary.
Images require a src with a URL for an image. You should also include an alt tag for screen readers, and when something breaks and the image doesn't show up.
The url can be any address but generally we want to manage our own assets.
Right click the picture and click "Save image as...", give the file a shorter name, and make sure you save it to Downloads. I've gone with html5logo.png.
Move the file from your Downloads folder to the html-and-css directory.
We tell the browser to request an image and load it into the page by giving an image tag's source attribute a path to the image.
Semantic HTML
Besides the basic elements, there are some semantic HTML elements that are important to learn to use as professional developers. These semantic elements will improve the structure of our pages and make it easier for the more than 285 million people around the world who cannot experience our pages visually to navigate through our content.
These include elements like:
References
Last updated
