Online HTML Guide for Beginners

HTML stands for Hypertext Markup Language, which is standard code for creating font, color, graphic, and hyperlink effects on webpages. HTML is what forms the structure of many webpages and online by using markup elements represented by tags. These tags label and form different types of content such as headings, paragraphs, tables, lists, and more. Read this online HTML guide for beginners to learn how to create websites and webpages.

Free Insurance Comparison

 Secured with SHA-256 Encryption

Chris Tepedino is a feature writer that has written extensively about home, life, and car insurance for numerous websites. He has a college degree in communication from the University of Tennessee and has experience reporting, researching investigative pieces, and crafting detailed, data-driven features. His works have been featured on CB Blog Nation, Flow Words, Healing Law, WIBW Kansas, and C...

Full Bio →

Written by

Laura Walker graduated college with a BS in Criminal Justice with a minor in Political Science. She married her husband and began working in the family insurance business in 2005. She became a licensed agent and wrote P&C business focusing on personal lines insurance for 10 years. Laura serviced existing business and wrote new business. She now uses her insurance background to help educate...

Full Bio →

Reviewed by Laura Walker
Former Licensed Agent

UPDATED: Nov 24, 2021

Advertiser Disclosure

It’s all about you. We want to help you make the right coverage choices.

Advertiser Disclosure: We strive to help you make confident insurance decisions. Comparison shopping should be easy. We are not affiliated with any one insurance company and cannot guarantee quotes from any single insurance company.

Our insurance industry partnerships don’t influence our content. Our opinions are our own. To compare quotes from many different insurance companies please enter your ZIP code above to use the free quote tool. The more quotes you compare, the more chances to save.

Editorial Guidelines: We are a free online resource for anyone interested in learning more about insurance. Our goal is to be an objective, third-party resource for everything insurance related. We update our site regularly, and all content is reviewed by insurance experts.

HTML stands for Hypertext Markup Language, which is a standard markup language for creating font, color, graphic, and hyperlink effects on webpages. It can be a useful tool for creating simple webpages and websites that may need to include text, buttons, forms, links, quotes, lists, and images.

History of HTML

HTML has an interesting history. In 1980, a physicist named Tim Berners-Lee prototyped ENQUIRE, which was a system for he and other CERN researchers to share and utilize documents. In 1989, the physicist would go on to write a memo proposing an internet-based hypertext system. In the late 1990s, he wrote the browser and server software for HTML.

A description of it first became publicly available in a document titled “HTML Tags.” The paper described 18 basic elements of the original HTML. The majority of the elements were influenced by Standard Generalized Markup Language for document formatting at CERN.

HTML began to go through extensive development in the 1990s, as many newer and more expansive versions were created for use on the web. In January of 2008, HTML5, the version we still use today (with some modifications), was first published as a working draft.

Resources:

Compare The Best Insurance Quotes In The Country

Compare quotes from the top insurance companies and save!

 Secured with SHA-256 Encryption

HTML Basics

HTML is what forms the structure of many webpages. It does this by using markup that includes elements represented by tags. These tags label and form different types of content such as headings, paragraphs, tables, lists, and more. They, along with HTML attributes, can change the color, size, font, visibility, or position of text and other objects on a webpage.

General HTML Concepts

By putting all these elements together, a webpage is formed. An example of a basic text-only webpage may look somewhat like this in HTML:

<!doctype html>
<html>
<head>
<title>Learning HTML</title>
</head>
<body>
<p>This is where we discuss how to use HTML to make an attractive webpage.</p>
</body>
</html>

HTML Elements, Tags, and Attributes

HTML elements are essentially the building blocks of the HTML pages you see online. These elements are represented by tags that look like this:

<>

The elements include a start tag and an end tag that contain content in between.

Basic elements include, but are not limited to:

  • <html> – this is the root element of an HTML page
  • <meta> – this element will have meta information about a page for easier web crawling
  • <title> – this element creates the title for a page
  • <body> – everything in this element becomes visual page content
  • <h1> – this element creates a large heading, such as the title of a blog article
  • <p> – this element defines where a paragraph begins and ends

Attributes help to customize the webpage further. They are used to define the characteristics of an HTML element and are placed inside of the tags. All attributes include a name and a value. The name will be the type of property, such as <p> for a paragraph, while the value (placed in quotes) will define how you want that property to be set, such as if you would like your paragraph to be centered, have a firm margin on the left, or have that margin on the right.

Example:

<body>

<p align = “left”>Use this for left alignment</p>

<p align = “center”>Use this for center alignment</p>

<p align = “right”>Use this for right alignment</p>

</body>

Text

With text formatting, you can apply attributes to text such as bold, italic, and more. Here are some of the most commonly used tags to alter how text appears on a page:

  • <b> – Bold text
  • <strong> – Important text
  • <i> – Italic text
  • <em> – Emphasized text
  • <sub> – Subscript text
  • <sup> – Superscript text
  • <small> – Small text

Example:

<i>This text will appear as italic</i>

Lists

HTML lists are created between <ul> (unordered/bullet list) or <ol> elements. <ul> tags are for unordered or bulleted lists, while <ol> tags are for ordered or numbered lists. For lists, we also use <li> tags to define each list item.

Example:

<ul>
<li>Pens</li>
<li>Markers</li>
<li>Keyboard</li>
</ul>

Images

In HTML, images are placed between <img> tags. The attributes that will be listed between these tags include the source file (where the image is located), alternative text (defined as alt), and the width, and height which are defined as style attributes.

Example:

<img src=”image.jpg” alt=”A picture” style=”width:240px;height:160px”>

Tables

An HTML table will have the <table> tag. In addition to this, table rows will be defined with <tr> tags, table headers will have <th> tags, and table cells will have <td> tags.

Example:

<table>
<tr>
<th>Product Name</th>
<th>Product Color</th>
<th>Product Price</th>
</tr>
<tr>
<td>Beach ball</td>
<td>Blue</td>
<td>$10</td>
</tr>
<tr>
<td>Sunglasses</td>
<td>Black</td>
<td>$60</td>
</tr>
</table>

Forms

HTML forms are a little more complicated because they may include multiple elements, depending on what type of form your website requires.

The <form> element is for placing forms in an HTML webpage. In between <form> and </form> you can include input elements such as:

  • <input type=”text”> for text fields
  • <input type=”radio”> for selection buttons
  • <input type=”submit”> for a submit button
  • and more.

Comments

If other people are working on your website, you may want to leave comments in your HTML code so that they understand what particular aspects of your code are intended for. These comments will only be seen by people accessing the HTML and will not be viewable by people visiting your web page.

You can add comments with the following syntax:

<!– Put your comment here –>

Resources:

Compare The Best Insurance Quotes In The Country

Compare quotes from the top insurance companies and save!

 Secured with SHA-256 Encryption

Online Tutorials for Beginners

There is more to HTML than what you see above. HTML can help you to embed programs written in scripting languages such as JavaScript. You can also include CSS to define the look and layout visitors will see when they come to your website. The sky is the limit.

Here are some great tutorials to get you started:

  • Austin Community College: HTML basics
  • Massachusetts Institute of Technology: HTML tutorial
  • Xavier University of Louisiana: HTML tutorial

Additional Resources for HTML Beginners

Are you looking for something to take your learning further? There are some great and varied resources online to help you in creating the perfect customized webpage (or even a whole website)!

See some of our favorites below:

Resources for Teachers and Educators

Teaching HTML does not have to be difficult. There are resources available for guiding students and giving them the practice that they need to get on their way towards adding their own customized content to the internet.

Resources:

Free Insurance Comparison

Compare quotes from the top insurance companies and save!

 Secured with SHA-256 Encryption