What is HTML?
Tags: html, codenewbie, beginners, tutorial
Published: 2021-12-21 19:45:01

## Hyper Text Markup Language

So how exactly do we write code for our web pages? 

There is this amazing language known as **HyperText Markup Language** or HTML in short makes it is easy to create a web page structure.  It is great to learn for beginners who are just trying to learn how to code. I don't mean **EASY** as learning your **ABC's** but its a great way to start learning **terminology**, **syntax**, **code editors**, **developer tools**, and **more**. Before trying to learn how to **style** web pages or add **functionalities**, we need to learn some fundamentals that will carry on with us throughout our career as a developer. With these simple tricks and tips, we will pick up other languages a bit quicker and efficiently.

![HTML goal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/foh1lm1smu8affk0ijct.jpg)

## Reading Code

Anytime we are trying to learn a new language to help us develop any type of software or web pages. We first need to understand the languages' **syntax**. In **HTML** we use **element tags** to tell the web browser what exactly we want to display on the page.


```
<h1> HTML Syntax: header element </h1>
<p> Paragraph element </p>
```

**_Syntax_**: the arrangement of words and phrases to create well-formed sentences in a language. You can think of this as the set of rules to create out Web Page Structure.

## HTML Element Tags

Here is a quick reference of very commonly used HTML Tags

```
// used for headers
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>


// used for paragraphs or text
<p> </p>

// used for lists

<ul> </ul>
<ol> </ol>

// used to handle user forms

<form> </form>

```

If you want to dive more on **HTML Tags** check out this [link](https://www.w3schools.com/tags/default.asp). 

## Working with tags

As you can see we usually include **two** element **tags** when trying to pass in any content to the browser. We need a **_Opening Tag_** and **_Closing Tag_**. Inside the tags is where we put in our context that we want to show on the browser. 


Here we have a `h1` **_element tag_**. The opening tag will usually be between our `< >` so it will look like `<h1>`, now we put our context right after our element, once we are done with our context we add another tag but this time we add a `/` right before our `element tag` name, so it will look like `</h1>` and that will be our closing tag for this `header`.

```
<h1> Header Element </h1>
```


## Creating HTML Page

Let's go ahead and open up our **code editor** to create a **html file**. When we create our **code files** we have to add the type of language we are using at the end of the file to let the computer know what type of program we are trying to create within the file. So for example if we want to write **HTML** code we would create a file like with a name of our choosing and add **period** `.` at the end of the file name and add `html` right after. 

Once our file is created, we can write **HTML Tags** onto our file. We will write a `header` tag to create simple text on the browser. 

``` 
<h1> Hello World </h1>
```

e.g. `file_name.html`

![create html file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rj5mu9m8ci0egs1d2xr.gif)

## HTML Live Page

Now that we know how to create HTML files, we can open them in the browser. There are numerous ways to start up our HTML file, but for this example, we will manually open it onto our web browser by clicking on our file. Depending on our default browser, it will vary on what browser it will open up. If we have multiple browsers, be sure to pick the most comfortable one.  We will be using google chrome for this guide since it provides beneficial developer debugging tools to help make our lives easier when we need to fix our broken code.


1. Locate where you saved your `file_name.html` file
2. Right click the file
3. Open with (choose a browser)
4. Browser opens HTML file and displays content

e.g.

![live html](https://media1.giphy.com/media/BjICwJdqqOyMLVhWDM/giphy.gif?cid=790b761169ac82e34ed0f9db7621caaa320b89eba4b84cdc&rid=giphy.gif&ct=g)

Congratulations! We just learned how to create **HTML files**, open it with our browser, and wrote out our first **HTML Tags**! This is just the beginning of a whole new world! Soon enough you will be able to create much more attractive web pages with color, images, and sections to help readers find what they are looking for easier. 

## Conclusion

I hope by the end of this article you managed to learn how to create and understood what is going on in every line of code. It is very important to understand how your code fully works, not only does it help you become a better developer but can also help you use the tools you are working with more efficient.

These articles are mostly intended for personal use on becoming a better programmer, writer, and grow my programming skills. Feel free to drop any feedback or corrections that you believe that should be made to help me and others. Thank you for your time for sticking this far!