Back to Basics: HTML for 'Code Newbies'

Yasmin — Sat, 10 Oct 2020 03:45:46 +0000

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: https://www.w3schools.com/tags/ref_byfunc.asp
Attributes reference list: https://www.w3schools.com/tags/ref_attributes.asp

Nevertheless, there are a few commonly used tags you should familiarise yourself with. These include:
<html></html>
<head></head>
<body></body>
<h1></h1>
<img>
<header></header>
<div></div>
<li></li>
<ol></ol>
<ul></ul>

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

class
id
href
src
height
width

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>

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.

<!DOCTYPE HTML> 
<html>
  <head>
    <meta charset="UTF-8">
    <title>My First Line of Code</title>
  </head>
  <body>
  <p class="nice"> Hello World! </p>
  </body>
</html>

<!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!

Forem: Yasmin

Back to Basics: HTML for 'Code Newbies'

What is HTML?

HTML syntax

Tags and Attributes

HTML5 Boilerplate - the bigger picture