Hello HTML

While getting started with HTML, you will likely encounter new—and often strange—terms. Over time you will become more and more familiar with all of them, but the three common HTML terms you should begin with are elements, tags, and attributes.

Elements & Tags

Elements are designators that define the structure and content of objects within a page. Some of the more frequently used elements include multiple levels of headings (identified as <h1> through <h6> elements) and paragraphs (identified as the <p> element); the list goes on to include the <a>, <img>, <div> and <nav> elements, and many more.

The use of less-than and greater-than angle brackets surrounding an element creates what is known as a tag. Tags most commonly occur in pairs of opening and closing tags.

An opening tag marks the beginning of an element. It consists of a less-than sign followed by an element’s name, and then ends with a greater-than sign; for example, <div>.

A closing tag marks the end of an element. It consists of a less-than sign followed by a forward slash and the element’s name, and then ends with a greater-than sign; for example, </div>.

The content that falls between the opening and closing tags is the content of that element. A paragraph, for example, will have an opening tag of <p> and a closing tag of `</p>. What falls between these two tags will be the content of the paragraph.

So, a paragraph element is created with an opening tag, some content (in this case the phrase hello world) and a closing tag.

<p> Hello World </p>

Throughout this document wherever you see the dots used in a code example ( ... ) this is simply a placeholder for additional code or text which is left out to keep the example focused on the main point.

<h1> ... </h1>
<h2> ... </h2>
<h3> ... </h3>

Attributes

Attributes are properties used to provide additional information about an element to the browser.

Attributes are defined within the opening tag, after an element’s name. Generally attributes include a name and a value. The format for these attributes consists of the attribute name followed by an equals sign and then a quoted attribute value.

<element attribute-name=“attribute-value“> ... </element>

For example when we create a link we need to give the browser more information. If we just used an open and close tag like this <a> My Website </a> then the browser wouldn't know which url to navigate to to when you selected the link. To tell it where to go we just need to add a href (hyperlink reference) attribute. This code will take users to http:// www.mywebsite.com when they click the “My Website” text.

<a href='http://www.mywebsite.com/'> My Website </a>

Likewise to create an image, we need to tell the browser where to find the image.

This (self-closing)<img> element displays an image that you have uploaded into the root folder called ‘logo.png’ with the alternate text (for slow loading devices, visually impaired and SEO) of ‘Website Logo’ to describe the image.

<img src=“/logo.png” alt=“Website Logo”>

Some attributes are required for that element to function (like the src attribute for images, or the href for links) while others are optional, like the class or id attribute (we’ll learn more about what they do later). We can add a class or id to just about any element, such as a h2 heading.

<h2 class="featured"> This is a heading </h2>
<img src="logo.png" id="logo">

We would say that the h2 has a class of featured, and the image has an id of logo.

Self-Closing Elements

In the previous example, the <img>element had only an opening tag and didn’t include a closing tag. Fear not, this was intentional. Not all elements consist of opening and closing tags. Some elements simply receive their content or behaviour from attributes within a single tag. The <img> element is one of these elements. Common self-closing elements include: <img> , <link> , <embed> , <meta>

Common HTML Elements

<h1> This is a level 1 heading </h1>
<h2> This is a level 2 sub-heading </h2> 
<p> This is a paragraph <p>
<img src="/logo.png" alt="My Brand Logo">
<a href="http://www.url.com"> This is a link </a>

Nesting Elements

We organise and structure our HTML document in two ways -- through the order, from top to bottom, and by nesting elements inside other elements. The easiest way to think about it is that each HTML element is like a basket that can hold content, other baskets or both.

Here we have a h2, image and anchor link nested inside a footer element:

<footer> 
  <h2> This is a level 1 heading </h2>
  <img src="/logo.png" alt="My Brand Logo">
  <a href="http://www.url.com"> This is a link </a> 
</footer>

In this example we start with a<html> element, and within this there is a <head> element and a <body>. Nested inside the head element we have a <title>element and nested within the <body> element is a <nav> element, a <div> element and a <footer>element, and so on.

Any element that is nested inside another is considered a ‘child’ of that element. So the img is a child of the nav, and then body is a parent of the nav. This structure becomes important later on when we are styling the document.

Document Setup

There is a required structure to all html documents. They all start with the declaration <!DOCTYPE html> which tells the browser that we are using the latest version of HMTL5 and helps to ensure your webpage displays correctly when visited from different browsers. The doctype declaration must be the absolute first line of your html document; not even comments or spaces can come before the doctype.

Following the document type declaration, the <html> element signifies the beginning of the document, and all the other code we write will go inside the <html> element.

Everything else is nested within either the <head> or the <body>. The <head> provides additional data to the browser that won’t be displayed on the main page, such as the document title <title> (which you’ll see on the title bar in the browser window), links to any external files (like your css or javascript), and any other beneficial metadata. The <body> element contains the actual content of the website; everything you see in the browser.

Here’s how the html tree we showed above would look in code. We indent in the children of each element to make the document easier to manage and easier to find issues.

<!DOCTYPE html>  
<html> 
  <head>
    <title>Amy’s Cafe</title>
  </head>
  <body>
    <header>
        <img src="/logo.png" alt="Amy’s Cafe"> 
        <nav>
          <a href="/about.html">About</a>  
          <a href="/contact.html">Contact</a>
        </nav> 
    </header> 
    <section> . . . </section>
    <footer> . . . </footer>
  </body>  
</html>

We would say that the links (<a>) are children of the nav, which is a child of the header.

4. Hello HTML