Inspecting Live HTML | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

  • How to view HTML of live webpages
  • How to understand the HTML of sections you’ll see

Inspecting HTML

You can see the HTML of any webpage by using Inspector Tools in your browser (we recommend Chrome).

In Chrome, you can do one of the following to open Developer Tools:

  • Right click any element on the page & select ‘Inspect’
  • In the Chrome menu, select View > Developer > Developer Tools
  • Command+Option+I (Mac) or Control+Shift+I (PC)

Notice in the video above that the HTML of this webpage is collapsed into sections that can be expanded by clicking the arrows on the left. This makes for easier navigation in Inspector Tools.

Example HTML of a Simple Section

Let’s start with this section - a title, a paragraph, and a button.

Text Block with Buttons Module

Looking at just the Text Block with Buttons Module on our Restaurant Page Builder page, here’s the HTML we can derive from inspecting.

CopyCopied!
<div class="module-content"> <div class="container "> <div class="cta-container"> <h2 class="headline lp-param lp-param-headline"> Turtlehead Tacos </h2> <p class="paragraph lp-param lp-param-paragraph"> Hungry for Tacos? Fan of "Chips and Guac"? Turtlehead Tacos is the destination for you. With locations globally, we pride ourselves in providing our customers with the most delicious, fresh tacos daily. Visit us in Round Rock, TX today! </p> <a class=" btn primary-cta btn-primary btn-lg lp-param lp-param-cta1ButtonUrl lp-param-cta1ButtonText" href="" role="button " onclick="Yext.analyticsEvent('calltoactionclick')"> Order Now </a> </div> </div> </div>

Turtlehead Tacos

Hungry for Tacos? Fan of "Chips and Guac"? Turtlehead Tacos is the destination for you. With locations globally, we pride ourselves in providing our customers with the most delicious, fresh tacos daily. Visit us in Round Rock, TX today!

Order Now

You can see the unstyled version of the HTML here as well.

Again, we can see the following components:

  • Div elements to organize contents
  • An H2 defining the title of the section
  • A paragraph defining the content of the section
  • A link (styled as a button) for a call to action
unit Quiz
+20 points
Daily Quiz Streak Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success Question 1 of 2

    What does Chrome Developer Tools allow you to do? (Select all that apply)

    Error Success Question 2 of 2

    Inspect the title of the unit at the top of the page. What HTML element is it?

    Way to go, you passed! 🏁

    You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.
1st attempt
0 incorrect
Feedback