The Basic Structure of a Web Page5:20 with Treasure Porth
You will get a quick overview of all the elements that make up a basic web page, from the internal workings of doctype and head, to the parts that everybody sees: the header, nav, main, and footer.
You might have noticed that Treasure mentions that there are usually three sections to a website - but in your sample files, there seem to be four!
Most modern websites today contain three distinct sections:
- A header;
- A main content section or area; and,
- A footer
The header is usually used for introductory and navigation aids. We've extracted the
#main-nav navigation section from the header in this course, to make things a bit easier to read and understand for beginners. We'll explore each of these segments individually a little later in the course!
When writing HTML, we use tags for creating different elements.
- Elements - An element is a part of a webpage. This could be a chunk of text, an image, or even an element representing a space or gap within the flow of content.
- Tags - A tag is used for creating an element on your page, and is usually what we write in our source code.
For example: Treasure creates a paragraph element by using the <p></p> tags. Often, the written content to be displayed will be placed between those tags.
- <!DOCTYPE html> - A piece of code that tells the browser what kind of information it’s getting, so that it can display your web page properly.
<html> - All of your code must be between tags.
<head> - Hold all the important behind-the-scenes information about your web page, like the title of your web page, and a links to a CSS stylesheets.
<title> - Stuff between title tags doesn’t appear on the web page, but you’ll see it in search engine results and browser tabs.
- <body> - Everything that displays in the browser -- header, navigation, images, content -- goes between the body tags.
You need to sign up for Treehouse in order to download course files.Sign up