Basic HTML | HTML Fundamentals

Question 1

What does the div element represent in HTML?

Answer 1

A flexible container that can be styled and used to group other elements together

The div can be given height, width, and background color using CSS.

Question 2

Write an example of a basic div element.

Answer 2

<div></div>

This is the simplest form of a div element.

Question 3

How can a div be utilized without styling?

Answer 3

To hold and group other elements together

For example, a heading and a paragraph can be placed inside a div.

Question 4

Provide an example of a div containing a heading and a paragraph.

Answer 4

<div><h1>I am a heading</h1><p>I am a paragraph</p></div>

This shows how elements can be grouped within a div.

Question 5

What is an alternative to using a div for grouping elements?

Answer 5

The section element

The section element has semantic meaning, unlike the div.

Question 6

What does semantic meaning refer to in HTML?

Answer 6

The meaning of elements that allows browsers to understand their purpose

For example, a section element indicates a thematic grouping.

Question 7

How does a browser treat a section element?

Answer 7

It recognizes its semantic meaning and understands it as a section

This applies across different devices like desktops and mobiles.

Question 8

True or False: The div element has semantic meaning.

Answer 8

False

The div is described as a ‘mysterious ghost’ without semantic significance.

Question 9

What does the id attribute do in HTML?

Answer 9

Adds a unique identifier to an HTML element

Question 10

How should id names be used in an HTML document?

Answer 10

They should not be used more than once and must always be unique

Question 11

What symbol is used to reference an id in CSS?

Answer 11

The hash symbol (#)

Question 12

What characters are allowed in id attribute values?

Answer 12

Letters, digits, underscores, and dashes

Question 13

True or False: id attribute values can contain spaces.

Answer 13

False

Question 14

What is the purpose of the class attribute in HTML?

Answer 14

To apply styles to multiple elements without needing uniqueness

Question 15

How can multiple class names be applied to a single HTML element?

Answer 15

By separating the names with a space

Question 16

What symbol is used to reference a class in CSS?

Answer 16

The dot symbol (.)

Question 17

When is it best to use an id versus a class?

Answer 17

Use id for specific elements and class for multiple elements

Question 18

Fill in the blank: The id attribute value cannot have _______.

Answer 18

spaces

Question 19

What happens if you use a space in an id attribute value?

Answer 19

Browsers will see the space as part of the id, causing issues

Question 20

What are the allowed characters for class attribute values?

Answer 20

Letters, digits, underscores, dashes, and spaces

Question 21

What is the effect of the following CSS rule: #title { color: red; }?

Answer 21

Changes the text color of the element with id ‘title’ to red

Question 22

What is the example HTML code for a div with a class called ‘box’?

Answer 22

<div></div>

Question 23

What does the following CSS rule do: .box { width: 200px; height: 200px; border: 2px solid black; }?

Answer 23

Sets width, height, and border properties for elements with class ‘box’

Question 24

What is an HTML entity?

Answer 24

A set of characters used to represent a reserved character in HTML.

Question 25

What happens when the HTML parser sees the less than (<) symbol followed by an HTML tag name?

Answer 25

It interprets that as an HTML element.

Question 26

How can you fix the issue of the HTML parser misinterpreting the less than symbol?

Answer 26

By using HTML entities.

Question 27

What is the correct HTML entity for the less than symbol?

Answer 27

<

Question 28

What is the correct HTML entity for the greater than symbol?

Answer 28

>

Question 29

What are named character references?

Answer 29

Character references that start with an ampersand sign (&) and end with a semicolon (;).

Question 30

What does the updated paragraph element look like when using named character references?

Answer 30

This is an <img /> element.

Question 31

What is a decimal numeric reference?

Answer 31

A character reference that starts with an ampersand sign and hash symbol (#), followed by one or more decimal digits, followed by a semicolon.

Question 32

What is the decimal numeric reference for the less than symbol?

Answer 32

<

Question 33

What is a hexadecimal numeric reference?

Answer 33

A character reference that starts with an ampersand sign, hash symbol, and the letter x, followed by one or more ASCII hex digits and ends with a semicolon.

Question 34

What is the hexadecimal numeric reference for the less than symbol?

Answer 34

<

Question 35

What are some common symbols that use HTML entities?

Answer 35

* Copyright symbol (©) * Quotes (" ) * Trademark symbol (™) * Ampersand sign (&)

Question 36

What is the purpose of the script element in HTML?

Answer 36

To embed executable code, primarily JavaScript

Question 37

What is JavaScript commonly used for in web development?

Answer 37

To add interactivity to web pages, such as interactive games, image sliders, and dynamic forms

Question 38

Fill in the blank: The script element is used to _______ executable code.

Answer 38

[embed]

Question 39

What does the src attribute in the script element specify?

Answer 39

The location of the external JavaScript file

Question 40

True or False: It is considered best practice to write all JavaScript code inside the script tags.

Answer 40

False

Question 41

What does 'src' stand for?

Answer 41

'source'

Question 42

What is the design principle that encourages separating JavaScript from HTML?

Answer 42

Separation of concerns

Question 43

Fill in the blank: The separation of concerns principle involves dividing programs into distinct sections that address separate _______.

Answer 43

[concerns]

Question 44

What happens when the page first loads in the example provided?

Answer 44

An alert pops up with the message 'Welcome to freeCodeCamp'

Question 45

What is a common user interaction with the alert in the example?

Answer 45

The user clicks the OK button to dismiss the message

Question 46

Why is it discouraged to place all JavaScript inside the HTML document?

Answer 46

To maintain separation of concerns

Question 47

What is an example of embedding JavaScript directly in an HTML document?

Question 48

Fill in the blank: The script element can be used to link to an _______ JavaScript file.

Answer 48

[external]

Question 49

What does SEO stand for?

Answer 49

Search Engine Optimization

Question 50

What is the purpose of the meta description element?

Answer 50

To provide a short description for the web page

Question 51

How does the meta description affect SEO?

Answer 51

It can improve visibility and potentially increase traffic, though it won't directly affect ranking

Question 52

What attribute is set to 'description' in the meta element?

Answer 52

name

Question 53

Where is the content of the meta description placed?

Answer 53

In the content attribute

Question 54

How should meta descriptions be structured?

Answer 54

Short and concise

Question 55

What happens to meta descriptions on search engine results pages?

Answer 55

They may be truncated based on the results page layout

Question 56

True or False: Meta descriptions are visible on the web page itself.

Answer 56

False

Question 57

Where can you find the page description in search engine results?

Answer 57

In the search engine results page snippet

Question 58

What is one potential benefit of having a strong meta description?

Answer 58

Increased traffic to your website

Question 59

Fill in the blank: The meta description will not directly affect a site's ______.

Answer 59

ranking

Question 60

Provide an example of a meta description for a gardening site.

Answer 60

Discover expert tips and techniques for gardening in small spaces, choosing the right plants, and maintaining a thriving garden.

Question 61

How does a user benefit from reading a meta description in search results?

Answer 61

They can quickly get a general sense of what the page is about

Question 62

What is the role of the open graph tag?

Answer 62

The open graph protocol enables you to control how your website's content appears across various social media platforms.

Question 63

How do open graph properties affect user engagement?

Answer 63

By setting these properties, you can entice users to want to click and engage with your content.

Question 64

Where are open graph properties set in a website's HTML?

Answer 64

Inside the HTML head section through a collection of meta elements.

Question 65

What is the first important OG property to include?

Answer 65

The title.

Question 66

Provide an example of setting the OG title.

Question 67

What is the second important OG property?

Answer 67

The type.

Question 68

Provide an example of using the OG type.

Question 69

What does the type property represent?

Answer 69

The type of content being shared on social media.

Question 70

What is the third important OG property?

Answer 70

The image.

Question 71

Provide an example of setting the OG image.

Question 72

What should be considered for the open graph image?

Answer 72

Images should be high quality with good dimensions and ratios.

Question 73

What are the recommended image dimensions for best display on high-resolution devices?

Answer 73

At least 1200 by 630 pixels.

Question 74

What is the fourth important OG property?

Answer 74

The url.

Question 75

Provide an example of setting the OG url.

Question 76

What are some other OG properties that can be set?

Answer 76

* description * audio * video * locale

Question 77

How do open graph properties affect Search Engine Optimization?

Answer 77

Well-crafted OG properties can enhance the appearance for your content in users' feeds.

Question 78

What can higher click-through rates signal to search engines?

Answer 78

That your content is relevant and engaging.