HTML syntax MASTER post!
Tags: html, css, programming, codenewbie
Published: 2020-12-01 03:06:42

This post is for absolute beginners  , you will master html syntax in just 10 minutes.

## Stand for:

* **HyperText** means that it uses the HTTP part of the Internet.
* **Markup** means the code you write is annotated with keywords.
* **Language** means it can be read by both a human and a computer.

Like any language, HTML comes with a set of **rules**. These rules are relatively simple. It comes down to defining **boundaries**, to know where something starts and where something ends.

> Here is a sample paragraph in HTML:


```html
<p>If Tetris has taught me anything it's that errors pile up and accomplishments disappear.</p>
```

What you see in **angle brackets** `<html>` are HTML **tags**. They define where something.

Each of them carry a specific **meaning**.

 In this case, `p` stands for **paragraph**.

> They usually go in pairs:

* the opening tag `<p>` defines the **start** of the paragraph
* the closing tag `</p>` defines its **end**

The only difference between an opening and closing tag is the **slash** `/` that precedes the name of the tag.

When you combine an opening tag, a closing tag, and everything in between, you obtain an **HTML element**. The whole line is an HTML element that uses the HTML tags `<p>` and `</p>`.

If you , you'll notice that **HTML tags are not displayed** by the browser. They are only read by the browser to know what type of **content** you've written.

### Learn to write html.

You've probably come across simple text files, those that have a `.txt` extension.

For such a text file to become an **HTML document** (instead of a text document), you need to use an `.html` extension.

Open your **text editor**, and copy paste the following:

```html
<p>This is my firstwebpage!</p>
```

Save this file as `my-first-webpage.html` and just open it with your browser, and you'll see:

<div class="result"><p>This is my firstwebpage!</p></div>

Remember:

* use a text editor like Notepad++ to **create** HTML documents
* use a browser like Firefox to **open** HTML documents

### Attributes

Attributes act like **extra** information tied to an HTML element. They are written within an HTML tag. As such, they are not displayed by the browser either.

For example, the `href` attribute is used to define the target of a **link** (which uses an **a**nchor tag):

```html
<a href="https://www.mozilla.com/firefox">Download Firefox</a>
```

<div class="result"><a href="https://www.mozilla.com/firefox">Download Firefox</a></div>

There are [16 HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Globalattributes) that can be used on any HTML element. All of them are **optional**.

You'll mostly use `class` (which is used for CSS), and `title` (which is the tooltip that appears when hovering an item like this one).

Some HTML elements have **obligatory** attributes. For example, when inserting an image, you have to provide the location of the image, using the `src` (source) attribute:

```html
<img src="#" alt="Description of the image">
```

Considering that the purpose of the `<img>` element is to display an image, it makes sense for the path to the image to be **required**.

### How to write comments ?

If you write something in your code without disrupting how the browser will display your page, you can write **comments**. They will be ignored by the browser, and are only useful for us humans who write the code.

A comment starts with `<!--` and ends with `-->`.

```html
<!-- This sentence will be ignored by the browser -->
<p>Hello World!</p>
```

<div class="result"><p>Hello World!</p></div>

### Self-enclosing elements

Some HTML elements only have an opening tag:

```html
<br> <!-- line-break -->
<img src="https://placehold.it/50x50" alt="Description"> <!-- image -->
<input type="text"> <!-- text input -->
```

Because they don't have a closing tag and consequently can't contain anything inside them, self-enclosing elements usually carry a few attributes, to provide them with additional information.

Read more in my next post , till then share it with others.