Check out the new web development bootcamp! learn more

It has already been one month since I first created this blog! I am trying to improve it. Do you have any ideas? leave a feedback

home > learn html

Web Dev Bootcamp ∙ Learn HTML

Hieu Nguyen · May 01, 2020 · 7 min read



0 leave some love!

What is HTML

HTML is a Hyper Text Markup Language that tells the browser how our website is layed out. It describes the structure and the elements in our webpage. A typical button is represented as


Understand the basics of HTML

This section will not cover everything there is to know about HTML because you don’t need to know everything to be successful.

It will just cover the basics and just enough to get you started


You need a code editor to write your code in. I prefer vs code, but feel free to use any editor you like.

As a good coding practice, always start your project by creating a project folder. This helps to organize your code. For the purpose of this bootcamp, we are going to have one master folder to store all of our codes, and create nested folders if we feel the need to separate things.

create a folder named something along the line of “WebDevBootcamp”

Mac and Linux:

mkdir WebDevBootcamp

Note: Here I am using a bash command to create the folder. I will go into more depth later about bash commands.


just use your file explorer to create the folder.

Creating your first HTML file

  1. inside of the “WebDevBootcamp” folder, create another folder called “learn-HTML” or anything else you want to call it.
  2. inside the “learn-HTML” folder, create an HTML file index.html. Here “index” is the name of the file and “.html” is the file type
  3. Add boiler plate. A HTML file contains a set of tags. There are two types of tags:

    1. Opening and closing tags: <html></html>
    2. Self closing tags: <img/>. Self-closing tags do not need an additional closing tag
<!DOCTYPE html>

The <html></html> tag is used to wrap our entire HTML file inside the HTML file, we have two element <head></head> and <body></body> The head contains meta data and scripts tags that the browser runs when we load the HTML file. The body contains the content of our HTML page

  1. Lets add a title

    1. Inside the <title></title>, add a title => <title>Dogs are Great!</title>
    2. To view your HTML file, the easiest way is to drag and drop it anywhere inside your google chrome browser.

change title

Congrats! you have officially created your very first HTML file.


  1. <body></body> - contains the content that will appear on the webpage
  2. <title></title> - storing the title of the webpage
  3. <h1></h1> - headers are large text usually used for article titles and titles. There is also h2, h3, h4, h5, h6 tags headers
  4. <p></p> - paragraph


Attributes are like special properties that you pass to an HTML tag to alter its functionality or how it is displayed


<img src="cutedog.jpeg" alt="cute dog" />

cute dog

here the src is the location of the image and alt is the text that will appear if the image failed to load

Here are a list of common attributes that

  • disabled - if true, then the element is disabled
  • href url to another website
  • id id of an element
  • src url of image location
  • style - styling an element
  • title -tooltip when you hover an element


styling allows you to customize the look of an element

<body style="background:red;"></body>

here we gave the body a style attribute and gave it the style background:red; which will make the background red

red background


comments are little notes to yourself, but do not show up on the webpage

<!-- Dogs are awesome! -->


use an anchor tag <a></a> and provide a href

<a href="">google</a>


    <th>favorite food</th>
    <td>Ice cream</td>

here is what it looks like:

name favorite food
Bob Donuts
Sara Ice cream


Ordered List

  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>

here is what it looks like:

  1. item 1
  2. item 2
  3. item 3

Unordered list

  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>

here is what it looks like:

  • item 1
  • item 2
  • item 3


Blocks are like containers for a group of related elements.

  <h1>This is a container for my cookie</h1>
  <p>flavor: chocolate</p>

here is what it looks like:

This is a container for my cookie

flavor: chocolate

Classes, id, and names

These are typically identifiers that helps add specificity to an element. for instance, <div class="dog animal">Woof</div> and <div class="cat animal">Meow</div> are div. One with class “dog” and the other “cat”, and they both have class “animal”

Note: you can assign more than one class to an element by separating them with a space

Having this specificity is useful when you want to target a specific element by its class and style it a specific way without affecting other similar elements

Ranking by specificity, id is the most specific, follow by class, and finally name

Form and inputs

A form is how to obtain data from the users. A form will typically consists of one or more inputs and a submit button

<form action="/receive-form" method="POST">
  <input type="text" id="name" placeholder="Enter your name" />
  <label for="name">Name:</label>

  <input type="email" id="email" placeholder="enter your email" />
  <label for="email">Email:</label>

  <input type="password" id="password" placeholder="enter your password" />
  <label for="password">Password:</label>

  <button type="submit">submit</button>

Here we have three inputs. a text input for the name, an email input, and a password input. We also have a submit button. When the user clicks submit a POST request will be sent to the /receive-form route on the server

More information

complete list of tags

MDN Introduction to HTML

What’s next

Start learning CSS

Hieu Nguyen - Founder of I am also a video gamer, a full stack developer, and an anime lover. I'm also an advocate of teaching others how to code.