# Body Tags

body in itself is a tag. But in this case, we refer to the body where you are going to place the content in Moodle: teaching materials, assignment descriptions, visual aids, etc. Although there are dozens of useful tags we can use in our courses, in this version of Mootify we're incorporating the most common ones.

# Divs

We're using the div tag to place the central elements in our body.

<div>
    // content come here.
</div>

# Headers in Divs

Since Moodle doesn't let <header> tags being inserted in their HTML, we're using the <div> tags instead.

<div>
    // The header goes here.
</div>

::: warninng Don't use the <header> tags to create a header in your code. :::

# Main

In our main tag, we're placing the central elements of the content.

<main>
    // The main content goes here.
    // Usually, sections are placed inside of the main element.
</main>

# Section

We're going to use the <section> tag to include our content sections. You may have one section, or two. Or as many as it's visually appealing to the user.

<main>
    <section>
        // Content for this section goes here.
    </section>
    <section>
        // Content for this other section goes here.
    </section>
</main>

# Aside

Most people use the <aside> tag to place a sidebar, or whatever elements puts itself aside of the content. Pun intended.

Aside content aren't really necessary when it comes to styling; it just makes it easier to manage.

They can be displayed wherever in the content you want. Before the first section, in the middle, or at the end. Depending on where you want to style that content.

<main>
    <section>
        // Content for this section goes here.
    </section>
    <aside>
        // Content that might be displayed different from the rest could be placed here.
    </aside>
    <section>
        // Content for this other section goes here.
    </section>
</main>

Although we're not using navigation in HTML other than the one provided by Moodle, in the Footer section we can place information about the course, the instructor, or the year.

You don't need to write a footer on every slide of your course.

# Paragraphs

This is a paragraph 😎

Ok. Maybe not. Most paragraphs have 3 or more sentences. This paragraph can serve as an example of a similar one that you would create in Moodle. How do I look now?

This is an external link: Visit Google.

Create external link using the tag <a></a>, the href="", and the external link with target="_blank".

Everything goes in the opening tag <a>.

It will look like this

<a href="" target="_blank"></a>

href is an attribute for the anchor tag and you use it to specify the hypertext to the anchor link. Like so

Go to Google if you want to live.

<p>Go to <a href="https://www.google.com">Google</a>, if you want to live.</p>

WARNING

If you don't use the target="_blank" attribute, it takes you out of the page.

This Google, takes me out of the page.

# For example


# My Favorite Movie

I love Avengers. It's my favorite movie. Well, it became my favorite movie not with the first Avengers in 2012 though. The combination of all the movies surrounding the Marvel Cinematic Universe (MCU) is what makes it a masterpiece to watch. We're talking about 22 movies in 10+ years.

First, it was Iron Man in 2018, starring Robert Downey Jr., all the way up to Avengers: End Game. I remember watching Iron Man with my brothers at the movie theater for the first time. We knew this wasn't going to stop. This last movie made a staggering 2.8 billion dollars as we speak.

<h4>My Favorite Movie</h4>
<p>
I love Avengers. It's my favorite movie. Well, it became my favorite movie not with the first Avengers in 2012 though. The combination of all the movies surrounding the Marvel Cinematic Universe <a href="https://en.wikipedia.org/wiki/Marvel_Cinematic_Universe" target="_blank">MCU</a> is what makes it a masterpiece to watch. We're talking about 22 movies in 10+ years.
</p>
<p>
First, it was <a href="https://en.wikipedia.org/wiki/Iron_Man_2008_film" target="_blank">Iron Man</a> in 2018, starring <a href="https://en.wikipedia.org/wiki/Robert_Downey_Jr." target="_blank">Robert Downey Jr.]</a>, all the way up to <a href="https://en.wikipedia.org/wiki/Avengers:_Endgame" target="_blank">Avengers: End Game</a>. I remember watching Iron Man with my brothers at the movie theater for the first time. We knew this wasn't going to stop. This last movie made a staggering <a href="https://www.boxofficemojo.com/release/rl3059975681/" target="_blank">2.8 billion</a> dollars as we speak.
</p>

# Lists

Bulleted lists and numbered list are commonly used to write objectives and goals.

# For example:

# Goal
  • At the end of this course, you will be able to write html list tags on your Moodle editor in less than 10 minutes.
# We well cover the following topics:
  1. Unordered lists
  2. Ordered lists
  3. List tags

# Quotes

This is a quote

This is another blockquote.