Lets Cook Up Some HTML

HTML is the basis for the code that most webpages are written in. It’s not a programming language per se, but more a description of different elements of a page.

Hypertext

HTML is an abbreviation for Hypertext Markup Language. A markup language is a way of writing a document wherein the styles, design, and layout of the document are separate from the text. An example would be:

This will appear in a strong font

The text is of course, “This will appear in a strong font” and the markup is placed around the text in between the < and > signs. The markup always appears with a start and an end – begins an action, whilst with the extra slash ends a command. Alternatively, starts and ends the action within a single command.

The Hypertext part of the name refers to the particular features of the language, which includes “hyperlinks”, which are clickable links between documents and files.

The internet is not the only place to use hypertext. Indeed, it has been around in various printed forms for over 70 years but gained greater popularity in the digital era with the late 80s release of the “Hypercard” program for the Apple Mac. This program allowed the user to create flat documents, in the style of simple address cards, but gave the ability to link one card to another. In this way, stories could be built, references could be made, and so on.

The internet existed in universities and within military settings long before the world wide web existed. Hypertext allowed information to be easily shared, and the small file size made it ideal for use in the late 80s/early 90s. When the first web browsers were built, they were designed to interpret HTML markup, and so the first modern web pages were born.

Progress through the years

The original specification only included a few very basic “tags”, the name given to the command between the < and > signs. Tags could be used to specify colors, font styles, the inclusion of another file, and links to other documents. Tags are used by naming them and potentially specifying an attribute.

For example:

makes any enclosed text stronger (bolder)

includes an image file on the page — an attribute would be “src” to specify the name and/or location of the file, e.g. – note the use of the closing slash within the tag.

Special tags are used to describe sections of a page.

… is used to encompass the entire page, and notifies the browser when the end of the page has been reached.

… is used at the top of the page, for instructions that aren’t directly drawn in the browser, for example to reference other supporting files that will be needed to construct the entire page

… contains the main part of the page, most of which will be drawn in-browser for the user to see

Various tags are used to define text elements, including

<

p> to marks paragraphs,
to mark line breaks,

<

h1> to

<

h6> to mark different levels of importance of titles (headers), and

<

ul> and

<

ol> for unordered and ordered lists — essentially bullet points and numbered lists.

As time went on, more and more tags were added to the supported list, and different “versions” of HTML were created.

The latest and most complete version is known as HTML5 and includes numerous media related tags and features. Due to the file sizes and processing power needed, many of these would have not worked on the earlier browsers and computers.

Although HTML is often called a standard, the way a browser supports that “standard” can vary. For example, if a font is unspecified, different browsers may substitute a different default font. On-screen rendering between browsers may also differ, even on the same font — right down to the gaps between the letters being different.

Modern websites use techniques in order to work around this, as there is no guarantee of screen size when viewing a page. Older sites would rely on a particular screen resolution and expect things to work in a certain way, but sites are now rendered on tiny phone screens up to enormous 4k screens, meaning there are no guarantees on how a page will be displayed.

This has brought about a return to the original concept of a markup language — that the content is separate from the layout. While a mobile phone screen will display the same information as a 4k screen, it is more likely to have information in a long scrolling list, whereas the larger screen can display side-by-side columns.

Browser Wars

Throughout the 90s, various we browsers competed to be the number one choice. Each claimed to be faster, better, more efficient, than the others. The first wars included browsers such as Internet Explorer and Netscape, moving on to include Firefox and Opera. As Netscape fell, others moved in to replace it, including Chrome and others like Edge and Vivaldi. Nowadays, there are many options, from minimalist to browsers that are virtual operating systems in their own right.

Standardization has almost returned, as was necessary with the inclusion of mobile browsers that run on portable devices. For a while, Internet Explorer was the king of browsers, and included Microsoft-designed extensions that allowed it to run native Windows code within the browser — a tactic that failed as it limited the devices that pages could work on, and had the potential to be abused by malicious programs.

If a webpage needed to run a Windows program on your phone, you wouldn’t get too far with it, as even Windows phones wouldn’t run the code required.

Where HTML is headed

HTML will remain as an important part of the web, as it is extremely useful for describing and designing webpages. Certain features have been deprecated over time; with the advent of CSS (cascading stylesheets) many design elements are no longer used or needed. However, different features have been added to enhance the usefulness of HTML, and so it should be around for a long time yet as the basis of many millions of webpages.html photo

Reply