Hyper Text Markup Language. There is no way you have not heard about it. You might not know the full name of this acronym but, there is just no way you have missed hearing the word “HTML”, if you have though, it is absolutely fine, we will just fix that right now. At the end of this doc, you definitely can say you have maybe even experienced HTML.
HTML stands for HYPER TEXT MARK-UP LANGUAGE. You are probably wondering, “Why is a language hyper?”, “What is a markup language even?” and “How do you speak this HTML?”. Well, for starters, take it easy tiger, we will answer all those questions right here in this piece.
If you deliberately stumbled upon this doc, then you know that to render or display any design on the web is beyond mere desire or imagination and somehow you need to communicate with the browser (whichever search engine you use), that is where HTML comes in, it is that guy who makes this communication work, you need to speak in one of the languages the browser would understand and at the most basic level, that language is HTML.
What is HTML?
Meaning Hyper Text Markup Language. HTML is a markup language used in web development; this language defines the structure of web content on a web page. It specifically describes to the browser, the placement of elements in a webpage. So here is an example: You want to create a website that has your blog title and an image, this is what a skeletal structure would look like: Sushi’s Daily Blog
HTML defines the placeholders for the positions occupied by the content and then describes to the browser how this content should be displayed according to HTML rules.
Why is a Language Hyper?
Funny I know, but it is not what you expect, an overly excited language, nah that is not HTML. The use of “hyper” explains that the language is not linear and so users can go anywhere on the internet simply by navigating hyperlinks. Hyperlinks are the media through which users navigate the web, by clicking on special text called hyperlinks, new pages are open. With HTML, the hypertext ML, users often navigate and traverse through the internet.
What is a Mark Up Language?
Another term that might have a beginner wondering? Well, a Mark Up language is a text encoding system that consists of a set of symbols usually inserted in a text document to control its structure, formatting or relationship between its parts. MarkUps are often used to control the display of the document, what we code with HTML is not exactly what is displayed on the browser, the markup is used to enrich its content to facilitate automated processing, this is a huge part of HTML formatting and display on the browser in the way that users need to see content.
How Do You Speak this HTML?
HTML is a language and thus has to be spoken in order to communicate intent to the browser, this is done using text editors as it is a textual language and not vocal. Text editors are the notepad pages we write in and then send to the browser as a HTML file which the browser interprets. The browser inherently understands HTML and so it is simply up to you to rightly speak HTML. HTML as a written language majorly uses “elements” to communicate. The elements are written in tags and these tags are mostly in pairs- one at the beginning of the element and the other at the end of the element, this start and end tags usually wrap the actual content of the element to be displayed.
Example: This is a heading element to display: Welcome
Thus, an element is usually made up of a start tag, some content and an end tag except some HTML elements that do not require end tags and sometimes content depending on the usage.
Examples of these exceptions:
Now, that you understand how and what HTML uses to communicate which elements, next you need to know the sequence through which these elements flow and what each element does and is used for. There is a basic flow required for a proper HTML file, referred to as simple HTML documentation. These are the basic elements you need for a simple HTML file:
The simple HTML documentation requires 4 main elements:
<!DOCTYPE HTML>, you can notice how this element is just like the <br> element, with no content or end tag. This element simply says “Hey browser! This file I am giving you is of type- HTML”, now that is quite easy.
The second element says: <html> This is where the content of this HTML file begins, this element has a start and end tag. <html> … </html> and is the root element of every HTML file and thus, contains a lot of other elements for content.
The third element is the <head> element and here, information about your webpage is embedded, this information could be title, styling, an external file, etc. At a basic level, one simply needs to define the title of their webpage using the <title> element. The <head> element has a start and end tag like its parent element <html> and just like other elements, it has content as well.
This behavior where elements are wrapped within other elements is called nested programming. <head> element is within <html> element just like <title> element is within the <head> element. Once the start tag, content and end tag of an element is properly defined, the element’s role is fulfilled, which is why the <title> element simply says the title: “Hey you, let’s learn HTML” and that’s that, the <head> element simply containing just the <title> element can also safely close, notice the head element closing with the end tag </head> after the title and move on to the fourth and last main element; <body>
The <body> element, this element defines the content you can see and interact with on a webpage. For every website you have ever visited, from Netflix to AliExpress to Jumia to Spotify to Hashnode and even Google, everything you see on the browser is wrapped between the <body> element’s start tag and its end tag </body>. Anything at all visible to a user on the internet has to be in the body tag, this is the only way you can view the content. Thus, the body element does define the body layout of a webpage all dictated by the different elements, of course, nested within the body tag. These are elements we will learn about as we go on this intro journey to HTML.
That’s it guys, the elements that make up a simple HTML file aka the HTML documentation, explained. Now, let us try creating our first HTML file, view it on the browser and see the world of possibilities we are about to open.
First thing first, all HTML files are saved with the extension .html, you know how your Word documents are saved as “Cover Letter.docx”, docx is the extension for Word documents, with pictures, and the extension is usually .jpeg, like “pretty girl.jpeg”, yes you get it now. Common practice, we usually name first HTML files as an index, as it is an index file and easily recognized as such by the browser.
So, let’s dig in, my preferred text editor to speak HTML is Visual Studio Code, so first download Visual Studio Code, VS Code for short using this link:
Once you set up VS Code, you can easily create a file in the text editor by pressing Control + N on your keyboard “Ctrl + N” and “Ctrl + S” to save your file, we would save the file as index.html, you can save this file to your desktop and start to code in the file. Now, let’s code babies.
Simple HTML documentation style, nothing complex:
Once done, “Ctrl + S” to save, and you can view this on the browser! Yes guys, that is it, your first webpage written in HTML! Excited to check it out, simply open the file from wherever it is saved in your computer. Because of the .html extension, your file should automatically open in your browser.
Quick Quiz: What part of your code would you see on your screen if you opened the index.html file?
The entire code
The <head> content
The content of the <h1> element
You know you are getting it, if your answer is correct! And if it is wrong, it is okay buddy, we have more quizzes to ace, and this quiz will guide your learning curve.
Like we learned earlier, the content you see on a browser is the content between the body tags which is exactly why your result is:
Once you replace (your name) with your actual name, you’d have:
Look through the code from your VSCode and notice how you are already familiar with all the elements and their tags from this doc.
That is a wrap for our step to HTML mastery. Proud of you for going through the whole doc and me for writing it, lol. See you soon Agba dev!
Toodles!
P.S: Agba Dev means Senior Dev. Agba means elder or senior in the Nigerian language, Yoruba.