HTML Resources
      Back to home
      1. Help Center
      2. Coding Resources
      3. HTML Resources

      HTML Reference Guide

      When you need a little extra help with HTML, this article is a great resource!

      Last updated - July 23, 2024

      HTML tells the computer what to display and how to display it on a website. HTML code can be very long and detailed, so it is important to make sure it is working as you build your code. Be sure to check that everything is spelled correctly and proper syntax and spacing are being used.

      HTML Tags 

      HTML uses tags to create different elements that are displayed or used on a webpage. HTML elements should include both opening <> and closing </> tags. Remember, for your code to work it must have correctly spelled opening and closing tags.

      <html></html>

      All HTML code must be nested between these tags.

      <head></head>

      The head tag should be the first tag within your HTML tag. It contains information that is not seen on the webpage.

      <title></title>

      The title tag is nested in the head tag. This code puts the name of the website in the browser toolbar.

      <body></body>

      The body tag should include all of the content you want to display on your website.

      <h1></h1>

      Heading tags represent the title of a section or a page on a website. There are six different heading elements in HTML; h1 creates the biggest font size and h6 creates the smallest font size.

      <p></p>

      Paragraph tags add body text to a page. They are often placed below a heading.

      <style></style>

      Style tags add attributes to HTML, such as color, font, and size.  Example:<h1 style="font-family:cursive; color:green">It's Code Night!</h1>

      <a></a>

      Anchor tags link to an internal document or external site using the href attribute. Adding target="_blank" will open the link in a new tab. Example: <a href="https://www.youtube.com/" target="_blank">Visit YouTube</a>

      <img>

      Image tags are used to display images on your website and must include the src attribute. Remember that no closing tag is needed. Example:

      <img src="image.jpg">

      <ol></ol>

      The ordered list tag creates a list using numbers.

      <ul></ul>

      The unordered list tag creates a list using bullet points.

      <li></li>

      Use list tags within <ol> or <ul> tags to list your items.

      <br>

      Break tags create a line break with a space. No closing tag is needed.

      <hr>

      Horizontal rule tags create a break with a line. No closing tag is needed.

      HTML Structure

      Structure is important in HTML.

      <!DOCTYPE>
          <html>
              <head>
                  <title>Title goes here</title>
                  <link rel="stylesheet">
                  <style></style>
              </head>
              <body>
                  <h1>First Heading</h1>
                  <p>Paragraph goes here.</p>
                  <img src=""> 
               </body>

          </html>

      Style Attributes

      You can customize the appearance of content on your site by adding a style attribute to an HTML tag. Attributes are lines added inside a tag, after the tag name. They control the tag’s behavior and appearance on the page. All style attributes should be separated by semi-colons ; .

      color:

      Changes the text color of the tag.

      background-color:

      Changes the background color of the tag.

      font-family:

      Changes the font of the text in the tag.

      font-size:

      Changes the size of the font in the tag.

      text-align:

      Aligns text to left, center, or right. (Left align is the default.)

       

      Example: Ex. <h1 style="color:blue; font-family:cursive;">Hello world!</h1>

      Troubleshooting your code:

      • Did you remember to put opening and closing tags? Be sure that your closing tags include a backslash.
      • Do your opening and closing tags match? If your opening tag is <h1> your closing tag should be </h1>. If your opening tag is <p> your closing tag should be </p>.
      • Is your syntax correct?
        • Make sure you have included both opening and closing tags.
        • Check for the placement of colons(:), semi-colons(;), and hyphens(-).
        • Check your spelling.
        • Check your spacing.
      • Check and double-check your code!
        • HTML code can be long and detailed. It is easy to overlook a small mistake or typo! To prevent having to search through a very long file for typos try to check for mistakes and make sure your code works often while you build your website.
      • Read the lesson and requirements again.
        • If you are having trouble it can help to read the lesson and requirements again. Make sure you understand the lesson and make sure your code includes all of the requirements that the challenge or checkpoint asks for. Sometimes, the auto-grader can be picky and wants your code to include the same words, spacing, and punctuation as the requirements or example.