HTML 5 and The Legends of the Elements
Tags: html, webdev, beginners, tutorial
Published: 2021-11-24 07:21:58

**Hi!** so far we've been taking small bites of HTML cake but it's time to go further! ready?
**Let's go! 😁 **

First of all let's go in depth with elements, their *attributes*, and ways to format them. Not forgetting that elements are constructed by an initial tag, the content and the closing tag, so we **must always remember** to close them. However, sometimes, you should not have to close every tag which are called *empty elements*.

Another point to remember is that tags can be *nested* this means that they are inside each other, for example : 

```html 
<p>lorem <b>ipsum</b> </p>

``` 

It can be said that an HTML document is composed by **nested tags**

## ATTRIBUTES 
In our previous posts we have talked about attributes, but what are these attributes like? To start you should know that :

- There are elements that must carry attributes, a prime example would be the `<img>` tag, this is self closing but must have attributes in order to be valid.

```html
<img src="">
```

- They must always start at the initial tag.
- Only the string attributes value should be enclosed in quotation marks.

* Valid example:
```html
<img width=100 height=100 src="...">
```

* Invalid example:
```html
<img width=100px height=100px src="...">
```

- It is recommended to use "lowercase" attributes.

An example of attributes can be :


```html
 <a href="put here your link">Oh yeah 😊</a>
``` 

## FORMATTING THE CONTENT

How my code should look like? How do we do it? Well, HTML allows you to create a real visual format which is easy to understand by anyone. The first step to make your HTML look's perfectly is to highlight the words, with bold, italics, etc... And how does html play with this? Well, through tags! Why else would it be? 

### HERE YOU HAVE A FEW TAGS:

``` html
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<sub> - Subscript text
<sup> - Superscript text

``` 

### `<STRONG>` VS `<B>` :

The b and strong tags have the same visual meaning, nevertheless google gives always more importance than strong tag because strong is just more somatic than b. `<strong>` is more used to have something of "strong importance", than having something with "bold style".

### `<I>` VS `<EM>`:

The em element isn't a generic "italics" element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the `<i>` element is more appropriate.

** Example of use **

```html
<i><abbr title="Generic Universal Role Playing System">GURPS</abbr></i>, <b>Steve Jackson Games'</b> flagship role-playing game, was first released in 1985. Several licensed adaptations of other companies' games exist for the system, such as <i>GURPS Bunnies and Burrows.</i> However, <b>SJ Games</b> has no connection with <b>Wizards of the Coast</b>, producers of the <i>Dungeons and Dragons</i> RPG. <em>No <i>GURPS</i> content is open-source.</em> <strong>Do not plagiarize <b>SJ Games</b> work!</strong>
```

### COMMENTS 

Finally, I always like to close talking about comments and documentation, YES 😆 do not kill me 🤓, I know every developer hate when they must document their code, but try to figure out what will happen if you want to check your code in the future, I am sure you will no be able to understand anything, comments are really important in a daily routine, you do not only know how to write it, you should know how to understand comments from other developers and how to adapt your code to the team software requirements, look's at this example:

```html
<!--------------- comment --------------------->
```

Oh 😞, this is the end of today's post, but don't worry, I have a little present for you! a cheatsheet with all the tags you need to become a master of HTML, in the following post I will allow to download this cheatsheet. Please do not forget:

> You must be your own best version 🥳.