DevTools for beginners: 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 may increase your productivity.

In this particular tutorial, you learn about HTML and the 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, learn more about that later.

Goals

You are going to learn web development by actually building your own website. By the time you complete all of the tutorials in the DevTools for Beginners series, your finished site may look like the following figure.

The finished site

By the end of this tutorial, you should understand the following topics.

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

You also have a real website. You may use the site to host your resume or blog.

Prerequisites

Before attempting this tutorial, complete the following prerequisites:

  • 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 are going to build your site in an online code editor called Glitch.

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

    The editor tab

  2. Choose alluring-shock. The Project Options menu opens in the top-left corner.

    The Project Options menu

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

    The remixed project

  4. If you plan on completing the next tutorial in this series, choose Sign In and sign into Glitch with your GitHub or Facebook account. If you choose to not sign into your account, you lose the ability to edit the project after you close the editing tab.

  5. Choose Show and choose In a New Window. A new tab opens, showing you the live page. This tab is called the live tab throughout this tutorial.

    The live tab

Add content

Your site is pretty empty. Follow the steps below to add some content to it.

  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>
    ...
    ...
    ...
    
  2. View your changes in the live tab. The text About Me is visible on the page. The text larger than the surrounding text, because the <h1> element represents a section heading. 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 HTML. Recent accomplishments:</p> on the line below where you just put <h1>About Me</h1>.

    ...
    ...
    <body>
    <p> Your site!</p>
    <main>
    <h1>About Me</h1>
    <p>I am learning web development.  Recent accomplishments:</p>
    </main>
    ...
    ...
    ...
    
  4. View your change in the live tab.

  5. Back in the editor tab, add a list of your accomplishments:

    ...
    ...
    ...
    <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>
    ...
    ...
    ...
    
  6. Again, go back to the live tab to make sure that the new content is displaying correctly.

    The new list is visible in the live tab

Experiment with content changes in Microsoft Edge DevTools

If you were developing a big page with a lot of HTML, it is somewhat tedious to go back-and-forth between the editor tab and the live tab hundreds of times in order to display your changes, especially if you are unsure what exactly to put on the page. Microsoft Edge DevTools helps you experiment with content changes without ever leaving the live tab.

Learn the difference between HTML and the DOM

Before you start editing your content from Microsoft Edge DevTools, you should understand the difference between HTML and the DOM. The best way to learn is by example:

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

    At the bottom of the page the text A new element!?! is displayed

  2. Go back to the editor tab and try to find the text in index.html. The text is not there.

    The mystery text A new element!?! is nowhere to be found in index.html

  3. Go back to the live tab, hover on A new element!?!, open the contextual menu (right-click), and choose Inspect.

    Inspecting some text

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

    DevTools is open alongside the page

When your page loads, the browser takes your HTML to create the initial content of the page. The DOM represents the current content of the page, which may change over time. The mysterious <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, but for now think of it as a programming language that may change the content of your page. In this particular case, JavaScript code adds <div>A new element!?!</div> to your page. That is why this mystery text is visible on your live page, but not in your HTML.

Edit the DOM

If you want to quickly experiment with content changes without ever leaving the live tab, try DevTools.

  1. In DevTools, hover on Your site!, open the contextual menu (right-click), and choose Edit as HTML.

    Editing the node as HTML

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

    ...
    ...
    ...
    <header>
    <p><b>Welcome to my site!</b></p>
    <button>Download my resume</button>
    </header>
    ...
    ...
    ...
    
  3. Select Control+Enter (Windows, Linux) or Command+Enter (macOS) to save your changes, or choose outside of 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 good for experimenting with content changes. If you refresh the page or close the tab, your changes are gone forever. If you're using this workflow and you want to save your changes, you need to manually copy those changes over to your HTML. The next couple of sections show you some more ways that you may change content from the DOM Tree.

Reorder nodes

You may also change the order of DOM nodes. For example, on your web page the navigation menu is near the bottom. To move it to the top:

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

    The nav node is highlighted blue in DevTools

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

     

    The <nav> node is now displaying at the top of your page.

Delete a node

You may also remove nodes from the DOM Tree.

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

    Choose the node to be deleted

  2. Select the Delete key on your keyboard. The <div>A new element!?!</div> node is removed from your DOM Tree.

    The node has been deleted

Copy your changes

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

  1. Refresh your 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've made are gone

  2. Copy the code below.

    <!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 contents of your index.html file with the code that you just copied.

    How your index.html file should look

Next steps

Getting in touch with the Microsoft Edge DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet at @EdgeDevTools.
  • Submit a suggestion to The Web We Want.
  • To file bugs about this article, use the following Feedback section.

The Send Feedback icon in the Microsoft Edge DevTools

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 here 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.