How To Create Your First HTML Elements With Examples

This article demonstrates how to create your first HTML elements using HTML tags. Included in this tutorial are HTML code and examples.

This article was first seen on and republished from html-and-css-tutorial.com

Creating Your First HTML Elements
Creating Your First HTML Elements

The HTML and CSS tutorials in this series will help you learn how to get started making your own web pages. There are four tutorials in this series, you can browse each one below.

  1. Tutorial 1: How To Create Your First HTML Elements With Examples
    1. So What Does HTML Look Like?
    2. Vocabulary: Element and Tag
    3. Vocabulary: Markup
    4. Summary
  2. Tutorial 2: How To Create a Valid HTML Web Page With Elements
  3. Tutorial 3: What Are More Examples of HTML Elements and Structure
  4. Tutorial 4: How To Use CSS (Cascading Style Sheets) To Style HTML

So What Does HTML Look Like?

This is the right place to start if you have little or no previous exposure to HTML. We will start this HTML tutorial with a look at some small but real fragments of HTML.

All the HTML and CSS you encounter throughout these tutorials is real working HTML and CSS.

HTML consists of tags that wrap objects and content placed on a web page. The HTML tags are placed in front of and behind headings, paragraphs, text, images, and other parts of the documents you want to publish on the web. Applying HTML gives the document structure and is called “HTML Markup” on a document.

HTML is an abbreviation for HyperText Markup Language.

To demonstrate an example of HTML tags enclosings text and other objects, we’ve created a small fragment of HTML in a document that would look like this below:

<h1>Cobb salad</h1>
<p>Cobb salad is a tasty salad, one of my favorites!</p>

The above HTML fragment consists of a heading and a paragraph. The heading “Cobb salad” is enclosed within an HTML h1 element, and the sentence “Cobb salad is a tasty salad, one of my favorites!” is enclosed within an HTML p element.

The HTML h1 element starts with the tag <h1> and ends with a closing tag </h1> like below:

<h1>Cobb salad</h1>

Likewise, the HTML p element enclosing the paragraph starts with the tag <p> and ends with tag </p>. 

<p>Cobb salad is a tasty salad, one of my favorites!</p>

This format is a structure you will see again and again. It’s pretty much the standard format except for a few elements like the image, meta, script, link, and a few other HTML elements which don’t have a closing tag.

What does this HTML fragment look like if viewed in a browser like Chrome, Firefox, Safari, or Microsoft Edge? Well, it would look somewhat like this:

Cobb salad
Cobb salad is a tasty salad, one of my favorites!

As you see above the text is rendered but the HTML tags are hidden from the user.

Let’s look at a more extended example below:

<h1>Cobb salad</h1>
<p>Cobb salad is a tasty salad, one of my favorites.</p>
<p>The ingredients for Cobb salad include:</p>
<ul>
  <li>bacon</li>
  <li>egg</li>
  <li>blue cheese</li>
  <li>lettuce</li>
</ul>

In this extended example, we have added one more HTML paragraph element:

<p>The ingredients for Cobb salad include:</p>

Additionally as well as an HTML unordered list:

<ul>
  <li>bacon</li>
  <li>egg</li>
  <li>blue cheese</li>
  <li>lettuce</li>
</ul>

The HTML ul element contains HTML list item elements. Unordered means that the list will be shown to the reader as a bulleted list without numbers.

Later when we look at CSS we will demonstrate how you can control precisely how the unordered list is presented visually to the reader.

The unordered list element starts with <ul> and ends with </ul> tag. The contents of the unordered list element is a series of li elements; list item elements. Again each element is opened by <li> and closed by </li> tag. I am sure you recognize the pattern by now!

Here is what the HTML fragment above would look like rendered to a reader in a browser window:

HTML Rendered In Browser
HTML Rendered In Browser

Do you have a feeling for what an HTML document would look like? If not, scroll back up and review until you are comfortable with the HTML structure and how it renders in the browser to a user.

Vocabulary: Element and Tag

We talked about the h1, ul, li, and p elements above. Elements are the basic building blocks of an HTML document, somewhat like a sentence is a building block when you write a publication in an English language text.

Let’s look again at the HTML fragment we saw at the start of this tutorial:

<h1>Cobb salad</h1>
<p>Cobb salad is a tasty salad, one of my favorites!</p>

This fragment consists of two HTML elements. The h1 element starts with <h1> and ends with </h1>. Likewise the p element enclosing the paragraph starts with <p> and ends with </p>.

<H1> is the start tag of the h1 element and </h1> is the end tag. Together with the text between the two tags, they form an h1 element. The text between the start and end tags of an element is the contents of the element.

What are the start and end tags of a p element?

I am sure you were able to answer that question quite easily. The start tag of the p element is <p> while the end tag is </p>.

<p>Contents!</p>

Sometimes the start tag is called an open tag and the end tag is called a closing tag. You have already seen both names used in this HTML tutorial.

Vocabulary: Markup

To create an HTML document is to apply HTML markup to a text document. Marking up a document is a process where you specify the structure of the document using HTML tags. You place text, images, objects, videos, headings, paragraphs, and other content in the document inside the appropriate HTML elements.

Below is a small paragraph marked up with an HTML paragraph element:

<p>Ah!! Very good question indeed my friend. It seems I've lost my compass and map!</p>

Later we will demonstrate how to use CSS (Cascading Style Sheets) to control the looks of the various HTML elements within an HTML document.

Of course, you don’t need to wait to apply HTML markup until you have finished creating the content of a document. Once you are familiar with HTML you will find it easy to type the HTML markup as you type in the document contents. This is how web pages are created.

Tutorial Summary

We started by looking at some simple, but real HTML fragments. You saw how headings are enclosed by the heading elements and text paragraphs are enclosed by the p elements. I hope this gave you a feel for what HTML documents look like.

We then discussed what the HTML Element and Tag were. HTML elements are the structure of contents in web documents, be it a heading, a paragraph, a list item, images, or more. An Element starts with a start tag and ends with a closing tag.

<h1>Cobb salad</h1>
 ^    ^         ^
 |    |         |—— End tag
 |    |—— Element contents
 |—— Start tag

Finally, we had a look at the phrase HTML Markup and the process of marking up a text document for publication on the web.

Other Tutorials in This Series