Common Problems Week 1-3


It’s important to indent properly so that you make less mistakes when structuring you HTML. It easy easier to read your code when it is indented properly, and can help avoid issues where bad markup is actually causing the layout of your page to break. 

→ Use an HTML formatter tool to help with indentation

Proper HTML structure and closing tags

→ Use a validator to check your HTML structure

Make sure to close your <html> and <body> tags. The last thing in your html documents should always be a </html> tag. A basic HTML document looks like this:

<!DOCTYPE html>
  <meta charset="UTF-8">
  <title>Title of my page</title>
  <link rel="stylesheet" href="style.css">
  <!-- Your code goes in between the body tag -->

Lists and nested lists

When you use lists in your HTML, make sure to nest <ul> and <li> tags properly. The only element that is valid inside a <ul> tag is an <li> tag. Notice in the example below that the nested list is inside another <ul> tag. 

  <li>Item 1</li>
  <li>Item 2
      <li>Nested item 1</li>
      <li>Nested item 2</li>
  <li>Item 3</li>

Absolute vs relative links

When using a relative link back to your repository’s homepage, it should look something like this.
Relative link: <a href="../../index.html">My home page</a>

Absolute link: <a href="">My home page</a>

Absolute link to a file on your local computer. This will not work when you push the files to GitHub. Use relative links whenever possible. 
<a href="file:///Users/dylanfisher/projects/">

Using spaces in file names

Don’t use spaces in file names. Get into the habit of never using spaces in file names. Instead, use a dash or underscore in place of the space.