Skip to main content

2. HTML & Standards

Creating web pages with HTML and CSS is something that anyone with a computer can accomplish. The basic process of website design doesn't require using any super high-tech tools. The only tool that is absolutely required is a basic text editor.

We'll talk about CSS in future lessons. CSS is used to style the page (change how it looks). But we're going to start with HTML, which provides the structure for our pages.

That is a very important distinction to remember:

HTML is for structure and meaning.

CSS is for controlling how the page looks.

At this point, we don't really care how the page looks. We just want to structure things correctly with HTML code. In the next lesson, we'll get into CSS styling.

Web pages are made up of 3 basic components: text content, references, and markup.

Text content​

The text content is the words that you see on a page. For example, a paragraph in HTML would look like this:

<p>This is a paragraph in an HTML page. This is the text content that the humans will see. Notice that there is an HTML opening tag at the beginning of this paragraph and a closing tag at the end. The human visitors will not see these tags.</p>

References​

This is when we refer to a separate file in our HTML code.

Images, video, and links are common examples. We'll discuss all of these and more further along in this course.

Markup​

In the example paragraph below, the <p> and </p> are markup. 

<p>This is a paragraph in an HTML page. This is the text content that the humans will see. Notice that there is an HTML opening tag at the beginning of this paragraph and a closing tag at the end. The human visitors will not see these tags.</p>

There are three types of markup: elements, attributes, and values.

Elements​

An element consists of the opening tag, the content, and the ending tag. In our paragraph example above, the element includes the <p>, all of the text content, and the </p>.

Attributes & values​

Within an element's opening tag, you might include an attribute and a corresponding value. For example, let's take our paragraph example and add an attribute and value.

<p class="monkey">This is a paragraph in an HTML page. This is the text content that humans will see. Notice that there is an HTML opening tag at the beginning of this paragraph and a closing tag at the end. The human visitors will not see these tags.</p>

We'll discuss what you can do with classes in the next lesson. But for now, we just need to understand that in this example, class is the attribute and monkey is the value. This is the format for attributes and their values:

<element attribute="value">

You must have a space between the opening tag's element name (p) and the attribute name (class). If you wanted to add another attribute, you would add a space after the value's ending quote. Here, we have added the id attribute:

<p class="monkey" id="george">

Basic HTML elements​

We'll go into more detail about additional HTML elements in future lessons. But right now, let's go over some of the most commonly used elements. For your practice exercise, you will create a web page with several of these elements.

Paragraph element​

The <p> element sections off blocks of text into paragraphs.

<p>This is a paragraph in an HTML document on the world wide web.</p>
<p>This is a second paragraph in this document.</p>

h1 - h6 elements​

The heading elements create headings for sections of the page.

The <h1> element is used for the most important heading on the page. It is usually used once per page. This is usually the page or website title.

The <h2> element is used for all of the major headings in the page. And the <h3> element would be used for any subheadings within the <h2> sections.

<h4> would be used for a subheading for a section started by an <h3>. And so on.

For example:

<h1>An article about the United States</h1>

<h2>California</h2>
<p>Content under the California heading is here.</p>
   
<h3>Sacramento</h3>
<p>Content under the Sacramento heading is here (A subheading in the California section).</p>
   
<h2>Ohio</h2>
<p>Content under the Ohio heading is here.</p>
   
<h3>Toledo</h3>
<p>Content under the Toledo heading is here (A subheading in the Ohio section).</p>

The <a> element is used to create links.

It requires the href attribute ("hypertext reference"). The value for href provides the URL to the web page or file.

<a href="https://google.com">Google</a>

The target attribute with the value _blank makes the link open in a new tab:

<a href="https://google.com" target="_blank">Google</a>

Output:

Google

You can also use the title attribute to provide a description when the link is hovered.

<a href="https://40px.org" title="Learn to Code">40px.org</a>

Hover your mouse over this link to see:

40px.org

img element​

We'll discuss the <img> element and images in lesson 5. Embedding an image in a web page is fairly simple. The img element requires the src attribute ("source") to provide the location of your image (the URL).

It also requires the alt attribute ("alternative text") in order to pass validation. We'll talk about validation later in this lesson.

The alt attribute value describes the image to those with visual impairments. It also provides information to search engines about the image.

<img src="images/monkey.jpg" alt="A tiny monkey riding a cat">

Break element​

The <br> element provides a way to create a line break in your document. It makes the content after it go to the next line.

It is not good habit to use the break element often because it clutters up your code. We'll learn about using CSS to create space in future lessons.

Horizontal rule element​

The <hr> element creates a line that is used to separate sections of content.

Strong element​

The <strong> element indicates that the content has strong importance.

<p>Click the <strong>happy</strong> button!</p>

The <strong> element makes the text appear bold on the page. However, we will learn later that we can use CSS to change how anything looks. We shouldn't choose a particular HTML element just because it looks a certain way on the screen.

HTML is for meaning and structure. In the next lesson, we will begin using CSS to control how things look.

Emphasis element​

The <em> element is used to stress emphasis. It happens to make the text italic. But, again, that's not the reason we would choose to use that element.

We choose HTML elements to provide meaning.

<p>We choose HTML elements to provide <em>meaning</em>.</p>

If, for example, you were providing the title of a book, the <em> element might not be the best choice. In that case, it would be more semantically correct to use the <cite> element.

We'll discuss this concept of "semantic coding" in lesson 4.

Unordered list and ordered list elements​

The <ul> element ("unordered list") is used to create a list of bulleted items.

The <ol> element ("ordered list") is used to create a numbered list.

And the <li> element ("list item") is used for each item in the list.

<ul>
   <li>An item</li>
   <li>Another item</li>
   <li>And so on...</li>
</ul>

More elements to come​

Tables, forms, divs, and spans are some other commonly used elements. We'll explore these elements, along with several semantic HTML5 elements in future lessons.

Closing elements​

Most HTML elements should begin and end. For example, when you have an opening paragraph tag (<p>), you should have a corresponding closing tag as well (</p>).

Most elements can be looked at as containers that hold content. The <p> represents the start of our container and the </p> represents the end of our container. If we neglect to close our "container", the page might not display in the browser as you intended. It also might fail validation. We'll discuss validation here in a little bit.

There are a few elements that do not hold content. These elements do not require an ending tag. These include:

  • <hr> (horizontal rule—creates a line)
  • <br> (creates a line break)
  • <img> (along with corresponding attributes, embeds an image)
  • <meta> (used for meta information in the <head>)

Nesting elements​

Nesting is placing one element inside of another element. If you start a new element inside of another element, the element it is inside of is called the parent. The element nested inside is called the child. The child must always end before the parent element ends.

Now let's add a child element inside our parent paragraph element:

<p>This is a paragraph in an <strong>HTML page</strong>. This is the text content that humans will see. Notice that there is an HTML opening tag at the beginning of this paragraph and a closing tag at the end. The human visitors will not see these tags.</p>

Our child element is <strong> because it is inside the paragraph element (<p>). The <strong> element must end somewhere before the ending tag for the paragraph (</p>).

Basic components & structure of a web page​

The entirety of your HTML document is wrapped within the <html> element. There should not be any content or elements of any kind after the ending HTML tag (</html>).

At the top of our documents, we will always include the <head> element. Within the head, you will add meta tags and references to other documents. What is in the head element is meta information. It will not actually appear on the page.

All content in your HTML documents will be contained within the <body> of the page. And by "content", we mean anything that will actually be seen on the page, such as text, images, etc.

<!doctype html>
<html>

   <head>

      <!-- meta information and references here -->

   </head>

   <body>

      <!-- ALL page content here -->

   </body>

</html>

HTML comments begin with <!-- and end with -->. Anything between those characters is not visible when the page is viewed in a browser. But these comments can be seen in the HTML code.

Doctype​

Above the <html> element we have this code:

<!doctype html>

The doctype tells the browser what version of HTML you are using. This can be important for displaying your web page correctly in a browser.

We are using the HTML5 doctype, which is the latest version of HTML. The HTML5 doctype is the most simple. When I first started teaching, we used the XHTML Transitional doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

It looks like gibberish, doesn't it? YAY for HTML5 and its simplicity!

Web standards​

The World Wide Web Consortium, known as the W3C, is an organization made up of developers, representatives from companies like Google and Microsoft, and many others with a concern for the present and future state of web technologies.

The W3C creates web standards, or universal rules, that establish the proper way that your code should be created. The goals of these standards are to ensure that everyone is operating in the same manner so there will be increased compatibility and a better, more open web for everyone.

Due to some differences in opinion about the future of HTML, a new standards organization splintered off in 2004. In that year, Apple, Mozilla, and Opera began working together under an umbrella group named WHATWG.

WHATWG refers to its standards documentation as a "living standard". In other words, the plan is to continue developing the HTML standard on an ongoing basis, rather that coming out with a new version of HTML in the future.

And in 2019, the W3C and WHATWG finally agreed to work together on a single version of the HTML specification.

If you follow these HTML standards, your web pages will be optimized for greater performance and accessibility.

Another goal of standards is to ensure that web pages will display consistently in all browsers. This requires cooperation from Microsoft in the development of their Edge browser, as well as Mozilla Firefox, Apple's Safari, Google's Chrome, Opera and others. Browser developers have come together and agreed to most of these standards, which means that web pages with standards compliant code will, for the most part, display the same in most modern browsers.

Older versions of Microsoft's Internet Explorer were notoriously difficult to work with. What looked fine in other browsers would often look completely different in these browsers. Most businesses and web developers no longer support these older versions of Internet Explorer. The decision to no longer support a particular browser should be made carefully based upon statistics about your users.

But even some modern browsers may display your web page differently. You should always check your web pages in all modern browsers before going live with a website. It would be quite embarrassing if something that looks fabulous in your favorite browser looks horrible in another — especially if that other browser is the one your boss or client uses. Ouch!

Standards compliance & validation​

You can use this tool to check your HTML code against current web standards.

There are several important rules to follow that will take care of many standards compliance issues:

  1. Most HTML elements should begin and end.

  2. Don't use deprecated elements and attributes.

    "Deprecated" means that the element is no longer a part of the latest HTML standards recommendation. It should no longer be used. Those who have learned older versions of HTML should be aware that such elements as <center> and <font> are deprecated and should not be used.

    Take a look at the HTML Element Reference. It says "Not supported in HTML5" next to any element that has been deprecated in HTML5. We will only use elements that are valid in HTML5.

    The primary reason that these HTML elements have been deprecated is to separate structure and presentation. HTML is for structure and meaning. CSS is for presentation (style).

  3. All elements must be properly nested. As we said earlier, the child element must always end before the parent element ends.

  4. Make sure your HTML file is saved in the UTF-8 format (see below).

Character encoding​

We will use this element within the <head> of every web page that we create:

<meta charset="utf-8">

This meta element specifies that we are using the UTF-8 character set.

UTF-8 is a more accessible way of presenting text on the web. It allows us to create content properly in many different human languages.

And your HTML files should be saved using the UTF-8 text format. This is the default setting in Visual Studio Code.

HTML character entities​

Certain characters may be used for multiple purposes. For example, the ampersand has both HTML and programming meanings and may also be used in your text simply to mean "and".

Less-than and greater-than symbols are used in mathematics and are also used in HTML code. You might also want to show HTML code in your content, without it being rendered as HTML by the browser, like I do in these lessons.

In order to indicate that these characters do not have programming meanings, but are merely a part of your content, we use HTML character entity code as a replacement. We can also use character entities to display certain symbols, such as the copyright symbol (©).

See the HTML Character Entity Reference.

Using the character entity code is really only necessary for less-than and greater-than symbols. You might also use character entity code to display characters that are not available on your keyboard.

To display HTML code on the page without validation errors:

&lt;p&gt;This is a paragraph.&lt;/p&gt;

Output:

<p>This is a paragraph.</p>

If you do not replace less-than/greater-than symbols with entity code, your page might not pass validation.

Don't be intimidated when you get a huge list of errors when you check validation. It is often the case that just a single error in your code can cause many error messages to display in the result.

Take a look at the first error and see if you can correct it. The validation results will show you the line number at which the error occurred. And it will usually provide a snippet of code from where the error was found. The problem is usually with the code shown or with some code prior to that.

If you find an error, correct it, and check the validation again to see if that eliminates some or all error messages.

Absolute & relative URLs​

An absolute URL is like a street address.

If you give the address to anyone in the world, they should be able to access the resource.

This is an example of an absolute URL:

https://40px.github.io/webdev1/2/images/monkey.jpg

A relative URL is like directions from one room in your house to another room in your house.

A relative URL provides directions from the file in which you are typing the URL to another file that is on the same server.

For example, let's say you have files named index.html and monkey.jpg inside your "2" folder and you want to embed the image in the HTML file.

Those files are in the same folder. So, we don't really need to provide any directions. We can just provide the file name as the URL in the src value:

<img src="monkey.jpg" alt="the description of the image">

Now, let's say that you created a folder named images and put monkey.jpg inside that.

So now, both the HTML file and the images folder are in the same folder together. We would use this URL to provide directions to the JPG file:

<img src="images/monkey.jpg" alt="the description of the image">

We'll discuss creating more complex relative URLs in a future lesson.

For now, think about this again:

An absolute URL is like your street address.

An absolute URL can be used to access a resource from anywhere on the internet.

A relative URL is like directions from one room in your house to another.

A relative URL can only be used to access a resource that is on the same server.

When working on your practice exercises for this course, it would be a good idea to use relative URLs when linking to and referencing your files. The main advantage to you is that your links will work the same on your local computer and on the web server. Because it's all relative and wonderful!