How To Structure An HTML Page

Click to share! ⬇️

Structuring an HTML page is an exercise in using the basic HTML tags available to you in order to provide structure and insert content in HTML markup. Some HTML tags have a specific purpose like image tags, but most of the HTML tags are used to structure the page and describe the content that they surround. In this tutorial, we’ll take a look at when and how to use these basic HTML Elements to successfully structure our web page.

Creating HTML Files

Before you can start writing HTML code, you need to create one or more HTML files to hold that markup. HTML files are required to have certain elements to declare the file as a valid HTML file. The approach we use to signify to web browers that this file will contain HTML markup is to specify a declaration like so:

<!DOCTYPE html>

This should be the very first line of an HTML document. It is needed so that web browsers will know what type of document to expect. The current HTML version that almost all browsers are sites are using is HTML5. Note that you do not have to explicitly state the version of 5 in the declaration. Simply including <!DOCTYPE html> is enough.

In addition to the declaration being set correctly, HTML files should end with a .html extension. Let’s get a new HTML file created by creating a file named index.html with the correct extension and doctype.

index.html

<!DOCTYPE html>

The <html> Element

In order to start adding actual HTML markup to an HTML file, the very next thing you must do after specifying the doctype is to make use of the <html> </html> tags. There is always an opening <html> tag and a closing </html> tag. This tells the web browser that anything inside of these tags will be interpreted as valid HTML markup.

index.html

<!DOCTYPE html>
<html>

</html>

The <head> Element

The <head> tag in an HTML document is important since it is the place where metadata about the current page is specified. This metadata is information that would not necessarily be visually seen on the web page itself but will contain valuable information for search engines, social graphs, and so on.

The first piece of information you would likely include in the <head> area of your web page would be the <title> tag. Inside this tag, we can assign a title to the page.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Hello HTML!</title>
</head>
</html>

html title tag

How To Link To Other Web Pages

The anchor tag (<a>) is what enables web designers to link to both local and remote web pages. The href attribute stands for hyperlink reference and is used to link to a path, or the address to where a file is located (whether it is on your computer or another location). The paths provided to the href attribute are usually URLs. This example links to the Bing search engine.

<!DOCTYPE html>
<html>
<head>
    <title>Hello HTML!</title>
</head>
<body>
<!--link to bing.com-->
<a href="https://www.bing.com">Bing</a>
</body>
</html>

Open Links In New Windows

The link above redirects the user to the destination website all in the same browser window. The user can still go back to the original web page by using the back button in the browser. If you prefer to open a link in a new window altogether then you can use the target attribute of the <a> tag. By setting the target attribute to have a value of _blank, a link will open in a new window.

<!DOCTYPE html>
<html>
<head>
    <title>Hello HTML!</title>
</head>
<body>
<!--link to bing.com-->
<a target="_blank" href="https://www.bing.com" rel="noopener">Bing</a>
</body>
</html>

Relative Linking

In addition to linking to external web pages, you will also want to link to internal web pages within a website. Let’s imagine we have a page_two.html file located in the same directory as index.html. It is easy to link these two pages together using relative paths. Let’s see how.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Hello HTML!</title>
</head>
<body>
<p>Go to <a href="page_two.html">page two</a></p>
</body>
</html>

page_two.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page Two</title>
</head>
<body>
<p>This is page two</p>
<p>Go back to <a href="/index.html">the homepage</a></p>
</body>
</html>

relative html link 1

anchor html tag relative link

Linking With An Image

The anchor tag can wrap text of course, but can also be used to wrap images. In this way, you can use an image as the element for a user to click to be taken to a new page.

<a href="https://bing.com"><img src="/images/bing.png" /></a>

use image for anchor link

Linking To id attributes

Another useful linking mechanism in HTML is the ability to link to id attributes directly within the same HTML page. What makes this useful is if you have some long-form content and you would like to give the user the ability to quickly jump to various sections on the page. This can be done using links that hyperlink to specific id attributes on the page. Let’s see an example.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Linking In HTML</title>
</head>
<body>
<div id="top">
    <ul>
        <li><a href="#section-one">Section One</a></li>
        <li><a href="#section-two">Section Two</a></li>
    </ul>
</div>
<div id="section-one">
    <h1>Section One</h1>
    <p>This is section one. You might have lots of information here in section one. If you would like to jump right to
        this point in the page you can easily click the Section One link at the top of the page.</p>
</div>
<div id="section-two">
    <h1>Section Two</h1>
    <p>This is section two. You might have lots of information here in section two. If you would like to jump right to
        this point in the page you can easily click the Section Two link at the top of the page.</p>
    <p>If you would like to jump right to the top of the page you can click <a href="#top">top</a></p>
</div>
</body>
</html>

Whitespace And Indentation

HTML does not care about whitespace in the markup of the page. You could have one big long string of HTML and it would still render in the browser properly. You could also have elements spaced out unevenly and as long as the opening and closing tags are correct, the rendering on the page will be fine. This does not make a nice experience for the developer, however. The nice thing is that there are tools within all of the popular code editors that will format the HTML in a very pleasant and easy-to-read layout.

Not Great

<!DOCTYPE html>
<html>
<body><h1>Whitespace</h1><p> Whitespace and indentation make html documents easier to read</p></body>
</html>

Better

<!DOCTYPE html>
<html>
  <body>
      <h1>Whitespace</h1>
      <p>
        Whitespace and indentation make html documents easier to ready
      </p>
  </body>
</html>

HTML Comments

All programming languages offer ways to insert comments into the code so that developers can document features and functions if they like. HTML is not a programming language, but it still offers a way to use comments in the markup to make the code easier to understand. Comments begin with <!– and end with –>. Any characters in between will be ignored by your browser.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Linking In HTML</title>
</head>
<body>
<div id="top">
<!-- Navigation Area -->
    <ul>
        <li><a href="#section-one">Section One</a></li>
        <li><a href="#section-two">Section Two</a></li>
    </ul>
</div>

Including comments in your code is useful for helping you (and others) to understand your code if you decide to come back and review it at a later date. Comments allow you to experiment with new code, without having to delete old code. If you want to try a new design, on just part of the page, you can comment out just that area and put live code in its place for testing.

How To Structure An HTML Page Summary

The <!DOCTYPE html> declaration should always be the first line of code in your HTML files. This lets the browser know what version of HTML to expect.
The <html> element will contain all of your HTML code.
Information about the web page, like the title, belongs within the <head> of the page.
You can add a title to your web page by using the <title> element, inside of the head.
A webpage’s title appears in a browser’s tab.
Anchor tags (<a>) are used to link to internal pages, external pages or content on the same page.
You can create sections on a webpage and jump to them using <a> tags and adding ids to the elements you wish to jump to.
Whitespace between HTML elements helps make code easier to read while not changing how elements appear in the browser.
Indentation also helps make code easier to read. It makes parent-child relationships visible.
Comments are written in HTML using the following syntax: <!– comment –>.

Click to share! ⬇️