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.

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.

HTML: <h1> Giant title </h1>

Markdown: # Giant title 

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

Markdown: ## Very big title

HTML: <h3>Big title</h3>

Markdown: ### Big title

HTML: <h4> Medium titleo </h4> 

Markdown: #### Medium title 

HTML: <h5> Small title </h5>

Markdown: ##### Small title

HTML: Smaller title

Markdown: ###### Smaller title

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.

HTML:  <strong>Bold</strong>

Markdown:  **Bold**

HTML:  <u>Underlined</u>

Markdown: No support

HTML: <s>Cross out</s>

Markdown: ~~Cross out~~

HTML: <em>Italic</em>

Markdown: *Italic*

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

Markdown: No support

The platform offers us a single option to align the content of our post: left, center or right, using the following tags:

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

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

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:  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.

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

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

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:

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

Markdown: > This is a quote  

Result: 
This is a quote 

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

Markdown:
 >! [Spoiler Alert Title] Spoiler content
  

Result: Spoiler Alert Title
Spoiler content 

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.

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 .

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

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

• <table>: Define the complete table.
• <thead>: Defines the header of the table, where the column headings go.
• <tr>: Defines a row of the table.
• <th>: Defines column headers.
• <tbody>: Defines the body of the table, where the data is located.
• <td>: Define cells within the table.

Code:

<table>
   <thead>
     <tr>
      <th><h6>Title 1</h6></th>
      <th><h6>Title 2</h6></th>
      <th><h6>Title 3</h6></th>
     </tr>
   </thead>
   <tbody>
     <tr>
      <td>Data 1</td> 
      <td>Data 2</td>
      <td>Data 3</td>
     </tr>
     <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
     </tr>
   </tbody>
</table>

Result:

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.

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

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

Result: Link text 

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

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

Markdown: [Go to introduction](#introduction)

Result: Go to introduction 

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.