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.
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.
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
The head section traditionally includes information about the website you’re creating, like its
<meta> tags that include meta-information about the site, a
<link> to a stylesheet, a
<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!
This tag creates a title for the web page. There are actually six heading tags:
<h6> from largest to smallest. They exist to provide visual hierarchy and to differentiate titles, headings, and subheadings from normal paragraph text.
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!
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!
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<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>
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!