Online HTML Guide for Beginners

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:

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:

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:

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: