In this lesson you will learn about the six tags available in HTML that allow you to create different levels or sizes of headings and subheadings.
Headings
Written documents are structured in such a way that certain information is easy to identify. Titles are typically a larger font size and bolder than the normal paragraph text. The subtitle is smaller than the title, but still larger than the paragraph text. This is true of web pages as well. The way the page is structured allows a user to quickly find what they are looking for.
HTML Headings
Below are the six h tags available in HTML5 that can be used to display the different headings.
The following frame shows how the code above will render in a browser. The h1 tags are used for the main heading and is the largest. The h6 tags produce the smallest. Most browsers will render them with bold text.
Browsers apply a default font-size for each heading. The size of each element is generally a multiple of the font-size attributed to the parent container. In the example above, the default font-size is 16px. The h1 element is twice as large or 32px. The h2 element is one and a half times 16 or 24px. The h4 element is equal to the default font-size of 16px.
You can change these font-sizes by writing your own custom styles, but make sure to keep in mind that h1 tags are used for the most important headings and h6 tags are used for the least important headings.
Are you ready to start writing html? This lesson will walk you through the process of creating a basic web page. By the end of the lesson, you will be able to create a file, add some basic html, save the file in the correct format, and view the file in your web browser.
Choose an editor
The first thing you need to do is choose where you are going to write your code. The good news is, you can write HTML in any basic text editor. For example, on a Mac, you can use TextEdit. On windows, you can use Notepad. This lesson will walk through the process with both of these programs. If you are working on a Mac, click here to skip to it.
Windows
If you are using a recent version of Windows, you should have Notepad installed on your machine. Locate and open the program. Once open, you can start adding your HTML. Don’t forget to begin with the doctype declaration.
<!DOCTYPE html>
Next, add the html tags. Remember, all your elements will be typed inside the opening and closing html tags.
<!DOCTYPE html>
<html>
</html>
Next, add the body tags. Notice the indentation. The body tags are inside the html tags, so we indent them in order to help keep the code organized. The reason for this will become more apparent when you start working with longer files containing numerous elements.
<!DOCTYPE html>
<html>
<body>
</body>
</html>
The visible elements of a web page are placed within the body tags. Let’s add a page title and subtitle. Again, notice the indentation.
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<h2>It's a beautiful thing</h2>
</body>
</html>
Click on File at the top of the Notepad window and choose Save As…
For the Save as type, make sure to select All Files.
Select the location that you want to save your file. You may want to create a folder to house your code. Where it says File name, enter a name for the file, followed by the .html extension. As you can see in the example below, I saved my file as index.html in a folder named code.
In your file system, navigate to the location of the file you just created. Double click on the file and it should automatically open in your default browser. It should look something like this.
Notice the tab in the image above shows the file name. This is certainly not ideal, so let’s add one more thing to our file to change this. Open Notepad, click File, and choose open. Navigate to the location of your file. If you don’t see your file, you may have to change the file type to All Files. Double click the file to open it. Add the opening and closing head tags with the title tags between them as follows.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>My First Web Page</h1>
<h2>It's a beautiful thing</h2>
</body>
</html>
Save the file and open it in your browser again. If you still have the page open, you can simply refresh the page. The tab should now display the page title that you described in the title tags.
That’s it! You have created your first web page. Continue to the next lesson to learn more.
Mac – TextEdit
If you are using a Mac, you should have access to TextEdit. Open the program. You will need to adjust a few settings to get started. Click on TextEdit at the top. Choose Preferences.
On the New Document tab, make sure to choose Plain text.
Click on the Open and Save tab. Check the box next to Display HTML files as HTML code instead of formatted text. Then, uncheck the box next to Add “.txt” extension to plain text files.
Close the Preference settings and open a new file. You are now ready to add your HTML. Begin with the doctype declaration.
<!DOCTYPE html>
Next, add the html tags. Remember, all your elements will be typed inside the opening and closing html tags.
<!DOCTYPE html>
<html>
</html>
Next, add the body tags. Notice the indentation. The body tags are inside the html tags, so we indent them in order to help keep the code organized. The reason for this will become more apparent when you start working with longer files containing numerous elements.
<!DOCTYPE html>
<html>
<body>
</body>
</html>
The visible elements of a web page are placed within the body tags. Let’s add a page title and subtitle. Again, notice the indentation.
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<h2>It's a beautiful thing</h2>
</body>
</html>
You now have a basic web page. Let’s see what it looks like. Click on File and choose Save.
Select the location that you want to save your file. You may want to create a folder to house your code. Where it says Save As, enter a name for the file, followed by the .html extension. As you can see in the example below, I saved my file as index.html in a folder named Code.
In your file system, navigate to the location of the file you just created. Double click on the file and it should automatically open in your default browser. It should look something like this.
Notice the tab in the image above shows the file name. This is certainly not ideal, so let’s add one more thing to our file to change this. Open TextEdit, click File, and choose open. Navigate to the location of your file. Choose the file and click open. Once open, add the opening and closing head tags with the title tags between them as follows.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>My First Web Page</h1>
<h2>It's a beautiful thing</h2>
</body>
</html>
Save the file and open it in your browser again. If you still have the page open, you can simply refresh the page. The tab should now display the page title that you described in the title tags.
That’s it! You have created your first web page. Continue to the next lesson to learn more.
In this lesson you will learn about the doctype declaration as well as three of the main elements for creating and organizing your code; html, head, and body. Take a look at the code below and take notice of the elements mentioned.
The doctype declaration is placed at the top of every HTML page. This is not an html element or a tag. It is simply information provided to the web browser regarding the version or standard of HTML to expect. The most recent version, HTML5, uses the simple declaration <!DOCTYPE html>.
HTML Tags
The opening <html> tag and the closing <\html> tag form a wrapper for all of your HTML content. All other HTML elements are placed within these tags.
Head Tags
Items found between the open and closing head tags are not visible on the page. These are items that provide information to the browser, such as the page title, page author, links to stylesheets, scripts, etc.
Body Tags
The body of your HTML page is where all the visible elements live. As you scroll through this page, you may notice a navbar, an image, links to other pages, sections of text, etc. All of this was created with elements placed between the opening and closing body tags.
HTML is one of the three main languages used in creating web pages. It is the standard markup language that gets translated by your web browser and is typically used along with a styling language known as CSS (Cascading Style Sheet) and a programming language called JavaScript.
Typical web pages will include items like titles, subtitles, navbars, links, images, videos, forms, buttons, etc. Each of the items on a web page are created using HTML markup.
Hypertext Markup Language
HTML is short for Hypertext Markup Language. Though it may sound complicated, it is really just a text document containing special markup. The markup is written between angle brackets < > and are referred to as tags. These tags are used to create HTML elements. In the example below you can see a few common elements.
Most elements, like the ones above contain an opening tag and a closing tag. Notice the closing tags contain a forward slash right after the first angle bracket.
More About Tags
Tags can contain attributes. An attribute provides information about an element. For example, you may want to give an element a unique id or a specific class that can be used to style the text a certain way.
<html>
<body>
<h1 id="main-header">This is the main header</h1>
<p id="main-text" class="red-text">This text will be red</p>
</body>
</html>
Each attribute is made up of a name and a value. The h1 element shown above has an attribute named id with a value of main-header. Notice the p tag has two attributes. Elements can have multiple attributes separated by a space.
Summary
HTML is a text based markup language used to build web pages. Elements are created using tags. Attributes can be added to an opening tag to provide information about an element.
