Decoding HTML, The Language of Computers

HTML, or HyperText Markup Language is the most used markup language for creating webpages to be viewed in a web browser. There are over 100 different HTML tags that are used to mark text that is to be displayed in certain ways.

HTML is used in nearly every aspect of a website, including displaying images, displaying videos, modifying the appearance of text, formatting of the HTML page, loading JavaScript, and many other things. While learning the basics of HTML can be accomplished in an afternoon, learning advanced HTML in conjunction with Cascading Style Sheets (CSS) can take years.

History of HTML

HTML can trace its roots back to European Organizations for Nuclear Research, known as CERN. A man by the name of Tim Berners-Lee proposed a system in 1980 for CERN researchers to share documents with each other.

In 1990, Berners-Lee wrote the server software and the first browser to display the pages. Once the groundwork was laid, HTML was quickly improved throughout the 1990s. The World Wide Web Consortium (W3C) was formed to maintain the HTML specification. HTML 2.0 was published in November of 1995. HTML 3.2 came out in January of 1997. HTML 4.01 came out in December of 1999 and is the most current version of the HTML standard.

A 5th version of HTML is currently in draft form and is known as HTML5. The HTML5 standard has been worked on for a number of years, and adds a number of new features such as the ability to embed video and audio using purely HTML as opposed to HTML 4.01 methods that generally involve a 3rd party program known as Flash.

Recreation of the first website ever made at CERN

About the different versions of HTML

A brief history of HTML

History of the Internet

About the HTML5 video element

Components of HTML

This is an example

The above example is how to make a hyperlink (usually just known as a link) with HTML. The entire thing is called an HTML element. An HTML element is generally wrapped with what are known as HTML tags. In this example, there is an opening tag, and a closing tag, ““.

The various tags tell the browser what it needs to do to display the text in the intended way. In this example, an “a” tag is being used, a being short for anchor. Inside the opening tag, you’ll see href=”http://www.example.com”. This is known as an attribute, and tells the browser of any special information that needs to be applied to the tag.

The “name” of the attribute is “href” and the “value” is “http://www.example.com”. “href” is short for Hypertext Reference and tells the browser where the link should be pointing to – in this example it is pointing to http://www.example.com.

Lastly, we have the text that is contained within the tag. This is what is being manipulated by the tag that is surrounding it. In this example the text “This is an example” is being turned into a link that points to http://www.example.com. In a browser, the above example becomes: This is an example

There are over 100 different HTML elements that are able to create everything that you see on a webpage. There are also a large number of attributes that can be given to a tag to modify its behavior.

To complicate things even more, there is something called Cascading Style Sheets (CSS) that are used to style HTML tags. There are hundreds of different styles that can be applied to a tag to modify its function. A web developer needs to leverage all of these things together in order to create a fully functioning web page.

Anatomy of an HTML tag

A listing of all of the HTML5 elements

A non-exhaustive list of CSS styles

About some common HTML attributes

Delivery of HTML

HTML is delivered to your computer by something called a web server. A web server contains all of the pages of a website and delivers them to people making requests to view pages. Web servers can be set up on nearly any machine, however generally web servers are hosted inside data centers on rented machines. The following is a simplified HTTP request that gets made when a browser makes a request for a webpage:

The following is a simplified HTTP request that gets made when a browser makes a request for a webpage:

1. The client (computer making the request) makes a DNS query to determine what the IP address is that the request should be sent to.
2. The client then establishes a connection with the IP address of the web server.
3. Once the connection was made, an HTTP request is made to the web server for the page.
4. The web server then finds the data and sends it back to the client making the request.
5. The connection is then closed.

Once the page is delivered to the browser, the browser then interprets the HTML and displays it to the screen.

The three most common browsers people use are Chrome, Firefox, and Internet Explorer. Each of these browsers process HTML and CSS rules is very slightly different ways, so sometimes the same page will look slightly different depending on which browser you are using.

Getting started with an Apache web server

How to set up an IIS web server

How browsers work

Anatomy of an HTTP Response

Variations of HTML

There are two main flavors of HTML, transitional and strict. Strict is much more restricted in terms of the code that is allowed and the formatting of it. Transitional is much more accepting of code. The W3C provides validators for both transitional and strict that allows you to enter in a URL or a section of code and the validator will parse it and tell you any errors it found.

While validation errors aren’t a good thing, they are not necessarily a bad thing either. Modern browsers are very good at interpreting what the intended result is and can fix or ignore many of the issues a validator will find.

W3C markup validator

HTML vs XHTML, another web standard

Transitional vs strict markup

When to use transitional vs strict

Share on social networks