Website Fundamentals: What is HTML?
HTML or HyperText Markup Language is the text-based language in which almost all web pages are written. In the past (and decreasingly now) webpages had the suffix ‘.html’. Even dynamic pages with other file suffixes (e.g. ‘.php’ ) will create, or ‘render’, the code they output as HTML before sending the page to your web browser.
Yadda Yadda Code …
There are lots of technical ways to explain what HTML is – a variant of XML, markup language and so on.
A simpler term is an older one – ‘A Page Description Language’.
HTML describes a page by listing items which will appear on it in the order in which it will appear. HTML contains important information about itself: what version of HTML is it using, what language will the text be in, copyright information and so on. Where relevant, HTML will describe what assets should be included and where they are found. As the name suggests, assets are anything which though not part of the page itself, contribute to it as a whole, for example:
- Images and logos
- Style sheets to govern how the page will look
- Scripts which will allow users to interact with the page
Unlike a lot of computer code, HTML is relatively simple and easy both to read and understand. Modern web page design has made web pages look more technical but at its heart, HTML is a very legible list of lists and sub-items, with a tag at each end.
What’s a Tag?
If you open an HTML file (or select ‘View Source’ if that is enabled on your browser) you will see that it is just text with carets – ‘<’ or ‘>’.
Each pair of carets is called a ‘tag’. The letters between define what kind of tag it is – the element on the page is describing. Because programmers are lazy, tags are abbreviated as far as they can be.
Where a tag contains content, it requires a closing tag to delineate the entity it defines. A closing tag resembles the opening tag but contains a slash ‘/’ character – for example:
<span>I am a bit of HTML</span>Code language: HTML, XML (xml)Because each pair of tags defines an element on the page – all child tags must be closed before the parent element is closed.
This markup correctly closes each child tag before closing the parent.
<p>This code excerpt closes the <span>internal element</span> before closing the paragraph.</p>Code language: HTML, XML (xml)But this could produce unexpected results in the browser.
<p>I am <span>not correct</p>, the paragraph has closed but the span still thinks it is open.</span>Code language: HTML, XML (xml)Because the code is incorrect, a computer will not be able to interpret where one entity starts and another ends. It may not know how this should look.
Common HTML Tags
The <p> or paragraph tag is perhaps the most easily understood of all HTML tags.
<p>And as I sat there brooding on the old, unknown world,
I thought of Gatsby's wonder when he first picked out
the green light at the end of Daisy's dock.</p>Code language: HTML, XML (xml)<em> (representing emphasis normally rendered as italics) and <strong> (normally displayed bold) tags are commonly used inside paragraphs.
<p><em>Zowie Cavie!</em> exclaimed <strong>Taffy Dare</strong>, the ringleader of the Teen Angels</p>Code language: HTML, XML (xml)<img> indicates an image should be inserted on the page.
<img src="https://little-fire.com/logo.png" alt="logo" />Code language: HTML, XML (xml)Note the following.
- The image tag closes itself. Because there is no additional content, no separate closing tag is required. So the tag ends ‘
/>’ to indicate the entity is complete. - The image tag has a source attribute – this tells the browser where to look for the image to display on the internet.
- Because not everyone can see pictures, every image tag requires an ‘alt’ attribute to describe what the image displays. That way a blind person using a screen reader (or a search engine) gets to know what you’re trying to display.
Head, Shoulders, Knees and Foot
<html> wraps the entire document. The closing </html> should always be the last element on a web page.
The <head> section contains tags which describe what the page is called (e.g. the <title> tag), how search engines view the page (the <meta> tags) and references to any resources that the page might need to look and act as required (CSS style sheets and Javascript).
The <body> tag contains everything which will be displayed on the page as it loads.
<html>
<head>
<!-- Information about the page goes here -->
<title>Just a Web Page</title>
</head>
<body>
<p>This is the content of the web page</p>
</body>
<foot>Copyright notices, links to policies, that kind of thing</foot>
</html>Code language: HTML, XML (xml)… and that’s it. There are more tags but they all follow the above rules.
But it Looks Rubbish
HTML tags define what an element is not what is looks like. Even the original <b> tag for bold and <i> for italic have been deprecated for the tags <strong> and <em> which describe the purpose of the element but specifically not how it appears.
An HTML page without additional display information (usually included as a reference to a CSS style sheet in the <head> tag) is likely to look ugly and dull.
But the point is that, by changing the style sheet, the appearance of the page can be changed entirely. So, without changing the content of the html, it can repurposed for:
- a different screen size (a 28″ studio display or a 8″ mobile phone screen),
- display requirements (e.g. a high contrast, large-type display for visually impaired users
- or branding (e.g. the same article can appear on the BBC News page – White headlines on a red background – and the BBC Sports page – Black headlines on a yellow background).
But It’s Boring
HTML on it’s own is dull. It may contain videos or animated graphics but it’s content never changes. To change the content you must either navigate to another page or submit a form.
From its early days validating form input and making images change on rollover, JavaScript has become the de-facto technology for making pages interactive. Over 98% of all web pages implement JavaScript to some degree.
Javascript makes web pages more engaging and dynamic. It powers image carousels and slideshows, add-to-cart popups and many other functions way beyond the scope of this post.
CSS is a set of rules which help refine the appearance of the page. When used well, CSS will make your website reflect your corporate identity and function well at every screen size.
So What?
HTML was designed to build an interface between human and computer. Almost every interaction between a human and a webpage uses an HTML element – a button, an input field, and so on.
Because it is simple to write and understand and because it is designed for human interaction, HTML has ended up everywhere.
HTML goes far beyond web pages – from a text-based application on your phone to control panels on your desktop applications. More than likely, all of them use HTML to display the content and gather the input information. HTML drives computing worldwide.
It’s important stuff.
What is HTML5?
After the early days of the internet where there was a strong sense of individuals doing the internet the way it suited them (Internet Explorer 6 anyone?), the WorldWide Web consortium agreed a new standard for HTML which is common to all.
The HTML5 language incorporates many tags to accommodate technologies which were not readily available in the early days of the internet – for example the <video> tag. This makes it much easier to add the bells and whistles that make your web pages interesting. Because these new tags are part of an agreed standard, you can expect everyone to be able to see Fenton chasing those deer.
As web pages have matured, the need for a more extensive set of standard tags has been identified. For example:
- By embedding your menu in a
<nav>element a search engine can identify where the links to the rest of your site are located. - By putting your carefully compiled article into an
<article>tag, anyone wishing to cite your genius will know exactly where the good stuff is.
There are many more … but they still obey the same simple rules “Open tag, insert content, Close tag”. HTML5 does more than its predecessors but is probably even simpler to write and use.
Will There Be an HTML6?
According to Wikipedia, the answer is “no”:
[HTML5] is the fifth and final[3] major HTML version that is a World Wide Web Consortium (W3C) recommendation.
https://en.wikipedia.org/wiki/HTML5
… so there probably will be.