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.
- University of Washington: A brief history of HTML
- The University of North Carolina at Chapel Hill: The history of HTML
- Columbia University: A brief history of the world wide web and the internet
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:
<p>This is where we discuss how to use HTML to make an attractive webpage.</p>
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.
<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>
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
<i>This text will appear as italic</i>
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.
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.
<img src="image.jpg" alt=”A picture" style="width:240px;height:160px">
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.
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.
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 -->
- West Virginia University: Basic HTML
- University of Virginia: HTML: A basic guide sheet
- Allegheny College: Basics of HTML
- Library of Congress: Hypertext Markup Language (HTML) 5
Online Tutorials for Beginners
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:
- Mesa College: CSS and HTML tools
- Milwaukee School of Engineering: HTML tools and information
- Creighton University: Tools for web publishing
- Wellesley College: A crash course in HTML
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.
- George Lucas Educational Foundation: Teach your kids to code: 6 beginner’s resources for parents
- University of South Florida: Interactive HTML tutorial