The Beginner’s Guide to HTML – Part 2: The Basics of a Webpage

html web design

html web designWelcome to part 2 of our guide to HTML, where we take a look at the basic necessary components of a web page. Part 1, in which we discussed some history and syntax of HTML, can be found here. If you haven’t read it yet, please do! If you’re confident that you have a good understanding of it, then read on.

Before we go any further, you will need to have a text editor. There are many text editors available on the internet. You could even use notepad, which comes with all versions of Windows. The text editor I prefer to use is called Notepad++, because it is light-weight and it features syntax highlighting. This means it will highlight, in different colors, specific parts of the document. This can be extremely helpful for catching typos in your syntax. Whichever text editor you choose to use, do NOT use a word processor such as Microsoft Word!! These programs were designed to handle rich-text documents and will add all kinds of extra stuff to your code that will cause it to not render properly in the browser.

When you have your text editor of choice, open it and create a new document. We will use it in this article to create your first web page.

The Parts of a Well-formed HTML Document

The first thing you need to understand is how to lay out a basic webpage according to the HTML5 standard. There are a few items that need to go into every well-formed HTML document. Like following the basic steps of a recipe, deviating from this layout can cause the browser to render your webpage strangely.

DOCTYPE Declaration

All well-formed HTML documents need a DOCTYPE. The DOCTYPE lets the browser know, in addition to the extension, what ruleset it should use to render the document. The DOCTYPE is a special tag and should always go at the very beginning of your code. While the general formatting rule is to write tags in lowercase, this tag is an exception. All specifications of HTML that include it write DOCTYPE in uppercase, although it is not case-sensitive. I will follow the W3C standard way of writing code throughout these guides.

In XHTML, writing a DOCTYPE was a cumbersome process. Here is an example of a DOCTYPE for XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

That’s quite a mouthful! Needless to say, no one actually typed all of that out, they copied and pasted it from somewhere on the web. Realizing that this was pretty ridiculous to write out on every page, the WHATWG set out to create a much easier to type DOCTYPE for HTML5. Switch over to your text editor and type the following:

<!DOCTYPE html>

Wow, that’s a lot easier to type than the XHTML nonsense! WHATWG made several simplifications like this one to HTML that made typing a lot easier. We will go over them as they come up in later guides. If you’re familiar with the XHTML and HTML 4.01 notions of Strict, Transitional, and Frameset DOCTYPEs, please be aware that HTML5 only has one (the one we just typed).

The <html> Tag

Here we come to our first normal tag, the <html> tag. In a well-formed document, the <html> tag encloses everything in the document except the <!DOCTYPE> tag. The purpose of this tag is to tell the browser to interpret everything enclosed as HTML (and to define the root of the document).

Something that I didn’t mention in part 1 is that most tags can accept arguments called attributes, which can change the way the browser interprets the tag. For example, a common attribute for the <html> tag is the lang attribute, which specifies which language the document is written in, for use by speech synthesis tools and translation tools, among other uses. Attributes go inside the opening tag, like so: <html lang="en">. This tells the browser that the language of this HTML document is English. A proper attribute’s value (in this case, en) is always surrounded by double quotes in HTML5.

Now, add the <html> tag to your text editor file, add a blank line underneath, and add the closing tag </html>. When you’re finished, your document should look like this:

<!DOCTYPE html>
<html lang="en">

</html>

The <head> Tag

The <head> tag specifies the section of the document which contains header information, information which is not displayed on the rendered page. Unlike the comment tag, however, the browser does not simply ignore the contents of the <head> element. There are several tags that can go inside the <head> element, most of which will be covered later in this guide. The <head> tag itself is placed within the opening and closing <html> tags.

In HTML coding, it is considered a good practice to properly nest your tags. The simple rule to follow here goes like this: when a tag is opened, it must be closed BEFORE any preceding tags are closed. So, using the <html> and <head> tags as an example, the proper way to nest would look like this: <html><head></head></html>. Nesting like this <html><head></html></head> is wrong, and although it may still be able to render in a browser (HTML is a pretty forgiving language), it is highly frowned upon.

You may have noticed that it was a bit hard to read the last example. This leads to another good practice when writing HTML (and many other languages): proper use of whitespace. Whitespace (spaces, tabs, and linebreaks), simply put, is ignored by the browser unless it is explicitly told not to do so (more on that later). Therefore, for ease of readability by humans, it is a good idea to indent nested tags. HTML documents can grow quite large, so knowing which tag ends which can be helped immensely by indentation. In your text editor, add the <head> tags inside of the <html> tags, making sure to indent them with a tab. If you are using Notepad++ (or one of several other text editors), it will remember your indentation when you create a new line, a very handy feature. When you are finished, your document should look like this:

<!DOCTYPE html>
<html lang="en">
	<head>
	
	</head>
</html>

The <title> Tag

All well-formed HTML documents should have a title; this is set with the appropriately-named <title> tag. The <title> tag sets the text which appears at the top of the browser window or on the tab of the page. The <title> tag nests inside of the <head> tags.

Even though HTML is not a programming language (as I mentioned in part 1), tradition still dictates that when creating your first project, it should only contain the two words familiar to every coder. Switch over to your text editor and add the following between your <head> tags, remembering to properly indent: <title>Hello World!</title>. When you are finished, your code should look like this:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Hello World!</title>
	</head>
</html>

The <body> Tag

There is one last part that needs to be included for your first web page to be fully well-formed: the <body> tag. The <body> tag contains all of the elements which show up on the screen when a web page is rendered. The <body> tag is nested inside the <html> tag, underneath the <head> tag. Add <body> opening and closing tags to your text editor document, underneath the <head> closing tag. Write the text Hello World! between your <body> tags. When you are finished, your code should look like this:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Hello World!</title>
	</head>
	<body>
		Hello World!
	</body>
</html>

Save your document as helloworld.html. Open it in a web browser. Congratulations! You have made your first web page! It’s not much to look at, but it is a fully well-formed HTML document.

In XHTML Strict, this would not be a completely valid web page. This is mainly because, by the stricter standard, the text Hello World! should be enclosed in something other than the <body> tags. HTML5, however, does not have this restriction. But for more on that, check back soon for part 3, where we look at block-level elements.

Recap

  • HTML is easier to write when you have a text editor that supports syntax highlighting.
  • Do not use a rich text editor like Microsoft Word to code HTML.
  • Tags can accept arguments on how they should be interpreted by setting the values of attributes, which are always enclosed in double quotes.
  • Tags should be properly nested by closing the most recently opened tag before closing any that were opened before it.
  • Well-formed HTML documents have 5 necessary components:
    1. The <!DOCTYPE> tag, which lets the browser know that it should render the document as an HTML page,
    2. The <html> tag, which defines the root of the document,
    3. The <head> tag, which contains elements not displayed, but still interpreted, by the browser,
    4. The <title> tag, which is used to display the title of the web page on the tops of bowser windows and tabs, and
    5. The <body> tag, which contains the main content of the page which is displayed in the browser window.
Matt Lisiak

By Matt Lisiak

Matt is a co-founder at DashBurst and works mostly on the behind-the-scene work of maintaining the DashBurst website, as well as the creation of non-article content on DashBurst.

1 comment

Leave a comment