HTML Contents
Tags: html, webdev, beginners, codenewbie
Published: 2021-12-24 07:00:20

## Table Of Contents
1. [HTML Structure] (#structure)
3. [Elements / Tags] (#tags)
4. [Mandatory Elements / Tags] (#manatory) 
5. [Attributes] (#attributes)
6. [Conclusion] (#conclusion)


## Structure <a name="structure"/>

Like the English language or any other language, there are grammar rules on how to word out sentences. When it comes to programming languages, they also come with a set of rules that we have to follow in order for the computer to understand what we want it to do. The Web Page or Web Object is a world of its own. We can access the Web Browser Object simply by going onto the web browser's console. There are many ways to communicate with the web browser, which is why HTML is not the only way to create web pages, but yet it is easy for the human brain to read and understand, which is why it is usually recommended for beginner developers to get a glimpse of developing web pages.

It also helps us organize our content too. Another way to look at a web page is the newspaper. The front page can be the landing page describing the biggest news of the day; there can be articles in their little sections, too, where topics are divided into groups and are aligned altogether. HTML's structure helps achieve this on the web. 

![newspaper](https://cdn.flipsnack.com/template/3583/small/page_1)

**HyperText Markup Language**: **Hypertext** allows us to create links for users to access another web page quickly. **MarkUp** allows us to annotate text and provide additional information. Tags or Elements (can be used interchangeably) allow us to define our structure. 

## Elements / Tags <a name="tags"/>


Another example can be a Word Document, we can create headings, lists, forms, and paragraphs. In **HTML** we do this with **Elements**. When we want to add content or information on to the web, HTML has some built in **elements** that allow us to display our content the way we want it to. When working with **elements** there is a specific way we need to write out our tags in order for the web browser to understand. We can think of tags as our wrapper or container for our content.

![Tags Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6dnnke3mznr3txxte0c.jpg)

We first would declare our **opening tag** with a **Left-Angle-Bracket** followed by our **element**, followed by a **Right-Angle-Bracket**. After our opening tag, we can add our content. Once we are done with our content, we end it with a **closing tag**. Like before, we start with our **Left-Angle-Bracket**, but to tell HTML we are done with this part, we add a **Forward-Slash** next, followed by our **element**, ending it with a **Right-Angle-Bracket**. Now lets learn about what **elements** are usually required for our HTML document.

## Mandatory Elements / Tags <a name="mandatory"/>


When we first create our HTML document, there are a few elements that we need to have written out first in order to get start adding our content.

```
<html> </html>
```

**HTML Element** : this element is our **root** element. Everything we want to show on from our **HTML** document has to be wrapped inside these **tags**. 

```
<head> </head>
```

**Head Element** : this tag usually contains information about the document. It can hold other **elements** inside of it, for example. 

```
<head>
  <title> Our title </title>
</head>
```

**Title Element** : this tag defines the documents name and is shown on the Browsers Tab. This can only contain text and can not hold any other elements inside.

```
<html>
  <head>
    <title>
      Our title
    </title>
  </head>
</html>
```

The next section would be our **Sectioning root** or known as the **Body** element. Where all of our HTML content will be wrapped in. There can only be **one** body element per HTML document.

```
<body> </body>
```

Here is a quick example of an HTML document with some content.

```
<html>
  <head>
    <title>
      Our title
    </title>
  </head>
  
  <body>
    <h1> Our Heading element </h1>

    <p>
      Lorem ipsum dolor sit amet
    </p>

    <h3> Sub heading </h3>
     
    <p> 
      Duis aute irure dolor in reprehenderi
    </p>  
 
  </body>
</html>
```

## Attributes <a name="attributes"/>


We can also add additional information onto our **elements** using **Attributes**. We add **Attributes** to the **opening**tag of our element. It consists of a `name` and a `value.` We assign the `value` to the `name` given. There are some built-in **Attribute** names available to us to use. We can give **elements** names to help servers identify them easier when working with data.

```
<p name="user"> Oscar Ortiz </p>
```

When using **Attributes** some elements may be limited to using them. So be sure to do a quick search on the type of **Attribute** you're trying to use.

## Conclusion <a name="conlusion"/>


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!