![The ultimate (1).png](https://files.peakd.com/file/peakd-hive/mateodm03/23uQk8yPETLsCAY9wzJmfJjDixs4GJ3bVTK61L7SKaddpRuUWLfT8o5gTEB7HeaKQec5f.png) ![diamantito_separador (2).png](https://files.peakd.com/file/peakd-hive/mateodm03/23sweHwH71FofD6dEK739rsqDJwMvw2UMzDKjPmEokM6vZVknduRpEojN3juJQotWoBTw.png)

Markdown and HTML Guide

![diamantito_separador (2).png](https://files.peakd.com/file/peakd-hive/mateodm03/23sweHwH71FofD6dEK739rsqDJwMvw2UMzDKjPmEokM6vZVknduRpEojN3juJQotWoBTw.png) Introduction

Text Size

Text Decoration and Colors

Align the content

Upload images per link

Paragraphs, separators, quotes and spoilers.

Create list of items and numbers and spoilers.

Creation of tables

Redirecting to a link and creating an index

![diamantito_separador (2).png](https://files.peakd.com/file/peakd-hive/mateodm03/23sweHwH71FofD6dEK739rsqDJwMvw2UMzDKjPmEokM6vZVknduRpEojN3juJQotWoBTw.png)

Introduction

![diamantito_separador (2).png](https://files.peakd.com/file/peakd-hive/mateodm03/23sweHwH71FofD6dEK739rsqDJwMvw2UMzDKjPmEokM6vZVknduRpEojN3juJQotWoBTw.png) Good morning everyone! Today I bring you a guide about Markdown and HTML. Before going into detail about the possibilities that both offer to create publications, I want to clarify an important point: it is not recommended to mix HTML and Markdown excessively in the same section of the text. This can cause problems, such as misalignments or unexpected formatting that could affect the presentation of the content. - Markdown is a simple markup language designed to create documents that are easily readable and convertible to HTML, without the need to write complex code. - HTML is the standard used to structure web pages, allowing you to define the organization and format with tags and attributes. ![diamantito_separador (2).png](https://files.peakd.com/file/peakd-hive/mateodm03/23sweHwH71FofD6dEK739rsqDJwMvw2UMzDKjPmEokM6vZVknduRpEojN3juJQotWoBTw.png)

![diamantito_separador (2).png](https://files.peakd.com/file/peakd-hive/mateodm03/23sweHwH71FofD6dEK739rsqDJwMvw2UMzDKjPmEokM6vZVknduRpEojN3juJQotWoBTw.png) In both HTML and Markdown, we have an option to size the text up to six levels. In the case of Markdown, we place a # (hashtag) at the beginning of the line followed by a space and in HTML we have to use the < h(size)> < /h(size)> tag that closes the text.

Giant title
HTML: <h1> Giant title </h1> Markdown: # Giant title

Giant title

HTML: <h1> Giant title </h1>

Markdown: # Giant title

Very big title
HTML: <h2>Very big title</h2> Markdown: ## Very big title

Very big title

HTML: <h2>Very big title</h2>

Markdown: ## Very big title

Big title
HTML: <h3>Big title</h3> Markdown: ### Big title

Big title

HTML: <h3>Big title</h3>

Markdown: ### Big title

Medium title
HTML: <h4> Medium titleo </h4> Markdown: #### Medium title

Medium title

HTML: <h4> Medium titleo </h4>

Markdown: #### Medium title

Small title
HTML: <h5> Small title </h5> Markdown: ##### Small title

Small title

HTML: <h5> Small title </h5>

Markdown: ##### Small title

Smaller title
HTML: Smaller title Markdown: ###### Smaller title

Smaller title

HTML: Smaller title

Markdown: ###### Smaller title

![diamantito_separador (2).png](https://files.peakd.com/file/peakd-hive/mateodm03/23sweHwH71FofD6dEK739rsqDJwMvw2UMzDKjPmEokM6vZVknduRpEojN3juJQotWoBTw.png)

Text decoration and colors

![diamantito_separador (2).png](https://files.peakd.com/file/peakd-hive/mateodm03/23sweHwH71FofD6dEK739rsqDJwMvw2UMzDKjPmEokM6vZVknduRpEojN3juJQotWoBTw.png) We also have several options to decorate our text and only one option to paint red, since Markdown does not support colors and in HTML you cannot apply styles to the tag either.

Bold
HTML: <strong>Bold</strong> Markdown: Bold

Bold

HTML:  <strong>Bold</strong>

Markdown:  **Bold**

Underlined
HTML: <u>Underlined</u> Markdown: No support

Underlined

HTML:  <u>Underlined</u>

Markdown: No support

~~Cross out~~
HTML: <s>Cross out</s> Markdown: ~~Cross out~~

Cross out

HTML: <s>Cross out</s>

Markdown: ~~Cross out~~

Italic
HTML: <em>Italic</em> Markdown: Italic

Italic

HTML: <em>Italic</em>

Markdown: *Italic*

Red
HTML: <div class="phishy">Red</div> Markdown: No support

Red

HTML: <div class="phishy">Red</div>

Markdown: No support

![diamantito_separador (2).png](https://files.peakd.com/file/peakd-hive/mateodm03/23sweHwH71FofD6dEK739rsqDJwMvw2UMzDKjPmEokM6vZVknduRpEojN3juJQotWoBTw.png)

Align content

Code	Example
<div class="pull-left"> Align to Left </div>	Align to Left
<center> Align to Center </center>	Align to Center
<div class="pull-right"> Align to Right </div>	Align to Right

Maybe the table doesn't show it so well, so here is a more practical example:

Left

Center

Right

We can also use Left and Right only, which is a widely used format for making posts in two languages:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et libero pretium, iaculis diam convallis, eleifend nulla. Sed dictum tincidunt sagittis. Duis maximus ultrices dolor, ut convallis elit viverra id.

![diamantito_separador (2).png](https://files.peakd.com/file/peakd-hive/mateodm03/23sweHwH71FofD6dEK739rsqDJwMvw2UMzDKjPmEokM6vZVknduRpEojN3juJQotWoBTw.png)

Upload image by link

![diamantito_separador (2).png](https://files.peakd.com/file/peakd-hive/mateodm03/23sweHwH71FofD6dEK739rsqDJwMvw2UMzDKjPmEokM6vZVknduRpEojN3juJQotWoBTw.png)

Using one image per link with Markdown Use one image per link with HTML

Using one image per link with Markdown	Use one image per link with HTML
To upload an image in Markdown, you can use the following format: `![Texto descriptivo](link)` Descriptive text: Text that describes the image. It will appear if the image does not load correctly or if someone chooses to listen to the post with audio. link: This is the URL or the address of the image you want to insert.	To upload an image in HTML, you can use the following format: `<img src="link" alt="Descriptive text">` src="link": The path or URL of the image you want to insert. alt="Descriptive text": Text that describes the image. It will appear if the image does not load correctly or if someone chooses to listen to the post with audio.

To upload an image in Markdown, you can use the following format:

![Texto descriptivo](link)

Descriptive text: Text that describes the image. It will appear if the image does not load correctly or if someone chooses to listen to the post with audio.
link: This is the URL or the address of the image you want to insert.

To upload an image in HTML, you can use the following format:

<img src="link" alt="Descriptive text">

src="link": The path or URL of the image you want to insert.
alt="Descriptive text": Text that describes the image. It will appear if the image does not load correctly or if someone chooses to listen to the post with audio.

![diamantito_separador (2).png](https://files.peakd.com/file/peakd-hive/mateodm03/23sweHwH71FofD6dEK739rsqDJwMvw2UMzDKjPmEokM6vZVknduRpEojN3juJQotWoBTw.png)

Paragraphs, Dividers, Quotes and Spoilers

![diamantito_separador (2).png](https://files.peakd.com/file/peakd-hive/mateodm03/23sweHwH71FofD6dEK739rsqDJwMvw2UMzDKjPmEokM6vZVknduRpEojN3juJQotWoBTw.png)

Paragraphs
HTML: <p>This is a paragraph in HTML.</p> Here is what follows Result: This is a paragraph in HTML Here is what follows

Paragraphs

HTML: <p>This is a paragraph in HTML.</p> Here is what follows

Result:  This is a paragraph in HTML 
 Here is what follows

Separators
HTML: <hr></hr> or <hr/> Markdown: --- Result:

Separators

HTML: <hr></hr> or <hr/>

Markdown: ---

Result:

Separators are quite useful for posts. However, it is more advisable to use personal separators like the ones I used. The most used one is this image: ![NTy4GV6ooFRmaCXZ8UYgPhoud1kjiNX8QokLEZtbBKLuLWQ9yt7K3o4PG8fAHT8nqJdLrXhv1wkFmU7XSq8inKhsASTSSHQG7ThpFEita6PHBLFpqG32TMrcwsEjF6LTjhQk2KsCPiU9dcBJxD45RZSyzGW2okbroUKxgWNA.png](https://files.peakd.com/file/peakd-hive/mateodm03/23uEwhXRn7PYFcTs7zrfie9mRP9JqKvmZdYeTq6qtCMrDA1CqTESiQ3WSoHYiAXuMfAQB.png)

Quotes
HTML: <quote>This is a quote</blockquote> Markdown: > This is a quote Result: This is a quote

Quotes

HTML: <quote>This is a quote</blockquote>

Markdown: > This is a quote

Result: This is a quote

Spoiler
HTML: <details> <summary>Spoiler Alert Title</summary> <p>Spoiler content</p> </details> Markdown: >! [Spoiler Alert Title] Spoiler content Result: Spoiler Alert Title Spoiler content

Spoiler

HTML: 
<details>
  <summary>Spoiler Alert Title</summary>
  <p>Spoiler content</p>
</details>

Markdown:
 >! [Spoiler Alert Title] Spoiler content

Result: Spoiler Alert Title
Spoiler content

![diamantito_separador (2).png](https://files.peakd.com/file/peakd-hive/mateodm03/23sweHwH71FofD6dEK739rsqDJwMvw2UMzDKjPmEokM6vZVknduRpEojN3juJQotWoBTw.png)

Lists with items and with numbers.

![diamantito_separador (2).png](https://files.peakd.com/file/peakd-hive/mateodm03/23sweHwH71FofD6dEK739rsqDJwMvw2UMzDKjPmEokM6vZVknduRpEojN3juJQotWoBTw.png) Lists with items can be made with both Markdown and HTML, in HTML it is enough with two tags and in Markdown it is much easier to do it with a hyphen(-) and space.

Lista con items
HTML: <ul> <li> First item </li> <li> Second item </li> <li> Third item </li> </ul> Markdown: - First item - Second item - Third item Result: First item Second item Third item

Lista con items

HTML: 
<ul>
    <li> First item </li>
    <li> Second item </li>
    <li> Third item </li>
</ul>

Markdown: 
- First item  
- Second item  
- Third item

Result: 

First item
Second item
Third item

To make a list with numbers, in HTML you have to use two tags and in Markdown just the number with a .

List with numbers
HTML: <ol> <li> First item </li> <li> Second item </li> <li> Third item </li> </ol> Markdown: 1. First item 2. Second item 3. Third item Result: First item Second item Third item

List with numbers

HTML: 
<ol>
    <li> First item </li>
    <li> Second item </li>
    <li> Third item </li>
</ol>

Markdown: 
1. First item  
2. Second item  
3. Third item

Result: 
First item
    Second item
    Third item

![diamantito_separador (2).png](https://files.peakd.com/file/peakd-hive/mateodm03/23sweHwH71FofD6dEK739rsqDJwMvw2UMzDKjPmEokM6vZVknduRpEojN3juJQotWoBTw.png)

Create tables

![diamantito_separador (2).png](https://files.peakd.com/file/peakd-hive/mateodm03/23sweHwH71FofD6dEK739rsqDJwMvw2UMzDKjPmEokM6vZVknduRpEojN3juJQotWoBTw.png) We come to perhaps the most complicated part to understand and explain. In case you have no experience manipulating HTML code, I strongly recommend that you use Markdown to create your tables because it is quite simple:

Glosario

- **`|`**: It is used to separate columns. - **`---`**: It is used as a separator between headers and data.

Code:

``` | Column 1 | Column 2 | Column 3 | |-----------|------------|------------| | Data 1 | Data 2 | Data 3 | | Data 4 | Data 5 | Data 6 | ```

Result: | Column 1 | Column 2 | Column 3 | |-----------|------------|------------| | Data 1 | Data 2 | Data 3 | | Data 4 | Data 5 | Data 6 |

If you like to complicate your life, here is the tutorial on how to make a table with HTML:

Glosario

- **``**: Define the complete **table**. - **``**: Defines the **header** of the table, where the column headings go. - **``**: Defines a **row** of the table. - **``**: Defines the **body** of the table, where the data is located. - **`

`**: Defines **column headers**. - **`

`**: Define **cells** within the table.

Code:

```

Titulo 1	Titulo 2	Titulo 3
Dato 1	Dato 2	Dato 3
Dato 4	Dato 5	Dato 6

```

Result:

Title 1	Title 2	Title 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

These tables are fully customizable, having the opportunity to add rows and columns as much as you want. The tables is a function that I use very often to capture statistics that I compile. ![diamantito_separador (2).png](https://files.peakd.com/file/peakd-hive/mateodm03/23sweHwH71FofD6dEK739rsqDJwMvw2UMzDKjPmEokM6vZVknduRpEojN3juJQotWoBTw.png)

Links and Index

![diamantito_separador (2).png](https://files.peakd.com/file/peakd-hive/mateodm03/23sweHwH71FofD6dEK739rsqDJwMvw2UMzDKjPmEokM6vZVknduRpEojN3juJQotWoBTw.png)

Redirect to a link

HTML: <a href="https://risingstarutils.vexy.host/">Link text</a>

Markdown: [Link text](https://risingstarutils.vexy.host/)

Result: Link text

Create an index to redirect to a section of the post.

Create target: <div id="introduction"> Text </div>

It is necessary to place the `#` before the `id`, so that the link stays on the page and does not redirect out of it..

HTML: <a href="#introduction">Go to introduction</a>

Markdown: [Go to introduction](#introduction)

Result: Go to introduction

![diamantito_separador (2).png](https://files.peakd.com/file/peakd-hive/mateodm03/23sweHwH71FofD6dEK739rsqDJwMvw2UMzDKjPmEokM6vZVknduRpEojN3juJQotWoBTw.png) Here are some tricks I have learned while posting in this and other forums. Unfortunately, this forum's HTML has limitations, as it does not allow adding CSS styles, which makes it difficult to customize aspects such as text colors, table sizes and other visual details. However, with the right techniques, clear and functional presentations can be achieved. We have reached the end of the detailed guide to Markdown and HTML. If in the future I forget some functionality or have something else to add, I will not hesitate to edit the post and add it. I have tried to create a format as clear and attractive as possible so that the information is easy to read and understand. ![diamantito_separador (2).png](https://files.peakd.com/file/peakd-hive/mateodm03/23sweHwH71FofD6dEK739rsqDJwMvw2UMzDKjPmEokM6vZVknduRpEojN3juJQotWoBTw.png) ![NTy4GV6ooFRmaCXZ8UYgPhoud1kjiNX8QokLEZtbBKLuLWQ9yt7K3o4PG8fAHT8nqJdLrXhurqwDcWRgu6U8ny2QR2LSBp5op43LvTmPfRfjQaw6ik2id4Dmh2ZMwtT5Wc7E7YDL4VuwJUY972EhR52ejENrdE3hRFsbHvog.png](https://files.peakd.com/file/peakd-hive/mateodm03/23tva61s2w6yRp4yYVw9gVBBQNJb9vQxKiGohbSZK4oJ58fHAmLzGEiWFV1SNW6eXJ5nz.png)

Markdown and HTML Guide

Introduction

Text Size

Giant title

HTML: <h1> Giant title </h1>

Markdown: # Giant title

Very big title

HTML: <h2>Very big title</h2>

Markdown: ## Very big title

Big title

HTML: <h3>Big title</h3>

Markdown: ### Big title

Medium title

HTML: <h4> Medium titleo </h4>

Markdown: #### Medium title

Small title

HTML: <h5> Small title </h5>

Markdown: ##### Small title

Smaller title

HTML: Smaller title

Markdown: ###### Smaller title

Text decoration and colors

Bold

HTML: <strong>Bold</strong>

Markdown: **Bold**

Underlined

HTML: <u>Underlined</u>

Markdown: No support

Cross out

HTML: <s>Cross out</s>

Markdown: ~~Cross out~~

Italic

HTML: <em>Italic</em>

Markdown: *Italic*

Red

HTML: <div class="phishy">Red</div>

Markdown: No support

Align content

Upload image by link

Paragraphs, Dividers, Quotes and Spoilers

Paragraphs

HTML: <p>This is a paragraph in HTML.</p> Here is what follows

Result: This is a paragraph in HTML Here is what follows

Separators

HTML: <hr></hr> or <hr/>

Markdown: ---

Result:

Quotes

HTML: <quote>This is a quote</blockquote>

Markdown: > This is a quote

Result: This is a quote

Spoiler

HTML: <details> <summary>Spoiler Alert Title</summary> <p>Spoiler content</p> </details>

Markdown: >! [Spoiler Alert Title] Spoiler content

Result: Spoiler Alert TitleSpoiler content

Lists with items and with numbers.

Lista con items

HTML: <ul> <li> First item </li> <li> Second item </li> <li> Third item </li> </ul>

Markdown: - First item - Second item - Third item

Result: First item Second item Third item

List with numbers

HTML: <ol> <li> First item </li> <li> Second item </li> <li> Third item </li> </ol>

Markdown: 1. First item 2. Second item 3. Third item

Result: First item Second item Third item

Create tables

Glosario

Code:

Result: | Column 1 | Column 2 | Column 3 | |-----------|------------|------------| | Data 1 | Data 2 | Data 3 | | Data 4 | Data 5 | Data 6 |

Glosario

Code:

Result:

Links and Index

Redirect to a link

HTML: <a href="https://risingstarutils.vexy.host/">Link text</a>

Markdown: [Link text](https://risingstarutils.vexy.host/)

Result: Link text

Create an index to redirect to a section of the post.

Create target: <div id="introduction"> Text </div>

HTML: <a href="#introduction">Go to introduction</a>

Markdown: [Go to introduction](#introduction)

Markdown: Bold

Markdown: Cross out

Markdown: Italic

Result:
This is a paragraph in HTML
Here is what follows

Result:
This is a quote

Result:
Spoiler Alert Title
Spoiler content

Result:

First item

Second item

Third item

Result:

First item

Second item

Third item