What is HTML?

HTML (short for Hypertext Markup Language) is what web designers use to mark up and describe the parts on a web page so that your browser can read the website correctly.

Note: This is a summary of what I learned from the HTML section of the Skillcrush 101 course.


How do you write HTML?

HTML is made up of tags that are used to describe the different parts of a web page. Once you understand HTML tags, you can use them to build a web page!

Summary of MITs (Most Important Tags)

Note: Metatag means data about data. These are tags that contain information that isn’t actually seen by the user. The content within these tags is used by the browser to help it read the html document.

Must-haves (meaning you need them on your site for the web browser to have any idea of what it’s looking at)
  • <!doctype html>     Metatag
    Tells the browser what type of document it’s reading.

  • <html> </html>      Metatag
    Denotes the HTML portion of the document.

  • <head> </head>      Metatag 
    Denotes the head area of your site. This is where you’ll find things like:
    • <title> </title>      Metatag        (also a must-have!)
      This is what shows up on the tab on the browser bar

    • Other Metatags
      • <script> </script>     Metatag
        Contains the link to the JavaScript file(s) used on the site. 
      • <link />     Metatag
        Links to stylesheets (which contain the CSS that the site uses)

  • <body> </body>      Metatag
    Denotes the body area of the document. This is where your content will reside, and it will be visible to the user.
Structural tags – not must-have (but they definitely are if you want your site to look beautiful).
  • <div> </div>
    Used to divide up different parts of your website. This tag is especially useful for CSS design.

  • <header> </header>
    Used for site headers and navigation.
    • <nav> </nav>
      Used for site navigation, typically with unordered list items (see next)

  • <ul> </ul> and <ol> </ol>
    Denotes an unordered list (ul) or an ordered list (ol).
    • <li> </li>
      Denotes a list item. If the list items are nested within <ul> </ul> tags, they will be bullets (like the list you’re currently reading). If the list items are nested within <ol> </ol> tags, they will be numbered (AKA “ordered”).

  • <section> </section>
    Denotes major sections of your site.

  • <article> </article>
    Used for complete blocks of content such as blog posts or news articles.

  • <aside> </aside>
    Used to – you guessed it! – set content aside. This tag is usually used for sidebars.

  • <footer> </footer>
    Indicates the footer of the site. You’ll usually find copyright information and social media links here.
Text tags – used to make your text look different.
  • <p> </p>
    Denotes a paragraph

  • <h1> </h1>
    Biggest header

  • <h2> </h2>
    Second biggest header

  • <h3> </h3>
    Third… okay, you get the idea. Goes all the way down to <h6> </h6>

  • <strong> </strong>
    Makes text bold.

  • <em> </em>
    Makes text italic.

  • <br>
    Used to create a break between two parts of text.
Content tags – used to bring in content from outside sources
  • <img>
    Used to add images to your site.

  • <iframe>
    Allows you to embed another document (like a YouTube video or Google map) into your site.

  • <a> </a>
    Adds links to other pages.

  • <span> </span>
    Gives you a way to group content on your site.

Summary

HTML tags are really all you need to know in order to write HTML code! If you get familiar with these tags and how to use them, you can create a basic website.

Want to make your website’s text pretty? Check out my post on CSS.