Introduction

HTML is the skeleton of all web pages. If you are planning to be a web developer, especially focusing on front-end development, it is the very first thing you need to learn. If you are a newbie in this field, get ready to be excited for what you are about to discover!

What is HTML?

To answer that we need to know every web page appearing on the web has a structure which comprises images, text and so on. If you right click on any web page and choose “View page source” from the menu, you will get a glance on HTML in the opening tab.

HTML stands for HyperText Markup Language:

  • A markup language is a computer language that defines the structure and presentation of raw text.
  • In HTML, the computer can interpret raw text that is wrapped in HTML elements.
  • HyperText is text displayed on a computer or device that provides access to other text through links, also known as hyperlinks.

HTML is the first thing anyone should know to be able to build websites but as you progress you can add CSS and even later JavaScript to create more interactive and appealing websites.

 But for now, we are going to stick with the basic HTML and how to add content like text, images, videos etc. to every webpage. If you don’t like the way your webpage looks, don’t worry. We are just getting started!

HTML Anatomy

HTML is composed of elements. This means anything you decide to add to your webpage from text to images and etc. is essentially an element. So elements define the content of the web page. Below is an example of how these elements are written:

This example shows a HTML element called paragraph. As we can see, the paragraph element includes opening tag (<p>), the content (“Hello World!” text), and a closing tag (</p>). Therefore every HTML element is made up of these three main parts:

  • Opening tag (which is the name of the tag enclosed with <>)
  • Content (What appears on the inside of the element which can be in any form like text or other elements)
  • Closing tag (The name of the tag appears here again this tie enclosed with “</>” The / comes before the name of the element)

There are lots of different elements to display different types of content on a webpage.

The Body

One of the key HTML elements we use to build a webpage is the body element. Only content inside the opening and closing body tags can be displayed to the screen. Here’s what opening and closing body tags look like:

<body>

</body>

 

After the body element is added to the file, other types of content like text or images can be placed inside of that.

<body>
  <p>What’s up?</p>
</body>

HTML Structure

HTML is organized as a tree structure and there is a parent-child relationship between elements. When an element is contained inside another element, it is considered the child of that element. The child element is said to be nested inside the parent element.

<body>
  <p>This element is the child of body element</p>
</body>

 

In the example above, the <p>element is considered a child of the <body>element, and the <body> element is considered the parent.

Since there can be multiple levels of nesting, this analogy can be extended to grandchildren, great-grandchildren, and beyond. The relationship between elements and their ancestor and descendent elements is known as hierarchy.

Consider a more complicated example like the following:

<body>
  <div>
    <h1>Sibling to p, child of div and grandchild of body</h1>
    <p>Sibling to h1, child of div and grandchild of body</p>
  </div>  <p>Sibling to div and child of body</p>
</body>

 

In this example, the <body> element is the parent of the <div> element. Both the <h1>and <p> elements are children of the <div>element. Because the <h1> and <p>elements are at the same level, they are considered siblings and are both grandchildren of the <body> element.

Understanding HTML hierarchy is important because child elements can inherit behavior and styling from their parent element. This can come in handy especially when you start learning CSS.

Headings

Headings in HTML is exactly what headings are in other types of media. For example, in newspapers, large headings are typically used to capture a reader’s attention. Other times, headings are used to describe content, like the title of articles.

The same is going on in HTML as well. In HTML, there are six different headings, or heading elements.

The following is the list of heading elements available in HTML. They are ordered from largest to smallest in size.

  1. <h1> — used for main headings. All other smaller headings are used for subheadings.
  2. <h2>
  3. <h3>
  4. <h4>
  5. <h5>
  6. <h6>

The following example code uses a headline intended to capture a reader’s attention. It uses the largest heading available, the main heading element:

<h1>THE MOVIE REVIEW</h1>

Divs

One of the most popular elements in HTML is the <div> element that you are going to use a lot. <div> is short for “division” that divides the page into sections. Sectioning a document is mainly used for grouping elements together.

<body>
  <div>
    <h1>Why use divs?</h1>
    <p>Great for grouping elements!</p>
  </div>
</body>

 

You can add any type of content or HTML element inside the <div> element. As you can see in the example above, proper indentation can help a lot with the readability of the HTML document and detecting the parent-child relationship between the elements with a glance.

Attributes

Earlier when we were talking about the structure of an HTML element on “HTML Anatomy” section, we discussed three main parts including opening tag, content and closing tag. But to go further, HTML elements can have attributes too. Some of these attributes exists on all types of elements like “id” and some of them are specific for a given tag.

Attributes are added to the opening tag of an element and can be used for several different purposes from providing information to changing styling. Attributes are made up of the following two parts:

  • The name of the attribute
  • The value of the attribute

One commonly used attribute is the id. This attribute will give the tag a unique identifier which can be very useful when there are multiple tags of the same type like <div> on the web page and we need to find exactly one of them.

When adding an attribute like id to a <div>, we place it in the opening tag:

<div id=“intro”>
  <h1>Introduction</h1>
</div>

Displaying Text

For displaying text in HTML, both paragraph and span elements can be used:

  • <p> (short for  Paragraph) contains a block of plain text.
  • <span> contains short pieces of text or other HTML. They are used to separate small pieces of content that are on the same line as other content.

Take a look at each of these elements in action below:

<div>
  <h1>Artificial Intelligence</h1>
</div>
<div>
  <p><span>Self-driving cars</span> are anticipated to replace up to 2 million jobs over the next two decades.</p>
</div>

 

In the example above, there are two different <div>. The second <div> contains a <p>with <span>Self-driving cars</span>. This <span> element separates “Self-driving cars” from the rest of the text in the paragraph.

When it comes to choosing between span and div elements, remember to use span for cases when you want to separate something which is inline with other elements. Use div when you want to add a new block for your content. You will learn more about this later on.

Styling Text

Styling the document and also the texts found inside it is mainly what CSS does for us which you will learn after finishing this course. Yet it is possible to do some simple text styling using the plain HTML tags.

The <em> tag emphasizes text, while the <strong> tag highlights important text.

  • The <em> tag will generally render as italic emphasis.
  • The <strong> will generally render as bold emphasis.

Take a look at each style in use:

<p>
<strong>Mount Everest</strong> is the <em>highest</em> mountain above sea level, measuring 8,848 meters high(approximately 5,498 miles).
</p>

 

In this example, the <strong> and <em> tags are used to emphasize the text to produce the following:

Mount Everest is the highest mountain above sea level, measuring 8,848 meters high (approximately 5,498 miles).

As we can see, “Mount Everest” is bolded and “highest” is in italics.

 

Line Breaks

The spacing between code in an HTML file doesn’t affect the positioning of elements in the browser. This means if you press Enter in your file to add a line break between the elements in your web page, this just won’t work. HTML has a specific element for this purpose called line break: <br>.

The line break element is unique because it is only composed of a starting tag. You can use it anywhere within your HTML code and a line break will be shown in the browser.

<p>
Mount Everest is the highest mountain <br> above sea level, measuring 8,848 <br> meters high (approximately 5,498 <br> miles).
</p>

 

The code in the example above will result in an output that looks like the following:

Mount Everest  is the highest mountain

Above sea level, measuring 8,848 

meters high (approximately 5,498 

miles).

Unordered Lists

Other than displaying text in paragraphs, there are other forms lists, tables and etc. to present the content to the viewer.

One of these other ways is an unordered list. In HTML, you can use an unordered list tag (<ul>) to create a list of items in no particular order. This tag lists the items each with a bullet point.

Each of the items present inside the list should be inside an <li> tag. Li stands for list item. Look at the example below:

<ul>
  <li>Limes</li>
  <li>Tortillas</li>
  <li>Chicken</li>
</ul>

 

In the example above, the list was created using the <ul> tag and all individual list items were added using <li> tags.

The output will look like this:

  • Limes
  • Tortillas
  • Chicken

Ordered Lists

Ordered lists (<ol>) are like unordered lists, except that each list item is numbered. They are useful when you need to list different steps in a process or rank items for first to last.

You can create the ordered list with the <ol>tag and then add individual list items to the list using <li> tags.

<ol>
  <li>Preheat the oven to 350 degrees.</li>
  <li>Mix whole wheat flour, baking soda, and salt.</li>
  <li>Cream butter, sugar in separate bowl.</li>
  <li>Add egg and vanilla extract to bowl.</li>
</ol>

 

The output will look like this:

  1. Preheat the oven to 350 degrees.
  2. Mix whole wheat flour, baking soda, and salt.
  3. Cream the butter, sugar in separate bowl.
  4. Add eggs and vanilla extract to bowl.

Images

All the elements that we have talked about so far have been revolving around displaying text! What if you need to have content like images inside your page?

The <img> tag allows you to add an image to a web page. Most elements require both opening and closing tags, but the <img> tag is a self-closing tag. It means the opening and closing tag are the same tag. Look at the example below to better understand the structure:

<img src=“image-location.jpg” />

 

Note that with or without the “/” at the end of the tag, this will word fine.

We talked about attributes earlier.The <img> tag has a required attribute called src. The src attribute which stands for source, defines the address where the image is located.This address is called uniform resource locator (URL) of the image. A URL is the web address or local address where a file is stored.

Image Alts

The alt is an optional attribute, which means alternative text. It brings meaning to the images on our sites. The alt attribute can be added to the image tag just like the src attribute. The value of alt should be a description of the image.

<img src=”#” alt=”A field of yellow sunflowers” />

 

The alt attribute also serves the following purposes:

  • If an image fails to load on a web page, a user can mouse over the area originally intended for the image and read a brief description of the image. This is made possible by the description you provide in the alt attribute.
  • Visually impaired users often browse the web with the aid of screen reading software. When you include the alt attribute, the screen reading software can read the image’s description out loud to the visually impaired user.
  • The alt attribute also plays a role in Search Engine Optimization (SEO), because search engines cannot “see” the images on websites as they crawl the internet. Having descriptive alt attributes can improve the ranking of your site.

It is better to provide for images that exist on our webpage to make it more descriptive to the viewer.

Videos

In addition to images, HTML also supports displaying videos. Like the <img> tag, the <video> tag requires a src attribute with a link to the video source. Unlike the <img> tag however, the <video> element requires an opening and a closing tag.

<video src=“myVideo.mp4” width=“320” height=“240” controls>
  Video not supported
</video>

 

In this example, the video source (src) is myVideo.mp4 The source can be a video file that is hosted alongside your webpage, or a URL that points to a video file hosted on another webpage.

After the src attribute, the width and height attributes are used to set the size of the video displayed in the browser. The controls attribute instructs the browser to include basic video controls: pause, play and skip.

The text, “Video not supported”, between the opening and closing video tags will only be displayed if the browser is unable to load the video.

Review

Congratulations! You have successfully completed the first lesson of HTML! You are well on your way to becoming a skilled web developer.

Let’s review what you’ve learned so far:

  1. HTML stands for HyperText Markup Language and is used to create the structure and content of a webpage.
  2. Most HTML elements contain opening and closing tags with raw text or other HTML tags between them.
  3. HTML elements can be nested inside other elements. The enclosed element is the child of the enclosing parent element.
  4. Any visible content should be placed within the opening and closing <body>tags .
  5. Headings and sub-headings, <h1> to <h6> tags, are used to enlarge text.
  6. <p>, <span> and <div> tags specify text or blocks.
  7. The <em> and <strong> tags are used to emphasize text.
  8. Line breaks are created with the <br>tag.
  9. Ordered lists (<ol>) are numbered and unordered lists (<ul>) are bulleted.
  10. Images (<img>) and videos (<video>) can be added by linking to an existing source.

In the next lesson, we’ll take the content that you’ve added to this website and transform it into an HTML document that’s ready to go on the web!