Let's talk about what is HTML or should I say a 28-year-old programming language that shapes our lives each day. First of all, it is not a programming language; it is a markup language. :D What is a HyperText Markup markup language? We will get to that later.
The short explanation: HyperText Markup Language or HTML is a language that communicates with our web browser, it dictates the structure of each page on the World Wide Web. It tells the browser how to interpret data to form elements on a website.
The longe explanation: Well that is going to take some time. :) Let’s break it down in 5 chapters:
- History of HTML
- How does an HTML look like
- Basic HTML template
- What is an HTML tag
- What is HTML 5
- Future of HTML
History of HTML
Enquire
A guy named Tim Berners-Lee worked as a freelancer at CERN. In the short time that he worked there, he came up with a plan that would optimize communication between scientists at CERN. Especially the sharing of documents between researchers. This system was called ENQUIRE, and it was the predecessor of the WEB as we know it today. For instance, try to imagine a poorly styled Wikipedia page full of links and you will get the basic idea how ENQUIRE looked liked.
HTML
Fast forward 10 years later and the same guy developed a web browser and specified HTML for the first time. At this time this was still only available to academic institutions. But only one year later it was made available to the general public. YES, the stories of the World Wide Web and of the HyperText Markup Language go hand in hand, as one cannot exist without the other. In fact we could easily change the question from what is HTML to what is WWW.
It was in 1999 with the HTML 4 standard that the markup language started to concern itself not only with providing information but how the presentation of that information should look. This was when websites got some style. The style was defined within each element in the HTML. In fact, it wasn’t until the HTML 5 standard where we saw the complete separation of concern. Thus, HTML defines the structure of a website, while the concern of formatting was given to CSS (Cascading Style Sheets). But don’t worry, you still have some formatting options in HTML 5.
So 39 years later the guy who helped a couple of geeks communicate is now the director of the World Wide Web Consortium (W3C). This consortium oversees the continued development of the Web. He also got a knighthood, and we have to call him Sir Timothy Berners-Lee.
Sir Timothy Berners-Lee team CodeBrainer thanks you for all the fun we had with HTML during years of work :D
How does an HTML look like
Below we have the basic structure of a modern HTML. In the first line, we always have the !DOCTYPE html (Document Type Declaration). “<!DOCTYPE html>” is an HTML5 declaration and the shortest Document Type Declaration you can have. This declaration tells the browser that this is an HTML type document. Next, we start with an opening html tag (in the next chapter we will explain what a tag is), this tells the browser it is reading HTML code.
Thanks for reading!
If you like our code, you can give back by sharing this article!
Following the opening html tag is the head. Notablu, this is my favourite part of the file. Since I am a marketing guy it is also one of the most important ones for me. Here we give the browser valuable information about the website. This information is not visible to a website visitor, but it is essential for making your website better for search engines.
The head is also the part where we make connections to files that correlate with the HTML file (example: CSS file, JavaScript, fonts...).
More importantly, this is also the place where we make the connections to Google analytics, Facebook pixel, and other tools that help us better understand our users and drive more traffic to our website.
Then comes the important part, the <body>. This part is visible to the website visitor, and here we place the content for our website, from a simple text page to an advanced interactive website, which collaborates with CSS and JavaScript. In fact, this is where we have all the content. Furthermore, we can also give additional information to this element by using attributes. However, with HTML 5 layout attributes (attributes that define the look of the whole body (example: bgcolor)) are removed.
Finally the document ends with a closing </html> tag. What is a closing tag or should I say what is a tag anyway?
What is an HTML tag?
In addition to asking ourselves what is HTML, we have to ask what is an HTML element. Each element starts and in most cases ends with a tag. Moreover, a tag tells the browser how to format and display content. An opening tag consists of a name within angle brackets (<>), and a closing tag is the same only that before the name we have a slash (/). Some tags do not have a closing tag. For example, two of the most commonly used, are the image tag (<img>) and the break tag (<br>).
Tags can have attributes that provide additional information about the elements. As you can see in the examples below, following the equals sign attributes are assigned a value. We add attributes in the opening tag, and they are optional for most. On the other hand, one of the exceptions is the image tag that must at least have the src attribute (the alt attribute is optional). Moreover, an image tag is an empty element because it has no content.
<img src="image1.jpg"> or <a href="https://www.codebrainer.com">CodeBrainer</a>
The best way to learn more about tags is to get familiar with a couple of them. Take a look at our blog post where we list the top 10 HTML tags.
Top 10 tags:
<a> for link<b> to make bold text
<strong> for bold text with emphasys
<body> main HTML part<br> for break<div> it is a division or part of an HTML document<h1>... for titles<i> to make an italic text<img> for images in document<ol> is an ordered list, <ul> for an unordered list
<li> is a list item in bulleted (ordered list)
<p> for paragraph<span> to style part of text
What is HTML 5
HTML 5 is the latest standard of HTML; its specifications were published on October 28, 2014. The main focus or should I say purpose is to use HTML for the same reasons as in the beginning, the structure of content. It wishes to separate itself from the styling part completely and persuade web developers to use CSS for formatting.
Because of that, a lot of popular attributes were removed (e.g. align in the paragraph tag) and a couple of tags have been “demoted” in the HTML 5 recommendations (e.g. bold ( <b>) and italicize <i> tags). Although, browsers still support them, but with time they will be gone.
On the other hand, HTML 5 has introduced new tags like <nav>, <header>,<footer>, <wbr>,... Besides new tags it also introduced new attributes and types for the <input> tag, attributes like form, list, required,... and types like date, time, URL, email…
Consequently HTML 5, almost forces the web developer to use CSS for all the styling of a website.
An HTML file also starts differently than before. It has a shorter Document Type Declaration. View the example below.
HTML4
HTML5
Future of HTML and the future of the World Wide Web
If we are talking about HTML, we have to talk about its future. With HTML 5 we can see the complete separation of content, style and behaviour (HTML, CSS and JavaScript). In addition, we also see a lot of frameworks and libraries that help us build websites faster and simpler (Angular, React, Bootstrap, jQuery.... ) And this is evolving with lightning speed and will continue to develop. Frameworks and libraries help you better form HTML, CSS and JavaScript; they enable you to create web apps that work in multiple browsers and multiple mobile devices.
Here at CodeBrainer, we believe that no matter what framework or library you choose, you have to know the basics of all three (HTML, CSS and JavaScript) to understand and modify elements of any framework and library.
And what does the future hold for the World Wide Web? We believe that it holds endless possibilities. That is because there are numerous factors to consider:
- User devices (mobile device)
We can already see that everything on the web is shifting to mobile first is some cases even to mobile only.
- AI
- Artificial intelligence is almost everywhere. Its influence on the WWW will be to provide users with more personalised user interfaces. Advanced intelligent chatbots are already doing this.
- UI and UX
Designers and UX (user experience) experts are creating astonishing changes and improvements, thus demanding more functionalities in web development.
- And many more....
WWW is a huge part of an industry that is growing each day. Take a look at our courses and start learning today, so that tomorrow you will help shape the future.
