Beginner’s Guide to HTML – Part 1: Structure

Last updated on May 25th, 2023 at 10:53 pm

Wanna Be A Web Developer?

I like to think of HTML as gateway code. It’s the first language you need to learn, and once you learn it, you gain the power to alter the source code of the universe web pages! When you taste that sorcery, it’s only natural to want more. With hard work, you too can harness limitless developer power, and it all starts with Hypertext Markup Language (HTML). 

The goal of this article is to provide you with a first look that’s simple enough for novices, yet comprehensive enough that you could write a basic HTML document just from the information included here.

Why Should I Learn HTML?

Hypertext Markup Language is foundational in web development. Most online systems run on a form of HTML, and those that don’t are too complex for most beginners to make sense of without an understanding of a simpler language like this.

On a web page, HTML serves as the structure or skeleton for the Document Object Model (DOM), the node-based map that tells your browser how the page is structured. A website works by building the DOM from what it finds in the HTML document, and other languages like CSS (Cascading Style Sheets) and JavaScript reference those elements in order to work their magic. CSS is nothing but styling, and without the elements in an HTML document, there’s nothing to style. JavaScript can manipulate and change the DOM, but there has to be something there in the first place, and that something is HTML.

Without any further ado, welcome to the beginner’s guide to HTML!

Tags & Elements

HTML code makes up the structure of a webpage. It’s made up of a series of components called <tags></tags>, which you can identify because there’s always an opening tag and a closing tag and they’re each wrapped in angle <brackets></brackets>, like that. You can tell the tags apart because the closing tag has a forward slash just after its opening bracket, and the opening tag does not.

A pair of tags make an HTML element. The name of each element is determined by the text just after the opening bracket. I specify this because you can include additional attributes to HTML tags after the name, like this: <p class=”body-text”>This text will show up on the screen when you run the code, but the tags it’s wrapped in will not.</p>. This is a paragraph tag with a class of “body-text” that specifies some text between its opening and closing tags that will show on the screen on page-load. We’ll talk more about classes in a future article.

Photo by Pankaj Patel on Unsplash

HTML Structure

Certain tags are built into the syntax of HTML. For instance, the <!DOCTYPE html> tag indicates what type of document the file is. Interestingly, it’s one of a few tags that don’t require a closing tag. Beneath it, every HTML file has <html></html> tags. With the document type specified, any recognizable code between these tags will be read by a browser as HTML!

In between the two HTML tags, the document is broken up into two sections: the head, indicated using the <head></head> tags, and the body, indicated using the <body></body> tags. 

The head section traditionally includes information about the website you’re creating, like its <title></title>, various <meta> tags that include meta-information about the site, a <link> to a stylesheet, a <script></script> link that leads to a JavaScript file, some <style></style> tags that specify design rules for the elements on the page, and a <base> tag that includes the base URL for the site you’re building. 

Inside the body section is where the party really starts. This is where the web page’s visible content goes. The HTML document will be read from top to bottom by the browser, and the elements contained in the document will be displayed from top to bottom and left to right, according to any styling rules you specify. There are two ways to give HTML elements style. First, you can attach a CSS document, which we’ll cover in Part 2 of this series. Or second, you can apply inline CSS styles, which I’m covering in a separate series entirely, dedicated to learning CSS.

Congratulations! You’ve already learned all of the required tags for a functioning HTML document. We’ll look at boilerplate code (template code that uses all the tags you’ve learned) in a minute. First, let’s take a look at two common tags that you can use in your first HTML document!

Heading 1: <h1></h1>

This tag creates a title for the web page. There are actually six heading tags: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> from largest to smallest. They exist to provide visual hierarchy and to differentiate titles, headings, and subheadings from normal paragraph text. 

Paragraph: <p></p>

The paragraph tag is probably one of the most used tags in all of HTML for the simple reason that it prints body text, and we webmasters have a lot to talk about! 

Keep in mind that while there are many built-in tags, you can create tags with any name you want! that’s part of what makes HTML such a versatile language. It’s totally customizable so that you can build a site tailored exactly to your project’s needs. Let’s finally look at how to use these tags to get something printed in the browser!

Boilerplate HTML

Properly structured and including some attributes and values that we’ll discuss in a future article, you can put what you’ve learned together to get code that looks like the code below. This is boilerplate HTML, the template you should work from every time you start a web page. It doesn’t get more bare-bones than this. 

Note, some of the attributes and their values shown here are not strictly required, but I’ve included them in an effort to keep this code usable for the vast majority of situations. If you’re ready to start your project, simply copy this code and paste it into your preferred text editor, perhaps VS Code!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Example Website</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
  </head>
  <body>
    <main>
        <h1>Hello, World!</h1>
        <p>Welcome to my website. See, how this works is… I do stuff, and then I post about it on this website. I’m so glad you’ve chosen to be a part of it!</p>
         <p>Make sure to check back once a week for new content!</p>
    </main>
	<script src="index.js"></script>
  </body>
</html>
Photo by Nathan da Silva on Unsplash

Wrapping Up

You’ll notice that the code follows a distinctive indenting structure. This isn’t strictly necessary for browsers to read the code, but it is standard practice and it makes it easier for humans to read and edit it.

In standard HTML, when tags are placed inside other tags, the inner tags are indented one unit further than their parent tags. this means that if you have tags within tags within tags, your innermost tags should be indented as many times as they have ancestors. 

To see this code rendered in your browser, simply paste it into your favorite text editor and save the file! Give it a name like index.html, then double-click the file or right-click it and choose your favorite browser. You should see the heading and two paragraphs below it. Because we haven’t created a CSS stylesheet to accompany it, no styling will be applied beyond the standard line spacing that’s built into HTML, but we’ll cover CSS in a future article.

In the meantime, pat yourself on the back! You’ve just created your very first web page and set yourself on a journey that can take you as far as you want to go! 

Leave a Comment

Your email address will not be published. Required fields are marked *