Important HTML Rules

Before we move on to adding our own elements within the body element, let's review a few important rules and concepts.

Opening and Closing Tags are Required

Unless the element is a self-closing tag, the element must have both a start and ending tag.

What's wrong with the HTML below?

<body>
    <h1>This is the title
        <p>Lorem ipsum dolor sit amet, consectetur 
        adipiscing elit, sed do eiusmod tempor incididunt 
        ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam</p>
</body>

HTML Elements are Nested

Notice how the elements are in a nested structure. Proper nesting is required for the HTML to be valid.

<ol>
  <li>Item 1</li>
  <li>
    Item 2
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ol>

What's wrong with the HTML below?

<body>
    <div>
        <p>This is a paragraph</div></p>
</body>

Browsers are Forgiving

While there are ways to enforce HTML code to follow the rules, browsers have always attempted to gracefully handle errors in HTML. The HTML that currently exists is full of such errors, so it is not possible to change this behavior.

It's up to you to carefully review your HTML to make sure the syntax is correct, otherwise you'll get unexpected results.

White-space in HTML is ignored

You can add as much white-space as you want within the text of an element, and it will be ignored.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore 
        magna aliqua. Ut enim ad minim veniam, quis nostrud 
        exercitation ullamco laboris nisi ut aliquip ex ea 
        
        a
        a
        as  b
        s fsd
         g sdfa g
        
        
        
        commodo consequat. Duis aute irure dolor in reprehenderit 
        in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, 
         sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>

Comments are Ignored

Anything that starts with <!-- and ends with --> will be completely ignored by the browser. This is useful for documenting your code and making notes to yourself, or for commenting out HTML that you are debugging.

<body>
    <!-- This will be ignored -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
        sed do eiusmod tempor</p>
    <!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
        sed do eiusmod tempor</p> -->  
</body>

User Agent Default Styles

User-agent styles refer to the default stylesheets a browser apply to web pages. Each browser defines their own default styles, but they do tend to be pretty standard.

Here is the default stylesheet that will be applied by the Chrome browser.

Source/core/css/html.css - chromium/blink - Git at Google

Your styles can override these defaults.

If you look at the user-agent stylesheet above, you will notice that quite a few elements have the CSS display property set to "display: block". This is because the default for all elements is for them to be "inline", but the expectation for how certain elements flow on the page is for them to have a block layout.

Element Flow: Inline vs Block

Every element on a web page is a rectangular box. By default, elements flow from top to bottom, but the CSS display property is used to determine how much horizontal and vertical space an element takes up.

  • Block elements: take up the entire line, unless they are empty.

  • Inline elements: take up width of their content only.

  • Inline block elements: like inline, except can specify width and height.

headings, paragraphs, lists are examples of block elements. images, links, spans are examples of inline elements

PreviousBoilerplate HTMLNextCommon HTML Elements

Last updated

Was this helpful?