Skip to main content

Elements and The Page

What is an Element?​

Elements are HTML artifacts that are combined together to structure and create your HTML document.

Standard elements​

Standard elements have an opening and closing tag with content in between.

Some common standard elements are

  • headers (h1, h2, h3, h4, h5)
  • division (div)
  • span (span)
  • sections (section)
  • paragraph (p)
  • lists (ol, ul, li)
  • table (table, tr, th, td)
  • buttons (button)
  • links (a)

Nesting​

Most common elements rely on nesting to build out the structure of your HTML page. Usually you can nest infinitely but you should only do so in order to convey logical separation and order and not just for fun.

<div>
    <p>
        My cat is <strong>very</strong> fussy.
    </p>
</div>

The important takeaway with the ability to nest elements is that some elements respect hierarchy. For example, there should only be one h1 element on your page. It is the highest level header element. You can then infer the hierarchy of the rest of the headers. h2 elements would break down the page into sections, h3 elements would breakdown h2 sections and so on. You can think of it almost like how a table on contents might be structured. Here's an example.

<h1>Welcome to my page!</h1>

<p>If this is your first visit to my page, feel free to jump around.</p>

<section>
  <h2>About Me</h2>

</section>

<section>
  <h2>My Hobbies</h2>

  <h3>Outdoor Hobbies</h3>

  <h3>Indoor Hobbies</h3>

</section>

<section>
  <h2>Where I Work</h2>

</section>

Content-less elements​

Some elements like the image element have no content. Instead they rely on attributes. With the image element, it's job is to embed images in the page and relies on the src attribute to know where to find the image.

<img src="images/firefox-icon.png" alt="My test image">

Some common content-less elements are

  • image (img)
  • line breaks (br)
  • horizontal rules (hr)

Some elements need both content and attributes​

In some case for your element to be useful and behave the way it's intended you need to supply it with the right attribute as well as some helpful content. Take the link element for example below. The href attribute tells the link where to go when clicked, the target attribute is special for a link and tells the browser to open the link in a new tab, and the Go to Google content is helpful for a user to know what will happen as well as to have something to click on.

<a href="google.ca" target="_blank">Go to Google</a>
info

You can find more details to all existing HTML elements by going to https://www.w3schools.com/tags/.

HTML Page Anatomy​

Now that we have gone over some basics of elements, we'll look at how to combine them into a full fledged page.

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>

  <body>
    <img src="icon.png" alt="My test image">
  </body>

</html>

This is the basic start to an HTML page and it consists of a few notable items.

  • <!DOCTYPE>: back in the day this was meant to describe the kind of rules your page would follow and would allow for error checking among other things. These days it's just required so your page behaves correctly. Theres more to it but for now that's all you need to know.
  • <html></html>: this is the root element of the page and it wraps everything.
  • <head></head>: acts as a container for all the stuff you want to add on your page that is not content. This can either be meta data which is extra information about the page like a title or a list of keywords. It can also provide a link to other files like javascript and css. More on that later.
  • <meta charset="utf-8">: meta data that describes the character set for your page. utf-8 covers most written languages. Adding this is not required but it's highly recommended as it could help you avoid errors is the long run. Basically just always add it.
  • <title></title>: Sets the title to your page. This is what shows up on the tab in your browser or in your history or in a bookmark.
  • <body></body>: this is where all the content the user will actually see goes. All the elements we talked about in the elements section above would be placed here.