Hypertext Markup Language, or HTML, is the main ingredient in web pages and works by itself to form a page. It is not so much a programming language as it is a markup language to describe the elements contained within a web page. It defines properties of the web document, the hierarchical structure, and can place emphasis on key words and phrases. It can link one document to another. HTML also represents a method to essentially name and identify elements, as well as give them classes that can be complimented by other languages. For complete beginner’s, HTML can be rather confusing.
I’ll start by explaining what HTML can’t do. It can’t modify the typeface for any element, alter the specific point size of a font, change the width or the height of the screen or even change the background or foreground. Elements that are declared in an HTML document are meant to be static. The only way that any element can be modified dynamically is by way of another language, such as by the use of Javascript, or by code that the browser itself understands by way of a plugin or its core.
Now that you know what HTML cannot do, look at what it can do. It can be used to build the framework for a page. A fair analogy of how HTML works is it is like a carpenter trying to frame a house. Boards, nails, screws and shingles are relatively interchangeable, as is the concept of a house. The only thing that is different between houses is how they are built.
HTML works much in the same way. A valid, well-formatted HTML page generally has header and body sections. The header sections define things that are extraneous to the actual web page, such as the title, any meta keywords and any external dependencies that should be loaded when the web page is, like Javascript and Cascading Style Sheets. The body is what actually defines the content of the web page.
The body is what the person sees when they peruse through the page. It contains both the structure, much like the earlier house example, and it contains any readable text on the page. The body portion of an HTML document logically defines what elements should be grouped inside of what elements. This grouping is also known as the hierarchical structure.
Common layout elements for HTML include tables, paragraph tags and semantic tags. Tables describe a logical layout that specifies a spreadsheet-like structure for data to be displayed. Paragraph tags are meant for large bodies of text. Semantic tags, such as div and span, have no meaning except to logically group text together. Their usage is less important in pure HTML and more significant when combined with other languages.
Each element carries with it the ability to define attributes. These attributes help to distinguish what an element does and how it looks. It can also be used to define what the name and type, or class or an element is.
There are also other interactive elements not covered in this brief overview of what HTML is. There are forms, which can be used to collect data from a user, and other tags which describe the composition of a page.
For an example of the simplest, valid HTML page that a beginner can code, see below. If you would like to test this page out by yourself, save it somewhere on your computer as a document ending in “.html”, and open it with your web browser.
<html>
<head>
<title>This is your title element and will be displayed on the title bar of your window.</title>
</head>
<body>
<h1>This is a main header and helps to mark up what the following text is about.</h2>
<h2>This is an example subheader.</h2>
<p>This is a text paragraph. Most browsers automatically indent this.</p>
</body>
</html>
