Skip to content

My HTML Cheat SHeet

So I created my cheat sheet before discovering the Fab Academy HTML tutorial.

Name

Code

Example

Note

Main title

              <h1> Header 1 </h1>

Header 1

Header 2

              <h2> Header 2 </h2>

Header 2

You can change the number to have different header type.

Simple text

              <p> Text </p>

Text

For quoting

              <quote> Quote </quote>

Quote

Preformatted text (depends on your settings in your doc)

              <pre>
                Quack
              </pre>


          Quack

Code formatting

              <code> code </code>

code

Comment that only can be seen in editor mode.

              <!-- Comment -->

I assure you. There is a comment there.

For line break

              <br>

When you hit enter in text, it doesn't make the text go to the next line so you need to use code for it.

Nice line

              <hr />

Useful for chapter separations.

Bold text

              <b>Lorem Ipsum </b>

Lorem Ipsum

Table seems to be in bold ¯\_(ツ)_/¯

Italic

              <i>Lorem Ipsum </i>

Lorem Ipsum

Unordered bullet point

              <ul>
                <li>one </li>
                <li>two </li>
              <ul>
  • one
  • two

ul to start the list and li for each bullet points

        <a href="../final-project.html">Example link to page on this website </a>

Example link to page on this website

        <a href="https://www.w3schools.com/html/html_intro.asp" target="_blank">W3 HTML schools (open in new window) </a>

W3 HTML schools (open in new window)

Images

        <img src="../images/sample-photo.jpg" alt="Description of image" width="400" />

Description of image

Video

1st option

        <iframe src="https://player.vimeo.com/video/10048961" width="340" height="280" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe>

2nd option

<video controls width="340" height="280">
<source src="../../files/video/week02-animation.mp4" type="video/mp4">
</video>
Source & More Info: * https://www.w3schools.com/tags/tag_video.asp * https://github.com/squidfunk/mkdocs-material/discussions/3984

Embedding 3D Models

        <div class="sketchfab-embed-wrapper"> 
          <iframe width="340" height="280" src="https://sketchfab.com/models/658c8f8a2f3042c3ad7bdedd83f1c915/embed" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"> </iframe>
        </div>

See more info here

Click to Expand

This is dropdown.
You are inside HTML so don't forget to format like an HTML file!

MKDocs alternative.

Sources