QM Technical Training - Developer Tools
Created by Alex Avila
What is the body element?
The <body> tag defines the main content of an HTML document that is intended to be visible to the user.
It serves as the parent container for almost everything you see on a screen—
Headings
Paragraphs
Images
Hyperlinks
tables,
and lists.
From a structural standpoint, there is only one <body> per HTML document, and it follows immediately after the <head> tag.
| Term | Definition |
|---|---|
What is the body element? | The <body> tag defines the main content of an HTML document that is intended to be visible to the user.
It serves as the parent container for almost everything you see on a screen—
Headings
Paragraphs
Images
Hyperlinks
tables,
and lists.
From a structural standpoint, there is only one <body> per HTML document, and it follows immediately after the <head> tag. |
Can an HTML document can contain multiple <body> tags?
| False. There is only one <body> per document. If multiple exist, the browser may ignore them or merge them, causing QM capture issues. |
What is the head element? | The <head> tag is a container for metadata.
It is placed between the <html> tag and the <body> tag.
It houses critical information such as the page title, character encoding (UTF-8), links to CSS stylesheets, and—most importantly for us—the scripts that power external tools like Quantum Metric. |
What common tag inside the <head> is used by QM to name pages in the platform? | The <title> tag. |
Why is the "order" of scripts in the <head> important for QM? | If QM is placed after other heavy scripts, it might miss early-page events or "First Input" interactions. |
Where is QM traditionally located on the page? | Traditionally, it is placed at the very top of the <head> element of an HTML document. The physical execution needs to happen as early as possible in the browser's loading sequence. |
Why is it placed in the <head> rather than the <body>? | capturing data before the visible content (the body) even begins to render. |
What does "Asynchronous loading" mean for the QM tag? | It means the script loads in the background and does not block the rest of the page from appearing to the user. |
What is the primary benefit of an async script? | It prevents the script from blocking the page from loading. |
What is the main attribute that tells you if a <link> sheet is calling CSS? | The rel attribute specifies the relationship between the current document and the linked resource.
For CSS, the value must be set to stylesheet. Without this specific attribute and value, the browser will not treat the linked file as CSS, and the webpage will appear as plain, unformatted text. |
What does the rel in rel="stylesheet" stand for? | Relationship. |
Where is the <link rel="stylesheet"> tag traditionally located? | Inside the <head> element. |
What does rel="stylesheet" do? | It’s like a label on a box telling the browser, "This box contains the instructions for the page's design." |
What is the integrity attribute for <script> tags and why is it important? | When the browser downloads the script, it calculates its own fingerprint and compares it to the one in the integrity attribute. If they don't match exactly, the browser refuses to run the script. |
What does the attribute "crossorigin = anonymous" due in the context of QM? | When a website loads a script from a different domain the browser treats it as a cross-origin request.
Setting this attribute to "anonymous" tells the browser: "Fetch this script without sending any of the user's private cookies or credentials, but do allow me to see the full details of any errors the script produces."
|
What does "cross-origin" mean? | Loading a resource (like a script) from a different domain than the one the user is visiting. |
What does the anonymous value specifically tell the browser not to send? | User credentials (like cookies or HTTP authentication). |
Where are attributes always located in an HTML tag? | located in an HTML tag? Inside the opening tag (e.g., <div [attribute]>). |
What are the two most common attributes used for styling and identification? | class and id. |
What is the difference between an id and a class? | An id is meant to be unique to one element;
a class can be used on many elements. |
what selector is used for ID? | ID Selector (#):
Used to target a single, unique element.
In code, it looks like id="header". In a selector, it is written as #header. |
what selector is used for class? | Class Selector (.):
Used to target one or many elements that share the same style or behavior.
In code, it looks like class="btn-primary". In a selector, it is written as .btn-primary. |
what is the src Attribute? | The src (source) attribute is the address for an image. The src tells the browser exactly where to find the image file (e.g., src="logo.png").
Without this attribute, the <img> tag is just an empty frame with nothing to show. |
What happens if the src URL is broken? | The browser displays a "broken image" icon or the text in the alt attribute. |
If you delete an image from your website’s server, what happens to old QM replays? | The images in those old replays will break |