What Is HTML and How is it Used?

HTML is a markup language that website developers use to create all of the web pages you find on the internet.

HTML is a markup language that website developers use to create all of the web pages you find on the internet.

What Is HTML?

HTML stands for Hyper Text Markup Language. It defines the layout and structure of a web page using formatting “tags” inside of brackets made up of less than “<” and greater than “>” symbols.

Every web page element includes a specific label that tells the browser how to format or structure that section of the page. Thus, an entire web page is simply a series of those elements.

For example, one of the most basic web pages will contain:

  • <html>: Marks the beginning and end of an HTML file
  • <head>: Marks the beginning and end of the web page header information
  • <title>: Labels the title that should be displayed in the browser title bar
  • <body>: Marks the beginning and end of the web page content
  • <h1> to <h6>: Sizes headers throughout the document from large (H1) to very small (H6)
  • <p>: Inserts a paragraph break as two carriage returns (one space between lines)
  • <br>: Inserts a line break (no space between lines)
  • <b>: Bolds the text between the tags
  • <em>: Italicizes the text between the tags
  • <img src>: Inserts an image wherever this tag exists
  • <a href>: Inserts a link to another web page inside the document

There are many other HTML tags you can use, but the ones above are the most common in most web pages across the internet.

An Example of an HTML File

It doesn’t take a programming background to create your own web page. In fact, you can open Notepad right now, type some simple text, and save it as a .html or .htm file. This could be the first web page you’ve ever created, and all you need is your own computer.

The following is an example of a very simple HTML file.

<!DOCTYPE html>
<html lang=”en”>

<title>Web Page Title</title>

<h1>This is the First Header</h1>
<p>This is my first paragraph.<br>
This is the second line<br></p>

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


Here’s how this hyper text markup works:

  1. The first two lines tell the browser that the document is in HTML format and that the language is English.
  2. The page title enclosed by <title> and </title> set the web page for the browser to display as “Web Page Title”.
  3. The section enclosed with <body> and </body> tells the browser that these lines contain the content to display on the web page.
  4. The header enclosed with <h1> and </h1> tags create “This is the First Header” in the largest header font available in HTML.
  5. The <p> and </p> tags insert a space after the </p> tag.
  6. The <br> tag inserts a single line break after that sentence.
  7. </html> ends the document, and the web page will stop loading at this point.

Here is the above web page file when you open it with your browser.

browser view

As you can see, it’s straightforward to create a web page even if you don’t have a web server. All you need is to create an HTML file and load it with your

How HTML Works

Obviously, most pages aren’t stored on your computer. Instead, they’re stored on web servers out on the internet. So, when you visit an article or other content on any website, the server sends your browser the .html file that contains the content for that page.

You can see the HTML code for any web page in the Chrome browser by right-clicking anywhere on the page and selecting View page source.

view page source

This will show you the code behind the web page. You can see that it’s an HTML file by the first tag at the top of the file.

html source

However, you’ll also notice that the source code contains other types of tags that aren’t HTML tags at all.

Embedded Scripts in HTML Files

For example, you may see code that calls .php or .js files. These are PHP and Javascript scripts that allow dynamic web pages that load different content depending on user inputs or the output of other scripts that run on the webserver or browser and deliver content into the same HTML file that your browser reads.

other code

Since HTML is a “static” method used to format content on a web page, web designers need a more dynamic way to change content on the page based on where browsers hover or click. Browsers can read in and interpret Javascript code, altering the formatting or other elements of a web page based on user interaction.

For example, this is how menus on a page will change color whenever you hover over each menu item.

javascript example

PHP code embedded into the web page allows things like dynamic buttons to work properly. For example, the Comments button on the bottom of the articles you’ll see on this site is driven by PHP code that runs on the server and will deliver the comments posted on each article.

comments button

PHP also allows web admins to create innovative features like infinite scrolling that continues loading new articles as you scroll down the site’s main page.

Thanks to the modern web-based scripting languages, today’s web pages are no longer just static, which is all HTML code will alone allow.

Other HTML Tags

If you’re ready to get started creating your own HTML files, you’ll need to know how to use the most common HTML tags beyond the basic ones described above.

The following are a few examples of some more HTML tags you can use when you code your own web pages.

HREF to Insert Links

To embed a link inside your web page, use a href.

<a href=”https://www.groovypost.com/tips/lifehack-find-your-iphone-using-hey-siri/”>Find Your iPhone Using Hey Siri</a>

This will link the text “Find Your iPhone Using Hey Siri” to the URL link you’ve included in double-quotes after “href=”.

IMG SRC to Insert Pictures

You can insert images into a web page using img src.

<img src=”my-picture.jpg” alt=”my profile photo” style=”width:150px;height:120px”>

This will pull the image my-picture.jpg from the web server and will display it on the page where you’ve placed this tag, with a wide of 150 pixels and a height of 120 pixels.

The alt parameter displays the text “my profile photo” in browsers that can’t display the image. If you don’t include the “style” parameter, the image will display at its original resolution, which may be too big or too small for the area of the page where you’re embedding it.

UL and OL to Create Lists

If you want to use bullet or numbered lists in your content, there are two tags that allow you to do this.

The following code will insert an unnumbered list (bullets):

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

Use <UL> at the start of the list and </UL> at the bottom of the list. Enclose each item inside <LI> and </LI> tags.

You can use the same approach for a numbered list by using <OL> which stands for “Ordered List”.

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

Inserting Tables

Web designers used to use large tables to format web pages. But with the advent of Cascading Style Sheets (CSS), this is no longer necessary. Instead, CSS files are stored on the webserver, and HTML pages call those files to determine how to format things like margins, font sizes and colors, and more.

However, tables are still useful to display things like data. To insert a table, enclose the beginning of the content with <TABLE> and end it with </TABLE>.

Enclose each row with <TR> and </TR>, and each individual column header with <TH> and </TH>. Each regular cell, enclose with <TD> and </TD>.

<table border=1>
<th>Phone Number</th>
<td>Ryan Dube</td>
<td>100 Jones Lane; Johnson City, TN</td>

This will output to a web page as follows:

table example

With just these basic elements, you can create useful static web pages to display your content on the internet. All you need if you want to make it public and viewable by the world is the sign up for a web hosting account and store your files in the public folder inside your account.

In fact, launching your own website is surprisingly easy, especially if you opt to use a content management platform like WordPress.

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *


To Top