Get started with HTML and the DOM

This is the first in a series of tutorials that teach you the basics of web development. Learn about a set of web developer tools, named Microsoft Edge DevTools, that will increase your productivity.

This tutorial describes HTML and the Document Object Model (DOM). HTML is one of the core technologies of web development. It is the language that controls the structure and content of webpages. The DOM is also related to the structure and content of webpages, which we learn more about later.

Goals

You're going to learn web development by building a website. By the time you complete all of the tutorials in the DevTools for Beginners series, your finished site will look like the following figure.

The finished site.

By the end of this tutorial, you'll understand the following concepts:

  • How HTML and the DOM create the content displayed on webpages.
  • How Microsoft Edge DevTools can help you experiment with HTML and DOM changes.
  • The difference between HTML and the DOM.

You'll also have a working website. You can use the site to host your resume or blog.

Prerequisites

Before doing this tutorial:

  • If you are unfamiliar with HTML, read Getting Started with HTML.

  • Download the Microsoft Edge web browser. This tutorial uses a set of web development tools, called the Microsoft Edge DevTools, that are built into Microsoft Edge.

Set up your code

You'll build a site in the Glitch online code editor.

  1. Open the source code. This tab is called the editor tab throughout this tutorial.

    The editor tab.

  2. Select alluring-shock. The Project Options menu opens.

    The Project Options menu.

  3. Select Remix Project. Glitch creates a copy of the project that you can edit and randomly generates a new name for the project. The content is the same as before.

    The remixed project.

  4. If you plan to complete the next tutorial in this series, select Sign In to Glitch using your Facebook, GitHub, or Google account; or email yourself a magic link. If you don't sign in to an account, you can't edit the project after closing the editor tab.

  5. Select Show > In a New Window. A new tab opens, showing the live page. This tab is called the live tab throughout this tutorial.

    The live tab.

Add content

Your site needs more information. To add some content:

  1. In the editor tab, replace <!-- You're "About Me" will go here. --> with <h1>About Me</h1>.

    <body>
      <p> Your site!</p>
            <main>
               <h1>About Me</h1>
            </main>
    

    The new code is highlighted in the editor tab.

  2. View your changes in the live tab. The text About Me is visible on the page. The text is larger than the surrounding text because the <h1> element represents a Heading 1. Your web browser automatically styles headings in larger font sizes.

    The new heading is visible in the live tab.

  3. Back in the editor tab, insert <p>I am learning web development. Recent accomplishments:</p> on the line below <h1>About Me</h1>.

    <body>
      <p> Your site!</p>
            <main>
               <h1>About Me</h1>
               <p>I am learning web development. Recent accomplishments:</p>
            </main>
    

    The updated code is highlighted in the editor tab.

  4. View your change in the live tab.

  5. Back in the editor tab, add a list of your accomplishments using the following code.

    <p>I am learning web development.  Recent accomplishments:</p>
       <ul>
          <li>Learned how to set up my code in Glitch.</li>
          <li>Added content to my HTML.</li>
          <li>TODO: Learn how to use Microsoft Edge DevTools to experiment with content changes.</li>
          <li>TODO: Learn the difference between HTML and the DOM.</li>
       </ul>
    

    The updated code is also highlighted in the editor tab.

  6. View the live tab to make sure that the new content is displayed correctly.

    The new list is visible in the live tab.

Experiment with content changes in Microsoft Edge DevTools

If you are developing a page with a lot of HTML, it becomes tedious to go back-and-forth between the editor tab and the live tab to see your changes. Microsoft Edge DevTools helps you experiment with content changes without ever leaving the live tab.

Learn the difference between HTML and the DOM

Before editing content from Microsoft Edge DevTools, let's understand the difference between HTML and the DOM. Proceed with the following steps to learn from an example.

  1. Navigate to the live tab. At the bottom of your page, the text A new element!?! is displayed.

  2. Open the editor tab and try to find the text in index.html. The text doesn't appear in this view.

  3. Open the live tab, right-click A new element!?!, and then select Inspect.

    Inspecting some text.

    DevTools opens alongside your page. <div>A new element!?!</div> is highlighted. Although this structure in DevTools looks like HTML, it's actually the DOM Tree.

    DevTools is open alongside the page.

When your page loads, the browser uses the HTML to create the initial content of the page. The DOM represents the current content of the page, which can change over time.

The <div>A new element!?!</div> content is added to your page because of the <script src="new.js"></script> tag at the bottom of your HTML. This tag causes some JavaScript code to run. Learn more about JavaScript in a later tutorial.

For now, think of it as a scripting language that can change the content of your page. In this case, JavaScript code adds <div>A new element!?!</div> to your page. That is why this text is displayed in the live tab, but not in the HTML.

Edit the DOM

To quickly experiment with content changes without leaving the live tab:

  1. In DevTools, right-click Your site!, and then select Edit as HTML.

  2. Replace <p>Your site!</p> with the following code.

    <header>
       <p><b>Welcome to my site!</b></p>
       <button>Download my resume</button>
    </header>
    

    Updating the node as HTML.

  3. Press Ctrl+Enter (Windows, Linux) or Command+Enter (macOS) to save your changes, or select outside the box. Your changes automatically show up in the live view of your page. The text Your site! has been replaced with the new content.

    The new content shows up immediately on the page.

This workflow is only suitable for experimenting with content changes. If you refresh the page or close the tab, your changes are lost. If you want to save your changes, manually copy the code to your HTML file. The next couple of sections show you some more ways to change content from the DOM Tree.

Reorder nodes

You can also change the order of DOM nodes. For example, on your web page the navigation menu is near the bottom.

Move the navigation menu to the top:

  1. Find the <nav> node in the DOM Tree of DevTools.

    The nav node is highlighted in DevTools.

  2. Drag the <nav> node to the top, so that the node is the first child after the <body> node.

    The nav node is at the top of the page.

Delete a node

Remove a node from the DOM Tree:

  1. In the DOM Tree, select <div>A new element!?!</div>. DevTools highlights the node.

  2. Press Delete. The <div>A new element!?!</div> node is removed from the DOM Tree.

    The node has been deleted.

Copy your changes

You're almost done. You made a few changes to the page in DevTools, but they're not saved to your source code.

  1. Refresh the live tab. The changes that you made in the DOM Tree disappear. In particular, the text Your site! returns to the top of the page, and the text A new element!?! returns to the bottom.

    The changes that you made are gone.

  2. Copy the following code:

    <!DOCTYPE html>
    <html lang="en">
       <head>
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1">
       </head>
       <body>
          <header>
                <p>Welcome to my site!</p>
          </header>
          <nav>
                <ul>
                   <li><a href="/">Home</a></li>
                   <li><a href="/contact.html">Contact</a></li>
                </ul>
          </nav>
          <main>
                <h1>About Me</h1>
                <p>I am learning web development.  Recent accomplishments:</p>
                <ul>
                   <li>Learned how to set up my code in Glitch.</li>
                   <li>Added content to my HTML.</li>
                   <li>Learned how to use Microsoft Edge DevTools to experiment with content changes.</li>
                   <li>Learned the difference between HTML and the DOM.</li>
                </ul>
          </main>
       </body>
    </html>
    
  3. Go back to the editor tab and replace the content of your index.html file with the code that you copied.

    How your index.html file should look.

Next steps

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License. The original page was found at https://developers.google.com/web/tools/chrome-devtools/beginners/html and was authored by Katherine Jackson (Technical Writer Intern, Chrome DevTools).

Creative Commons License. This work is licensed under a Creative Commons Attribution 4.0 International License.