Creating Your First HTML Document

This article is part of series: Yet Another Full Stack Development Course

Previous article: Setting up Visual Studio Code as your web development coding environment

You can switch to video version of this article

In previous article we learnt how to setup a coding environment using visual studio code with live preview and create an empty html file. Let’s go ahead and start adding code to it. So we can start by just writing hello in our html document in editor, and you would notice live preview showing hello rendered in web page. Great we have a living, breathing web page already. But that hello cannot be categorized as an html document. Yes its an html file with a string being shown, but a proper, well formed HTML document based on HTML5 living standard has a few more requirements. So let’s remove that hello and do things properly.

DOCTYPE declaration

The first thing that we are going to add to our HTML file is a DOCTYPE declaration. This is the first line of code required in every HTML file and instructs the browser to interpret the HTML code correctly and display the web page as intended. It tells browser which version of HTML the document is written in so that it uses the proper rendering mode suitable for reading and rendering that version.

So let’s start to type the doctype declaration and you would notice the first awesome feature of VSCode. It knows you are editing an HTML document, so as soon as you start typing <!D …, it knows you are trying to add a doctype declaration and it would suggest to complete it. Go ahead and press tab key and it would complete the line. Your HTML file now looks like

<!DOCTYPE html>

with a blank preview. Note the latest version HTML5 is now a living standard so it does not need a version number anymore, so we just call it html.

if you intend to create an HTML document using HTML 4 or earlier you’re going to provide a full URL to the corresponding document type declaration but we are not going to do that. You can look that up online.

HTML element

Next we shall add an html element, so in next line, start typing <ht…, and press tab to complete if you get the suggestion. Note as soon as you press enter after the closing > of <html>, VSCode would automatically add </html> ending tag to the document, and indent the new line in the middle. The contents of HTML elements, between start and end tags, are always written indented from their parent as a convention. Nothing stops you from using your own preferred formatting though. Your document looks like

<!DOCTYPE html>
<html>
</html>

Head Section

Let’s add a head element as a child of html element, in between start and end tags of html element. Inside head element, let’s add a title element and provide a title for our web page. Title is something that appears as text on the top of chrome or any browser you choose. Title is not meant to appear in content area so your preview would remain empty, but as you start typing a title between start and end tags of title element, you would notice the live preview would stop showing file name as tab content, and start showing you the title instead. If you save and open the file in chrome, it would also show your title content on the tab. You can type anything like ‘My amazing first webpage’. The contents look like

<!DOCTYPE html>
<html>
<head>
<title>My amazing first webpage</title>
</head>
</html>

There is a lot more we can do in head section and we saw some glimpse in our HTML elements article earlier, but for this exercise, let’s settle at title and move on to body element. We shall have lots of practice in head section later in the series so you won’t miss much.

Note that at this stage, you can try and hover over the title element and notice a popup appears with a description of what title element, or any element you are hovering your mouse on does. At end of popup is a link in blue that says MDN Reference.

MDN or Mozilla developer network is one of the best documentation on HTML. You would time and again referred to this resource for extremely well explained specs on all html elements, attributes and all.

Body elements.

Body element is the visible content part of an HTML document and whatever you add here impacts what is being shown on the screen. So let me define a body element and add a bunch of stuff in it. So let’s add an H1 heading. If you recall there were six headings in basic HTML where h1 was the largest. So i am going to make its contents to say, ‘my big fat heading’. Now let’s add a h2 heading and see how it is shown relative to the biggest h1 heading. Once you define you would see it would be bold and big, but not as big as the h1 heading. Note h1 to h6 are relatively different in sizes and impact, and the results would vary from browser to browser since HTML does not dictate what an HTML heading must look like. So each browser would take liberty to show its own variant of headings.

<body>
<h1>My big fat heading</h1>
</body>

Next I am going to add a div. A div is interesting as it does not have a shape of its own. It is an invisible container and is also called content division element. Its shape can be manipulated by styling and that has an effect on the shape of its child elements which are visible. Divs are one of the most used elements as they allow a group of elements to be styled, placed and managed on a web page as a logical unit. We’ll work with that later on in our styling articles. For now we are just introducing it.

Get Ali Aslam’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Since it wouldn’t make sense to have a div without children, let’s add a paragraph element inside and then see the code block.

<body>
<h1>My big fat heading</h1>
  <div>
    <p>
      A paragraph is a piece of text slightly separated above and below from other text on the page.
    </p>
  </div>
</body>

Here we go and if you are seeing in preview window, our web page is taking shape now. If it stops responding just press the refresh button. I described what a paragraph does in its text. If you try adding a text above or below it, there would be a slight gap. Paragraph can also be styled, so say if you want to add an italicized block of text in your article, you would add a paragraph with italicized style applied to it. Why not add this information in our HTML so we don’t forget. And to do that we would use a comment. If you recall from earlier article, comments are not considered part of HTML document and browser is going to completely ignore them. So i’ll add a comment above paragraph like below

<div>
  <!-- A paragraph can be styled via CSS -->
  <p>
    A paragraph is a piece of text slightly seperated above and below from other text on the page.
  </p>
</div>

As you probably noticed, there is no change in our web page visually, but we have a useful piece of information added to our HTML file about paragraphs.

HTML Document so far

<!DOCTYPE html>
<html>
  <head>
    <title>My amazing first webpage</title>
  </head>
  <body>
    <h1>My big fat heading</h1>
    <div>
      <!-- A paragraph can be styled via CSS -->
      <p>
        A paragraph is a piece of text slightly seperated above and below from other text on the page.
      </p>
    </div>
  </body>
</html>

So what do we have here by now? We have a full HTML document available to us. Let’s quickly go over its contents once more. So we have a DOCTYPE declaration which is telling us that we are using the living standard of HTML for what is to follow. And what follows is the HTML element. With this declaration, the browser knows this html element is to be displayed using the standard rendering mode which is the latest one and is the most optimized and efficient rendering mode available with browser. We shall see rendering modes later in the series.

This is followed by head section which does not contain any visible content but links, scripts and information about the HTML document. Head does not mean top area of content in your browser. Its head of HTML document. There is a difference which you must keep in mind. The visible content is only contained in body element. So here the head section contains title, which you can actually see but not in the content area of browser, but above on the title bar, and if you bookmark the page, it would also serve as bookmark title. Head section can also contain to an icon which accompanies the title on the tab, it can contain or refer to styles, fonts and scripts.

Let’s focus our attention to body element, and we discussed body element makes up the content area of the browser. In here we defined an h1 heading which generally is the title of entire document. Recall that HTML document is a ‘document’ and h1 serves as the main title for document. You can try playing around with h2 and h6 headings on your own. If you go ahead and add a h6 heading right now, you would notice it is hardly different from the regular text, except that it might be bold or something. In fact, in chrome, the h6 can be, and usually is smaller than your regular text but bold. H1 to h6 are just relatively bigger to smaller text. Use them carefully. Just a comment that styling for headings, like other elements, is fully customizable. So you can fully control what h1 or h6 heading looks like using styling or CSS.

Next up is paragraph, and paragraphs are supposed to contain the text portion of your web page, and they add a blank line before and after the content. Let’s add a piece of text before and after paragraph text like ‘pre’ and ‘post’ like below

Pre
<p>
  A paragraph is a piece of text slightly separated above and below from other text on the page.
</p>
Post

You would notice there is a blank line before and after the paragraph text.

Let’s do another experiment with paragraph. Let’s add another line in in paragraph content, and this time on its own line, like this

<p>
  A paragraph is a piece of text slightly separated above and below from other text on the page.
  
  I should be appearing in my own line, but am I?
</p>

Strangely, adding a line break within a paragraph seems to have no effect on its visual presentation at all. Its like browser never noticed that our second line is on its own line after a line break. So note that line breaks in HTML document are considered part of editing or formatting and are totally ignored by the browser. To add a line break in HTML document, there is a special reserved HTML element called line break, which is applied as <br/>. If you add it anywhere, it introduces a visual line break in HTML content. Let’s give it a try.

<p>
A paragraph is a piece of text slightly separated above and below from other text on the page. <br/>I should be appearing in my own line, but am I?
</p>

And yes this time our loner line is on its own line as expected.

We are going to stop here with our HTML document. I know there is so many elements left to cover, but first i want to introduce you to the exciting world of styling, which would work best if we have a manageable HTML document. There are plenty of coding articles in our series lined up so you won’t miss anything.

We have a small, but complete HTML document available with us to play with and get our head around the concepts so far. Next up we learn how to style this HTML document using CSS.

If you liked this article, please don’t forget to clap/share. See you in the next one.

Next article: