Introduction
In the previous chapter, we learnt what exactly is HTML and a little bit about its evolution since the early 90s. It's a must read for any HTML developer as it keeps one always in the state of appreciation for the technologically revolutionized era we live in today, talking just about the web.
Now in this chapter, our aim is to write our very first HTML page and view it in the browser, while learning about all the ideas that go into writing the HTML.
Writing HTML is not any difficult; there are very few grammatic rules to follow and it's not that huge itself. Yes, initially, you'll take some time to write it, but sooner than you expect, things will change and HTML will become as if you knew it since childhood. Believe it!
Your first HTML page
HTML is just mere text, likewise, technically speaking, we can use any text editor to write it.
However coding is more than just writing some arbitrary text — it requires formality, structure and discipline and that's why coders don't usually use just about any text editor to write code.
In the next section, we'll improve our choice of the text editor to write HTML but for now, it's desirable to go raw and get the experience of an elementary text editing tool.
-
Open up a text editor
Depending on the operating system you're currently using, open up its default text editor and get prepared, for we are about to write our very first HTML page!
We will be demonstrating the recipe using Notepad on Windows, but the concepts and steps will, more or less, be the same for other operating systems as well.
Here's our Notepad application:
![A blank text file in Notepad]()
A blank text file in NotepadLet's start writing our HTML.
-
Start writing the HTML
We'll be creating a webpage with the text 'Hello World!'.
Precisely speaking, just standalone text in the file would also do the job, but we obviously aren't here to write just 'Hello World!' in a text editor; rather, we're here to learn how to write HTML as it would eventually be in complex websites.
Right?
So the very first thing we need is a document type declaration.
The document type declaration is used to represent the type of HTML being used in the underlying HTML file.
Here's our document type declaration:
<!DOCTYPE html>When the browser encounters this line, it immediately realizes that it's dealing with HTML5.
As per the convention,DOCTYPEis in all-caps.We'll explain everything in even more detail later on; for now, we'll stick to such simple and concise descriptions.
Next up, we begin laying out our actual document.
This starts off with a root element, called
<html>that encapsulates the entire document's data.The
<html>element comprises of a pair of corresponding tags:<html>, called the starting tag, and</html>, called the ending tag.Go ahead and add the
<html>element to your code, as shown below:<!DOCTYPE html> <html></html>Between the
<html>and</html>tags, we put the information of our document. The two main parts of an HTML document are:- The document's meta information, such as its title (displayed on browser tab panels), its character encoding, etc.
- The document's actual content, that's rendered out on the webpage.
The meta information goes inside an element called
<head>while the actual content goes inside an element called<body>.Since both these elements go inside
<html>, this means that they are structurally a 'part' of the<html>element. To replicate this notion in terms of code, we customarily indent these contained elements.That is, if we put
<head>and<body>inside<html>, we'll put them slightly away from the left edge of the editor. The code below will show you what this means.Coming back to our example, for now, we don't need
<head>in our minimal HTML page and so we'll skip it; it's perfectly valid to do so. We'll just proceed with<body>.Write the
<body>element as shown below, between the<html>and</html>tags:<!DOCTYPE html> <html> <body></body> </html>So far, so good. Now we're just one step behind completing our code.
As stated earlier,
<body>contains all the content to be rendered out on the document. Since we just want to display the text 'Hello World!' on our HTML page, we'll put the text directly inside<body>.This takes us to the following code:
<!DOCTYPE html> <html> <body>Hello World!</body> </html>And this is it!
Yup, we're done with our very first, minimal HTML code.
-
Save the HTML file
Let's now save the HTML file.
Go ahead and save the HTML file that you just wrote above anywhere on your system where it's easy enough for you to access it. Needless to say, for most people this is just the Desktop.
![HTML code written in Notepad]()
HTML code written in NotepadNow when the save dialog box opens up, name your file hello-world.html.
Don't forget to include the .html file extension at the end of the file's name! Browsers often use it to distinguish plain text files from HTML files.
-
Run the HTML file
With the file saved, it's now time to open it in the browser, often referred to as running the file.
This might be a one-step process or possibly require a handful of steps, depending on your operating system and file extension configurations. But don't worry, it's all really easy to do.
First off, head over to the location where you saved the HTML file. At this point, the file might have:
- A browser icon, indicating that it'll be opened up by a browser.
- A text editor icon, indicating that it'll be opened up by a text editor.
If the former is the case, i.e. the icon is of the browser, you're all good to go.
But if this ain't the case, and the file instead has a text editor icon for it, then we need to change the app that opens up the HTML file; this app is going to be a web browser.
Right-click on the file and change the app that launches it to a browser of your choice.
Typically, in Windows,.htmlfiles are opened up by web browser software by default. So we don't have to do anything special on Windows. But in order to open the file in a text editor, we do need to change the app to launch the file — change to an editor — in the same way that we saw above.Supposing that the file has successfully been opened up in the browser, you should see a webpage displaying something similar to the following:
Hello World!Congratulations! You just successfully wrote and ran your first HTML code.
How do you feel right now?
Understanding the code
Let's dissect the rudimentary HTML code we wrote above and understand what exactly is going on in there.
Document type declaration
First things first, we have the following line:
<!DOCTYPE html>As stated before, this is called a document type declaration, sometimes also concisely referred to as a doctype declaration (hence, the term DOCTYPE).
But why is indicating the version important?
Well, that's because HTML varies between different versions, each having a slightly different set of rules to abide by. When a browser parses HTML code, it has to know the version of HTML being used in the code so as to prevent any unexpected outcomes and issues.
Since 2014, when HTML5 was introduced, the most prevalent — in fact, the de facto — version in use is HTML5. For HTML5, the doctype declaration is really simple; it can easily be memorized.
This, however, wasn't the case with, let's say, the doctype declaration for HTML4.
Here's the doctype declaration of HTML4, running in the 'strict' variant:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Looks verbose right? Well, it sure is and by, no chance, would anyone want to memorize this.
The root <html> element
After the doctype declaration, we have the <html> element, as follows:
<!DOCTYPE html>
<html></html>This is called the root element of the document.
<html>, defines the whole HTML document. Since it's the root element, every piece of info of the HTML document is put inside <html>.
The tokens <html> and </html> here are known as tags.
< and >), represents an element.<html> is called the starting tag while </html> is the ending tag.
As we shall learn later on, many elements in HTML are denoted in this way, i.e. with starting and ending tags. The content of the elements is placed within these tags.
The <body> element
Between the <html> and </html> tags — which is also referred to as inside the <html> element — we can have two elements to denote two integral aspects of an HTML document.
<head>, for the document's meta information.<body>, for the document's actual, visually rendered content.
In our HTML page, for the sake of keeping things simple, we omitted the <head> tag. However, it's always used in all but the most simplest of webpages.
We just had the <body> tag with the text 'Hello World!' inside it:
<!DOCTYPE html>
<html>
<body>Hello World!</body>
</html>One important thing to note here is that because <body> is a part of <html> — commonly referred to as <body> being nested inside <html> — it's put at a higher level of indentation.
This is purely a coding convention used all across computer coding languages, including markup languages and programming languages. That is, if something is logically a 'part' of something else, indent it to indicate this in terms of code.
For example, the following HTML is identical to the one above:
<!DOCTYPE html>
<html>
<body>Hello World!</body>
</html>But, as you'd agree, because the <body> element is not indented inside <html> here, this code variant is not that readable.
Coding in Visual Studio Code
While coding in barebones text editors, such as Notepad, is desirable in these early stages to develop some muscle memory and appreciate the grammatical formality of a coding language, you'll not want to do it in the longer run.
Let's see why...
Firstly, writing code in suchlike editors is really slow.
Once we're fond of HTML and want to develop complex document structures using it, we'll want to do it all very quickly. We won't really be concerned with muscle memory (which would've been developed already) or any appreciation of a coding language (that already done too).
We'll ideally want an editor that can allow us to quickly write HTML, with multiple features to aid in doing so, such as code autocompletion.
Secondly, writing HTML in elementary text editors typically doesn't come with code coloring.
As we shall learn in the upcoming chapters, there are many different kinds of things in HTML — we have tags, as we learnt above; attribute names; attribute values; literal text context; and so on.
All these different pieces of code can be colored differently to improve the readability of the code, clearly distinguishing between them, and make the code far less chaotic. In some cases, it can even help us quickly see whether we've typed something wrong or not.
Compare the following two snippets of code.
Without code coloring:
<!DOCTYPE html>
<html>
<body>Hello World!</body>
</html>With code coloring:
<!DOCTYPE html>
<html>
<body>Hello World!</body>
</html>Which one looks easier to read? The second one, right?
And there are many other ad hoc bells and whistles absent from elementary text editors, like Notepad, which are otherwise really handy to have when writing HTML.
Enter Visual Studio Code.
Visual Studio Code is an open-source text editor, known for its lightweight design and profound ecosystem, making it a popular choice among developers for efficient coding and customization.
Precisely, Visual Studio Code is an editor, but it's more than just that — it could be thought of as a pseudo IDE (Intregrated Development Environment).
Starting at this stage, it's important for you to get comfortable with Visual Studio Code because it's where you'll be spending most of your time in. In the following discussion, we shall create yet another HTML page, but now obviously using VS Code.
Let's get rolling.
Open up VS Code, and choose New File from the File menu at the top menu bar, or simply press the keys Ctrl + N. This will create a new untitled file, as follows:
Click on Select a language and then type in 'HTML' in the search bar that pops up. From the dropdown, click on the suggestion that reads HTML (html).
With this set, we get two benefits:
- Firstly, we get all the amazing coding features of HTML in VS Code (which we'll talk about shortly below).
- Secondly, we won't have to manually type the .html extension when saving our file since VS Code will automatically do that for us, given that it now knows that the file is an HTML file.
Now, let's save the file. As before, we'll save it on the Desktop.
In addition to this, with the file still open in VS Code, open it in a web browser (in the same way as we discussed above).
At this stage, there exist two windows for us to switch between:
- The browser, where we see the HTML page.
- The VS Code editor, where we write the HTML code.
It's good to have the editor and the browser open up at the same time so that we can see all the changes that we make to the HTML live.
Let's move to the next step.
Time to write our HTML.
In our previous example, we just output the text 'Hello World!' as it is. This time, we'll output it as a large heading.
Just like earlier, we'll start with the document type declaration, followed by <html>:
<!DOCTYPE html>
<html></html>Inside <html>, we'll place only the <body> element, yet again, omitting the <head> element (as we don't need it now as well):
<!DOCTYPE html>
<html>
<body></body>
</html>Inside <body>, since we want a heading, we'll use the <h1> element.
<h1> element stands for 'heading 1' and serves to denote the main heading of an HTML document.The numbers run from 1 to 6, in order of decreasing hierarchy and font size. That is, we also have the elements <h2>, <h3>, <h4>, <h5> and <h6>, but they are for smaller, subheadings.
We'll learn more about headings in the HTML Text chapter.
<h1> resembles the rest of the elements that we've seen uptil now in this chapter in that it also has a starting tag (<h1>) and and ending tag (</h1>).
Coming back to the example, the text desired for the heading is 'Hello World!' so that will go inside the <h1> element. This leads to the following code:
<!DOCTYPE html>
<html>
<body>
<h1>Hello World!</h1>
</body>
</html>Take note of the indentation of <h1> here. Visually, it clearly indicates that <h1> is a part of the <body> element.
And we're done!
Switch to the browser and refresh the page to see the following output:
Voila! There's our nice heading, thanks to the addition of the <h1> element.
Quickly create HTML elements in VS Code
At this stage, it's worthwhile suggesting a very quick VS Code tip to you so that you can create HTML elements very quickly in it.
VS Code has a feature called Intellisense that tries to autocomplete code as we type it.
Following are some ways to leverage it when working with HTML:
- Type an element's starting tag. Its corresponding ending tag would be added automatically as soon as you type the final
>character. - Type an element's name partially (without the
<and>symbols) and then select the element that you desire from a dropdown box; this will type in the element's tags automatically.
Quite amazing, isn't it?
