Stack Diary / Reference

HTML

HTML stands for HyperText Markup Language. It is the standard markup language for creating web pages and web applications. HTML is not a programming language, rather it is a markup language that defines the structure of your content.

The Basics

HTML describes the structure of a web page semantically and, to some extent, includes cues for the appearance of the document.

HTML code ensures the proper formatting of text and images so that your Internet browser may display them as they are intended to look. Without HTML, a browser would not know how to display text as elements or load images or other elements.

Structure of an HTML document

A basic HTML document consists of nested elements, defined by tags. Tags usually come in pairs: an opening tag to start an element and a closing tag to end it.

Here’s what a very basic HTML document might look like:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>This is a Heading</h1>
        <p>This is a paragraph.</p>
        <p>This is another paragraph.</p>
    </body>
</html>

Let’s break this down:

  • <!DOCTYPE html>: This is a declaration and it helps the browser to display a web page correctly.
  • <html>: This element is the root element of an HTML page.
  • <head>: The head element contains meta-information about the document. It can contain elements like <title>, <script>, <style>, <link>, <meta>, etc.
  • <title>: The title element specifies a title for the document. It is required in all HTML documents and it defines the title in the browser toolbar, provides a title for the page when it is added to favorites, and displays a title for the page in search engine results.
  • <body>: The body element contains the content of the document, such as text, hyperlinks, images, tables, lists, etc.
  • <h1>: This is a heading tag. HTML offers 6 levels of headings: <h1> is the highest (or most important) level and <h6> is the lowest.
  • <p>: This is a paragraph tag. It is used to define a block of text as a paragraph.

Other important aspects of HTML

HTML Elements

HTML elements are the building blocks of HTML pages. They are represented by tags. HTML tags label pieces of content such as “heading”, “paragraph”, “table”, and so on.

HTML Attributes

HTML attributes provide additional information about elements. They always come in name/value pairs like: name="value". They are always specified in the start tag.

Hyperlinks

Hyperlinks are one of the most fundamental aspects of an HTML document. You create hyperlinks using the a tag and the href attribute.

<a href="https://www.example.com">This is a link</a>

Images

You can embed images into an HTML document using the img tag and the src attribute. The alt attribute provides an alternative description for the image.

<img src="image.jpg" alt="My test image">

Lists

There are two main types of lists that you can create with HTML: unordered (bulleted) and ordered (numbered).

<!-- unordered list -->
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<!-- ordered list -->
<ol>
  <li>Coffee</li>


 <li>Tea</li>
  <li>Milk</li>
</ol>

HTML Forms

HTML forms are used to collect user input. The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

<form action="/submit_form" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

HTML Versions

HTML has gone through several versions since its inception:

  • HTML 1.0: This was the first release of HTML to the public.
  • HTML 2.0: This version was the standard for website design until January 1997 and defined many core HTML features for the first time.
  • HTML 3.2: Introduced many features, most importantly the incorporation of CSS.
  • HTML 4.01 (Traditional HTML): This was the standard version of HTML from 1999-2017.
  • XHTML (eXtensible HyperText Markup Language): Based on XML and therefore required the code to be clean and error-free.
  • HTML5: This is the current version and includes new functionality such as native support for video and audio embedding, and the canvas element for drawing, among other things.

HTML is the backbone of any web page and provides the means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes, and other items. HTML elements are the building blocks of all websites.

Note that while HTML structures the content of the web, CSS (Cascading Style Sheets) is used to style this structured content, and JavaScript allows for interactive components. Together, these three technologies form the basis of most of the World Wide Web.