HTML in Depth INTRODUCTION

KNOWLEDGE CHECK: PRACTICE USING SEMANTIC TAGS

1. What is the purpose of Semantic HTML tags?

2. What is the impact of using semantic tags in your HTML document? Select all that apply.

3. What type of content is the <article> semantic HTML element appropriate for? Select all that apply.

4. Which of the following elements is most suitable for describing the navigation section of a webpage?

5. You need to add a copyright notice to the bottom of a web page. Which of the following semantic tags is most suitable to use?

6. You need to indicate that a section of text in a <p> element is important. Which of the following semantic tags should you use?

7. You need to display a list of descriptions on a web page. Which of the following tags are best-suited semantically?

KNOWLEDGE CHECK: METADATA

1. What are some of the main characteristics of meta tags? Select all that apply.  

2. What are some of the most important Meta tags you should use for good SEO? Select all that apply.  

3. Which meta tag is used to specify the character encoding for the HTML document? 

4. Which meta tag and properties do you need to set to make your pages responsive in desktop and mobile viewports? 

5. How do you tell Google you don’t want to provide an automatic translation for your page if the user uses a different language?  

6. Which of the following statements are true about HTTP-equiv tags? Select all that apply.  

KNOWLEDGE CHECK: OPEN GRAPH PROTOCOL

1. How does the Open Graph Protocol (OGP) name the meta tags?

2. Each property in the Open Graph Protocol starts with ‘ogp:’

3. Which property should be used to define a URL of an image that must display when the website is shared on social media?

4. Which property is used to define the language of the content being shared?

5. The type property defines the type of the content. For example:

<meta property="og:type" content="website" />

Which property would mention the name of the website?

6. When sharing your blog post, which property would you use to provide the link to the actual post?

KNOWLEDGE CHECK: SEMANTIC AND META TAGS

1. When setting up viewport metadata for mobile experiences, the ideal suggested value for ‘initial-scale’ is:

2. True or false. The viewport metadata can impact Search Engines rankings.

3. Which of the following meta tags are used for Search Engine Optimization? Select all that apply.

4. Which of the following are the required properties while making social media cards using OGP? Select all that apply.

5. Which of the elements below semantically divides your article content into parts that cover a specific topic?

6. When defining a social media card, how would you define the title?

7. True or false. More than one header element can exist in an HTML document?

8. When required to define a page refresh, which attribute value in <meta> must be set? Select all that apply.

SELF REVIEW: CREATE AND TEST A FORM

1. When the input fields contained no text and you clicked the Log In button, what was the result?

2. When the input fields contained a single text character and you clicked the Log In button, what was the result? Select all that apply.

3. When the username field contained the text “admin” and the password field contained the text “password”, what was the result when you clicked the Log In button?

KNOWLEDGE CHECK: DECLARING FORM ELEMENTS

1. You are building a calendar web application; which of the following input types can be used? Select all that apply.

2. You want to define a dropdown of selectable options. However, you also want users to be able to input their responses as well. Which of the following is the most suitable form element to wrap available options?

3. For the following code block, what is the most suitable input type that will ensure that only a single option is selected?

<form>
   <input type="----" id="alpha" name="letters" value="Alpha">
   <label for="html">Alpha</label><br>
   <input type="----" id="beta" name="letters" value="Beta">
   <label for="css">Beta</label><br>
   <input type="----" id="gamma" name="letters" value="Gamma">
   <label for="javascript">Gamma</label>
</form>

4. When defining a form, which element is almost always defined?

5. True or false. The following form element will clear the form validation errors.

<input type="reset">

6. A developer has added the following input element to a HTML form. What client-side validation is applied? Select all that apply.

<input type="email" required minlength="4">

KNOWLEDGE CHECK: FORM SUBMISSION

1. Which form attribute is used to specify the address to which the form data will be submitted to?    

2. Which HTTP method will be used to send data for the following form?

<form>
      <button type="submit">Submit</button>
</form>

3. When using the HTTP POST method to submit form data, how is the data transmitted to the server?

4. Your web browser is currently at the address https://meta.com/profile. When the following form is submitted, what address will it submit to?

<form>
      <button type="submit">Submit</button>
</form>

5. Your web browser is currently at the address https://meta.com/profile. When the following form is submitted, what address will it submit to?

<form action="/login">
       <button type="submit">Submit</button>
</form>

6. Your web browser is currently at the address https://meta.com/profile. When the following form is submitted, what address will it submit to?

<form action="login">
       <button type="submit">Submit</button>
</form>

7. The HTTP DELETE method can be used for form submission.   

8. There are several ways to secure transmitting form data to the web server. Which of the following will help secure the data? Select all that apply.

SELF-REVIEW: CREATE A COMPLEX FORM     

1. What attribute did you apply to the number of people field to set the minimum value?     

2. When you clicked the date of booking field, what was the result?     

3. When you typed the word hello into the email address field and submitted the form, what was the result?     

KNOWLEDGE CHECK: USER INPUT AND FORMS

1. When the user clicks the submit button of the following form, what will happen? Select all that apply.

<form method="POST">
   <input type="text" name="username">
   <input type="password" name="password">
   <button type="submit">Log In</button>
</form>

2. What attribute should be added to the <input> element to ensure the user provides a response?

3. What is the risk of using the HTTP GET method for form submission? Check all that apply.

4. Which of the following is a framework that provides CSS rules for forms and visual consistency? Check all that apply.

5. The web browser sends a ____ to the web server, and the web server sends back a ____.​ This is done by means of the HTTP ____ method which accepts values as part of the URL or the HTTP ____ method which submits the values in our form as part of the request.

Fill in the blank with the correct order from the options below:

A. GET

B. POST

C. Request

D. Response

6. Which of the following values can fill the blank?

The form action attribute consists of _____ as values. Select all that apply.

SELF REVIEW: RATE THE MEDIA

1. When you clicked the play button on the video, what was the result?

2. You used the range type for the ratings input field. How did you define its possible values? Select all that apply.  

3. Which element specified which video file to be played?  

KNOWLEDGE CHECK: MEDIA ELEMENTS

1. Each square block in a table is called a:

2. What attribute can you add inside an audio tag to enable player controls such as the pause and volume buttons?

3. While using the canvas element from the HTML file inside your JavaScript file, you pass the value of the id attribute of the canvas to the document.getDocumentById() function in your JavaScript code.   

4. Which of the following attributes can you add to an iFrame to improve the security of the web page where the iFrame is added? Choose all that apply.

5. GIF, 2D Canvas and WebGL are types of authoring tools.

6. .mp4 is a type of

Coursera Meta Front-End Developer Professional Certificate Answers and Study Guide

Weekly Breakdown | Meta Study Guides | Back to Top

MODULE QUIZ: HTML DEEP DIVE

1. You are including a blog post on your web page. You decide to place the content inside an <article> tag. What are the advantages of using an <article> tag instead of a <div> tag in the scenario? Select all that apply.

2. Which of the following meta tags are recommended for modern web pages? Select all that apply.

3. What are the benefits of using the Open Graph Protocol? Select all that apply.

4. You are tasked with building a login form for a website. The project manager has asked what type of validation you recommend implementing for both security and a good user experience: client-side validation or server-side validation. Which do you recommend?

5. You’ve added a form element to your HTML document and set the value of the method attribute to POST. What is the other valid HTTP method for form submission?

6. Your web browser is currently at the URLhttps://meta.com/hello

What address will the following form submit to?

<form action=”/login”>

7. You are creating a landing page for a local business that includes a video player. The specification is that the video automatically plays, can’t be paused and it loops. What are the correct statements for this implementation? Select all that apply.

8. You’ve been asked to embed another web page within your web page using an iframe. Which of the following tasks should be done to maintain security?

9. Which of the following are possible using the canvas HTML element?

10. Which tag is most suited to describe the navigation menu of your web page?

11. What is the benefit of adding the required attribute to an input element?

12. Which of the below statements are best practices when adding iframes to your pages? Select all that apply.

13. What are the main advantages of using the canvas element to draw content on your pages? Select all that apply.

14. Which of the following HTTP methods can be used to submit a HTML form? Select all that apply.

15. The combination of HTML and CSS has meant that web browsing can be done on a variety of devices and not just computers and phones. Which of the following statements about CSS are true? Select all that apply.   

16. HTML is foundational to websites and there is a lot that you can do with it. Which of the following are you able to do with HTML? Check all that apply.     

17. Semantic tags describe the meaning of a web page and they help search engines and accessibility software like screen readers  to understand the contents of a page. Which of the following statements are true? Choose all that apply. 

18. Is the following statement true or false? If you want to create an unordered list you should use the li tag.

19. You want to improve the SEO of a website. What metadata should you add to the head element of the website and why? Check all that apply.    

20. When adding a new CSS and a new JavaScript file to the template web page, what needs to be done? Check all that apply.     

21. Frontend developers use the Open Graph Protocol to improve the user experience of shared links because it helps social media platforms create a preview of the shared web page.      

22. As part of your role as a developer you’ve been asked to prepare a web page so it can be linked on social media platforms.  Which of the following statements are true? Choose all that apply.     

23. As a developer, you can add client-side validation to a form by using specific input types.       

24. You are asked to help create a signup form. What can you do to improve the user experience of the form? Select all that apply.

25. What additional attributes can you add to an element on an HTML form to improve client-side validation? Check all that apply.     

26. What is the purpose of the fieldset element in an HTML form?     

27. If you must add a question on a form where users need to pick an option from a very long list, you can add a datalist input type which will allow the user to begin typing to narrow down the available options based on their input. 

28. You’ve been asked to help develop a new online store. Security is very important to the customer. Which form method should be used to improve security?     

29. What are the advantages of styling HTML forms with CSS? Check all that apply.     

30. Video and audio tags make it easy to add videos and audio to web pages. Is the following statement true or false? 

You have to add both source and type attributes to both video and audio tags.     

31. You are creating an about page for a local business that includes an audio player. What are the elements and attributes needed for the audio player? Choose all that apply.     

32. You are a developer at the Little Lemon Tree company and your team leader has asked you to embed a map in the web page you are developing. You have learned that there are various important security issues when using iframes. Select the ways that these issues can be addresed. Check all that apply.     

33. A small business is planning to embed advertisements on their website and you have to create an iframe to set up an image on their website. However, there are some security concerns when it comes to embedded content. What can you do to minimize those concerns? Select all that apply.

34. There are three main technologies underpinning the production of animated and video game content for the web browser. These are GIF or webP, 2D Canvas and WebGL. Which of the following statements about these technologies are true? Choose all that apply.     

HTML and CSS in Depth CONCLUSION