Putting it all together - HTML page structure

HTML page structure: We've been talking about the many different HTML elements, attributes and roles, many different tools for marking up content on a website or web app. That's a big part of the job of HTML. To convey what all this stuff is. But that's not the only job of HTML. HTML files are key building block of the web.

Table of Contents

HMTL page structure

All HTML pages need to have the following page structure. So let's take a look at the structure of the whole HTML file.

The doctype declaration

First, the file must start with a doctype. This little statement declares which era this HTML file is from. There were other doctype declarations in the past for older versions of HTML.

This is written as: Left angle bracket, exclamation point, doctype, space, HTML, right angle bracket. Where "doctype" is written in all caps. All other HTML code should be written in lower case. This doctype declaration tells the browser that this document is formatted as HTML5.

<!DOCTYPE html>

The HTML tag

Next, you need an opening and a closing HTML tag. The HTML tag must wrap around everything else on your page.

<!DOCTYPE html>
<html>
...
</html>

The head

The head of the document contains information for the browser about the page, and for the most part, is not seen by the user. The exception to this is the title, which is defined with the Title tag wrapping around the name of the page.

If a search engine indexes your page, this is the name that the page will be listed under in the search results.

<!DOCTYPE html>
<html>
<head>
<title>HTML page structure</title>
</head>

</html>

What goes inside the head?

We use the meta element for this. Use meta elements only inside the head. It conveys metadata about the page.

To define the character set, we'll use the character set attribute, and set it to UTF-8, like this.

<meta charset="utf-8">

The meta element can be used to define all kinds of settings. One incredibly common use is to tell the browser the layout has been morphed to fit small screens, that it is a responsive website. Without this meta tag, the browser assumes the page is using an older technique for layout, that it's a desktop layout that needs to be shrunk down to fit on a phone.

<meta name="viewport" content="width=device-width, initial-scale=1">

We probably also want to add a description of the site. This description will show up in search engine results.

<meta name="description" content="A description of this site that will show up in search engine results.">

Another important element that we use a lot inside the head is the link element. This is used to link to a range of other assets that we want to load, like CSS files, fonts, and favicons.

The rel attribute is used to tell a browser which kind of asset it is. And the href attribute is used to provide the URL to the asset. The link to a stylesheet looks like this, with the rel attribute of stylesheet.

<link rel="main.css"  rel="stylesheet">

A link to a favicon looks like this.

<link rel="icon" href="favicon.ico">

We can also link to preload a font file. One thing to think about, the browser will load the files in the order in which they're listed. Put things you want to load first at the top. Things that aren't as important or that won't get used right away, they can go further down.

The HTML head is a place to get everything connected and set up to make sure other assets are loaded and to provide data about the page to other sites and platforms. It's the headquarters for starting out the page right.

The body

The body is where all of the content that appears for your visitor goes.

I'll type in the traditional "Hello World!" into the body, save it, and then preview it in my browser.

<!DOCTYPE html>
<html>
<head>
<title>HTML page structure</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>

Remember that every HTML page you create in your site needs to have the basic structure of the doctype declaration, the HTML, Head, and Body elements.

HMTL page structure - Example

<!DOCTYPE html>
<html>
<head>
<title>HTML page structure</title>
<meta name="description" content="A description of this site that will show up in search engine results.">
<link rel="icon" href="favicon.ico">
</head>
<body>
<img src="header.png" width="100%">

<h1>My First Heading</h1>
<p>My first paragraph.</p>

<h2>My Second Heading</h2>
<p>List</p>

<ol>
	<li>Option 1</li>
	<li>Option 2</li>
</ol>

<h2>Registration form</h2>
<form action="/action_Registration.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="You name"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="You lastname"><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password" value="123"><br>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

Si quieres conocer otros artículos parecidos a Putting it all together - HTML page structure puedes visitar la categoría HTML COURSE.