Use Sophia to knock out your gen-ed requirements quickly and affordably. Learn more
×

Creating an HTML Page

Author: Devmountain Tutorials
what's covered
This section will explore how to create an HTML page by discussing:
  1. ELEMENTS IN A BASIC HTML PAGE
  2. WHITESPACE AND COMMENTS IN HTML
  3. CREATING A PAGE WITH TEXT CONTENT

1. ELEMENTS IN A BASIC HTML PAGE

Now that you’ve learned to recognize HTML elements and attributes, you’ll be able to read HTML pages. After this section, you’ll be able to create your own HTML page.

HTML pages or HTML documents on the web consist of several elements combined. Let’s break down the specific elements that are used to create the example below.


<!DOCTYPE html> 
<html>
   <head>
      <meta charset=”utf-8”>
      <title>A Basic Page</title>
   </head>
   <body>
      <p>This is a basic page.</p>
   </body>
</html>

The elements that make up this example, in order of appearance, are:

Code Element Element Name Element Description
<!DOCTYPE html> doctype This is a historical artifact that is functionally obsolete in most cases but is required at the start of every HTML document.
<html></html> html It wraps all the content on the page and is also known as the root element.
<head></head> head This element contains everything you want to include about the page that isn’t content that will appear to users on the page itself. Other elements such as <meta>, <title>, and <link>, can be nested inside of the head element to style content, title the page, and more.
<meta charset=”utf-8”> meta This particular meta element tells browsers that the document uses the UTF-8 character set, which includes most characters from the majority of human written languages and emoji. It’s not required for the rest of the page to work correctly, but it can help improve the page’s backwards compatibility.
<title></title>: title Sets the title of the page. The title of the page will appear in the browser tab that the page is loaded in. It’s also used to describe the page when it is bookmarked by the user.
<body></body> body This element contains all the content that should be displayed on the page including text, images, videos, etc.

big idea
HTML pages must start with the doctype element and wrap everything else in an html element. The head element contains content that won’t appear to users and the body element contains content that should appear to users.


2. WHITESPACE AND COMMENTS IN HTML

In the example HTML page above, we formatted the code with lots of whitespace.

This is optional — for example, these two lines of code are equivalent:

<p>The web is fun.</p>
<p>The         web is 
              fun.</p>

That’s because, no matter how much whitespace you use in the content of an HTML element, the browser will reduce any sequential whitespace characters to a single space when parsing the code. For example, here’s a paragraph with a nested link:


<p> 
   You can learn more by clicking on 
   this link: 
   <a href="https://sophia.org/”> 
   link to Sophia 
   </a> 
</p>

Although the example above is nicely formatted, it’ll read like this to the browser:

<p>You can learn more by clicking on this link: <a href=”https://sophia.org/”>link to Sophia</a></p>

Since the browser doesn’t care about nicely formatted HTML, it seems like there’s little point in putting effort into writing code that looks nice. However, even though browsers don’t appreciate well-formatted code, you probably do!

It can be easier to understand your code if it’s nicely formatted. In our examples, we’ve chosen to indent nested elements by two spaces. The visual cue makes it easier to tell that an element is nested inside another element. Writing well-formatted, readable code is so important in the software industry that many companies will require their employees to adhere to a style guide. For example, here is Google’s style guide for writing HTML.

Another thing you can do to make code easier to read is to add annotations called comments. Most coding languages have syntax for writing comments that are ignored by the parser and invisible to users but remain in the source code so developers and engineers are able to read them.

Comments may be used to explain the purpose or logic of a section of code. While you’re learning, you can use comments to write notes to remind yourself what each portion of your code is doing. They’re also used to communicate with coworkers and collaborators. Developers also use comments “remove” portions of their code without having to completely delete their work.

term to know

Whitespace
Whitespace is any amount of text that appears as blank space. Some examples of whitespace are space between words in a sentence, space between lines of a song, and indentation before a paragraph.

3. CREATING A PAGE WITH TEXT CONTENT

Let’s continue working on the HTML page you saw earlier and start adding more content to it. Here are the contents of that HTML page again:


<!DOCTYPE html> 
<html>
   <head>
      <meta charset=”utf-8”>
      <title>A Basic Page</title>
   </head>
   <body>
      <p>This is a basic page.</p>
   </body>
</html>

The code above is a bit hard to follow since it contains so many tags. To make the example easier to read, we’ll truncate it and leave out all other tags except the ones inside the body element:

<p>This is a basic page.</p>

Our HTML page isn’t very exciting right now. It’s just a basic example page. Let’s make the page more purposeful and turn it into an article that users can read to learn more about you.

Most content on the web is text content like blog posts and news articles. This section will show you how to work with text content in HTML.

One of HTML’s main jobs is to describe the semantics — the structure and meaning — of content. Most text content is structured with headings and paragraphs. So far, you’ve seen that HTML paragraphs are created with the p element. Headings are wrapped in a heading element, like so:

<h1>About Me</h1> 

There are six heading elements — h1, h2, h3, h4, h5, h6 — each representing a different level of content in the page. h1 is the main heading, h2 represents subheadings, h3 represents sub-subheadings, and so on. For example, here’s how headings and paragraphs can be used to describe the semantics of a book:


<h1>How the Web Works</h1>
<p>By Anjelica</p>
<h2>Chapter 1: Inventing the World Wide Web</h2>
<p>The web was invented by Sir Tim Berners-Lee.</p>
<h2>Chapter 2: How HTML Works</h2>
<p>HTML is great.</p>
<h3>Anatomy of HTML</h3>
<p>HTML is made of elements.</p>

Use the example above to guide you as you create a new About Me page. Add content to the Editable Code field below in the box. Press Show Solution to check that your content looks similar to our solution. Press Reset to start over.

try it

Follow these steps in the box below:
1. Replace the contents of our basic page, below, and turn it into an About Me page. The main heading should say About Me.
2. Add a short paragraph to introduce yourself and your name.
3. Create two subsections, titled Likes and Dislikes.
4. Add a short paragraphs to each new section where you talk about the things you like and dislike.

Terms to Know
Whitespace

Whitespace is any amount of text that appears as blank space. Some examples of whitespace are space between words in a sentence, space between lines of a song, and indentation before a paragraph.