What really is HTML

What really is HTML

In this article you are going to learn history about HTML, how it got developed, and how you can get started.

Let’s get the basics first. HTML stands for Hyper Text Markup Language. It’s not an actual programming language, but rather a markup to structure the webpages.

History of HTML

HTML was first developed by a computer scientist, Tim Berners-Lee in 1989. He worked for CERN back in the days.

He has send few ideas to his company CERN, and he has some time to work on HTML.

HTML was invented to ease of use to mark up documents on the computer, but also to link multiple documents together that allow others to search it through. Not what we see today.

You can think of HTML as a blue print for a house. It’s the fundamental back-bone than you build up on. Same as a house has features in it such as doors, bed, light and so on, HTML has tags that represent something. For example, in HTML we use h1-h6 for headings. It’s a semantic way to display  headings for the content.

The first ever website created was by the end of 1990year. He created the first page editor and browser ‘WordWideWeb.app and the first serer ‘httpd’.  To make the HTML work, the computers had to speak the same language. Back in the days, computers had a lot of different operating systems – hence it was hard to use them as you would need to know the specific way to navigate them.

The three fundamental parts of the web that Tim has created, are:

  • HTML: Hyper Text Markup language. It’s the markup to build the webpage structure.
  • URI: Uniform Resource Identifier. A kind of “address” that is unique and used to identify to each resource on the web. It is also commonly called a URL.
  • HTTP: Hypertext Transfer Protocol. Allows for the retrieval of linked resources from across the web.

By the end of 1991 people outside CERN (the company he worked in) were invited to join the new web community.

Tim saw the potential in what this could do. He decided to make sure  that CERN would agree to make this free forever. The decision was announced in 1993 April, and sparked  a global way of creativity, collaboration and innovation never seen before.

Time passed, innovation happen, and so we had PHP for back-end(server side language) in 1994 year, then there was JavaScript, which by the way, it was nothing like today. (client side or local) and then CSS 2 was created in November 4 1997. The first CSS version is unknown when it started.

As the technologies evolved, there were more possibilities for the websites. Eventually the sites got even responsive for mobile view with Media Queries (CSS) that allowed to manipulate the elements on different screen sizes, and that wasn’t so long time ago, the first draft was in 2001 and it became only part in 2012! To this day some developers still don’t’ use media queries, and a lot of sites aren’t responsive. But that’s another story!

HTML Tags

How do we actually write some HTML? We use, what’s called HTML tags. HTML tags is to structure the webpage with keywords that the browser understands.

Usually HTML tag starts with a name inside the <> like:

<html> and the closing tag </html> . The closing tag has identical text, however at the start of the world it was a / character which interpreter as of the end of the character. Note, each time you open a tag, you must close it. If you have multiple tags, you must close them. If there is going to be one tag more, or less, there is going to be a confusion and it might not work correctly.

However, there are exception tags such as the <img> tag which is for showing images.

HTML tags shows how the browser must format and display.

HTML Tag Attributes

Attributes allows you to customise and or enhance a tag.  For example, if we take the <img> tag, it’s job is to show the image. However, how do we know what image to show, and from where to get it? Here were the tag attributes come handy. For example:

<img src=”path/to/the/image/icecream.jpg” alt=”Delicious Ice Cream”>

 

The src=”” attribute, tells where the image is located at. The dash / is a separator. We are separating the folders there, and the last part is the actual image saved with an .jpg extention. You can also put a URL for the image from the internet.

 

If you ever wondered how pages link together, is with href attribute.  Href stands for Hypertext reference , it basically point to another webpage.

If we were to include the href to our image tag, it would look like this:

 

<img href=”http://google.com” src=”path/to/the/image/icecream.jpg” alt=”Delicious Ice Cream”>

 

 

If we were to click the image, it would get us to google.

Now, you might wondering what is an alt tag. Alt tag is optional, however, it’s best practice to use it on all the images because doing so, will provide a clear text alternative to the screen reader users. And we want our website to be friendly to anyone.

HOW did HTML developed

HTML has evolved over many years. The first version was HTML1, and up to today’s day, there is HTML5. This is an innovation, and upgrade from the previous versions. Each version bring something unique, a big update on the HTML itself.

HTML5 is the latest version for structuring and presenting content, and is the current standard in the web.

The big difference between HTML and HTML5 is that HTML5 has more semantic tags, that made for the browsers to understand the webpage layout. While in HTML4 and below, we used to structure out pages with div’s, giving them classes and names.

That go confusing and it wasn’t very reliable for the browser to understand it.

HTML5 has introduced new functionality and new tags. These days the HTML is more semantic than ever. HTML5 has introduced a lot of new tags <header>, <footer>,  <audio>, <video>, <main>, <section> etc. It also support graphics.

However, some of the semantic elements where in the old days, like <nav> or <ul>, <ol>, <li> they are semantic tags.

They are easy to read for developers and it’s easier to maintain. The HTML structure is far better to work with, than the old HTML. There is less confusion, it’s cleaner and the browser supports it, meaning it will understand a tag like <aside> which is for the sidebar. This comes handy when the browser will start to read the file.

How to get started

HTML has an online documentation, with all the tags and explanation. One of the popular sites you might want to check out, is the Mozillaa for developers here https://developer.mozilla.org/en-US/docs/Web/HTML/Element and w3s https://www.w3schools.com/html/default.asp .

This is the documentation for HTML. As a developer, you don’t need, nor you won’t memorize or know all the available tags. With time the technology changes, so what you might knew yesterday, might not be available today.

What you do instead, is you get the BIG picture first, on what HTML is and what it can offer, and you use what you need. If there is something you don’t know how to do, or you forgot about a tag, you go back and search the documentation. It will get easier with experience and with time.

The best way to do anything, is to take action and do it.

You can create a folder named ‘ myWebsite’, and inside the folder you need to create a file, it doesn’t matter if that’s a professional text editor, or just a notepad, but it needs extention to be saved as .html . This will tell the browser, and any other programme, that this file is HTML and it needs to read it a specific way. If it was a CSS file, you would save it as .css, if this was JavaSCript file, you were to save it as .js file, and so on.

You can open the file with a browser, and the the result.

Let me guide you on how you can start.

 

Writing Simple HTML webpage

 

Create folder

Start by creating a folder with the name where you want it to be. It will make things tidy.

Create a file in notepad(if you’re serious about this, download sublime text) and save it as index.html.

Create index file

Index is usually what the browser looks at the first page. Index page is the home page usually. If we were to have a contact page, we would name it as contact.html. However if we were to have a one webpage, it’s name will be index.html, that is the best practice.

First HTML tags

Now, open the index.html file and write

<!DOCTYPE html>

The way this works is that first you open it with a <!DOCTYPE html> which doesn’t need a closing tag. This element says what format to use in the webpage. The DOCTYPE is not a HTML tag. It’s actually an instruction to the web browser about what version is the HTML written in. It’s a unique tag. The doctype refers to a Document Type Definition (DTD).

Now we want to open the html tags. Note, this should be in small letters is best practice for the HTML tags across developrs. It’s easy to read and if you open the webpage developer tools to inspect the code, you will see that the browser intrepteters the tags in he lower case. It’s best to just stick with the lowercase convention, your eyes will thank you when you are trying to debut the file later on as you’re project get’s bigger.

HTML tag tells your browser that this is a HTML document. They always go in between whatever there is, apart from the doctype tag.

<!DOCTYPE html>

<html>

</html>

Just after the html tags, include the <head> tag. The head tag element contains the metadata (data about data). HTML metadata is datab about the document. <head> tag, and data, is not displayed. Metadata typically contains information about the document, as well as some links to external files. It usually defines title, character set, styles, links, scripts and other meta data. Here is an example from one of my projects, on how I structure it.

 

<!DOCTYPE html>

<html>

<head>

<!– Meta, Title, Styles, Scripts
 	     ================================================== –>
 	     <meta charset=”utf-8″>
 	     <meta name=”viewport” content=”width=device-width, initial-scale=1″>
 	     <title>Aurelian Portfolio</title>
 	     <link rel=”stylesheet” href=”css/app.css”>
</head>

</html>



After that, we have our body, which will display in the browser.

<!DOCTYPE html>

<html>

<head>

<!– Meta, Title, Styles, Scripts
 	     ================================================== –>
 	     <meta charset=”utf-8″>
 	     <meta name=”viewport” content=”width=device-width, initial-scale=1″>
 	     <title>Aurelian Portfolio</title>
 	     <link rel=”stylesheet” href=”css/app.css”>
</head>
<body>

</body>
</html>

 

 

Now we have a basic structure of the webpage, we have all we need! We can start building!

I’ll show you few examples, later one you can go and look in the HTML docs, and try the tags your self.

<!DOCTYPE html>

<html>

<head>

<!– Meta, Title, Styles, Scripts

================================================== –>

<meta charset=”utf-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<title>Aurelian Portfolio</title>

<link rel=”stylesheet” href=”css/app.css”>

</head>

<body>



<h1>My First Webpage</h1>

<p>This is the paragraph about how I build my first webpage</p>



<h2>Starting wasn’t easy</h2>

<p>WHen I first started, I didn’t know about HTML…</p>



<h2>I build a compelx HTML file</h2>

<p>After practice and knowing HTML, i have build my first HTML file..</p>

<ul>

<li>I learned about HTML</li>

<li>I learned about CSS</li>

<li>I learned about front-end architecture</li>

</ul>





<a href=”http://aurelianspodarec.co.uk/portfolio”>You can check one of my portfolio here!</a>



</body>

</html>

 

Where to go from here

Start practicing writing some HTML, and get to know what HTML tags are the most common used, and what other tags are out there.

In this article we have covered some history about HTML, how it developed, and how to get started.

HTML is just one part of the web. There is a lot more than HTML tags. If you ever wondered how webpages look so beautiful, is with CSS. CSS Is Cascading Styles Sheet, which help us to style the HTML tags the way we want. HTML and CSS are usually together these days. You need both for the basic layout that is pretty in these days. If you want some interactivity, you will need JavaScript, but that’s a totally different story.

You can read an article I wrote on what is CSS here.

If you have any questions, comment below.

Meet the author

Meet the author

Aurelian Spodarec

Front-end WordPress developer that blogs about web development. I like using the right tools for the job. In my spare time, I enjoy cooking healthy food and then eating it. Delicious!

Comments