DEV Community

Cover image for Back to Basics: HTML for 'Code Newbies'

Posted on • Updated on

Back to Basics: HTML for 'Code Newbies'

Seeing as this is my first technical blog post ever, please do let me know what you thought of it 🤗

What is HTML?

HTML stands for Hypertext Markup Language and its primary function is to specify the webpage structure - you can think of it as the skeleton of the webpage.

HTML syntax

The building blocks of HTML are called elements. The anatomy of a HTML element is as follows: an opening tag, followed by content, and finally a matching closing tag.

Tags are presented using the angled open <> and closed </> brackets. Note that closed brackets typically contain a backslash. When you open a tag, you must always close it. Important: some tags such as <img> are self-closing as they have no content therefore don't require a closing tag.

HTML tags can be extended using HTML attributes. Attributes provide additional information that affects how the browser interprets the element. Attributes are typically written in the name="value" form.

Tags and Attributes

There are countless amounts of tags and attributes than you need to remember, but if you're interested you can refer to the links below.

Tags reference list:
Attributes reference list:

Nevertheless, there are a few commonly used tags you should familiarise yourself with. These include:

Similarly, there are a few commonly used attributes you should also familiarise yourself with:


Now, we've covered some of the basics of HTML, let's look at how you would construct an element using <p> (paragraph) tag and a class attribute:

<p class="nice"> Hello World! </p>
Enter fullscreen mode Exit fullscreen mode

So, in order for you to see this code being rendered on the webpage, there is one more thing you need to do. You need to place it inside a HTML boilerplate (basic template).

HTML5 Boilerplate - the bigger picture

Here is a HTML5 boilerplate. This is a basic template you would need in an editor like VS Code in order to execute and render HTML on a webpage.

    <meta charset="UTF-8">
    <title>My First Line of Code</title>
  <p class="nice"> Hello World! </p>
Enter fullscreen mode Exit fullscreen mode

Output of code saying Hello World!

<!DOCTYPE HTML> tells the browser/parser what type of document it is looking at - in this case HTML.
<HTML> all the HTML we want the browser to pick should be within these tags.
<head> is where all the metadata is kept. You can also add titles that will appear on the tab of your browser.
<body> is where all the content goes, for example the <p> tag.

Top tip: ensure to save your HTML code in this format nameOfFile.html.

Note: in case you're confused about HTML5, it is just the latest version of HTML.

Now you have a good foundational knowledge of HTML, go and practice!

Top comments (0)