Back to Basics: HTML for 'Code Newbies'
Tags: codenewbie, html, webdev, beginners
Published: 2020-10-10 03:45:46


_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>
```

![Output of code saying Hello World!](put-link-to-image-here)


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