How Well Do You Know HTML5?
Prologue
Studying is not easy. It is already not easy to study (and GRADUATE!) from college, but studying for a tech interview… it’s like that determines your future and your ultimate opportunity to work for the company… Just kidding, don’t let that ruin your confidence, you always learn from the mistakes and that’s how we grow. Anyways, I was studying some frontend questions. I have learned HTML5 for quite a while, but most of the time I still have to Google for the particular code. I came across some study guide some time ago and I was surprised how much I didn’t know the answer to some fundamental questions. Let’s see how well you can do!
Questions & Answers
Q1: How do you define HTML5?
.
.
.
.
Ans: HTML5 (Hypertext Markup Language 5) is markup language for the structure and presentation for WWW(World Wide Web) contents. HTML5 supports the traditional HTML and XHTML-style syntax and other new features in its markup, including:
- Adding new attributes
- Allow offline editing
- Support of use inline Scalar Vector Graphics (SVG) and Mathematical Markup Language (MathML) in text/html.
- More elements, including
article,aside,audio,nav,output,source,section
More info: techopedia
Q2: What are tags in HTML?
.
.
.
.
Ans: An HTML tag are the hidden keywords within that defines how a web browser format and display content. Anything that is defined inside this < and > (closing tag have this/ to indicate the end of the content format, like </html>).
Example
<body> (Opening tag)
<h1>Snoopy Welcomes You!</h1>
<p>Snoopy is Charlie Brown's dog. Charlie Brown loves baseball but suck at it. Lucy always pulls the football away before Charlie Brown can kick it.</p>
</body> (Closing tag)
More info: A Simple Guide to HTML
Q3: What is an attribute in HTML?
.
.
.
.
Ans: Attributes provide an additional information about HTML elements. They usually come in name/value pairs, like name=“value” and are always specified in the opening tag.
Example:
<img src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.quora.com%2FIn-the-Peanuts-cartoons-exactly-how-many-times-has-Lucy-pulled-the-ball-away-from-Charlie-Brown&psig=AOvVaw3T4BFIPAhEHPhYWvcQ1YUS&ust=1614665613814000&source=images&cd=vfe&ved=0CAYQjRxqFwoTCJDP9KS4ju8CFQAAAAAdAAAAABAD" alt="comic of lucy pulling charlie brown's ball away"/>src attribute specifies the path to the image to be displayed. (Yeah click the link! It’s an actual link that would take you the picture.)
More info: w3schools — HTML attributes
Q4: What does the HTML anchor tag <a> define?
.
.
.
.
Ans: <a> defines a hyperlink that links one page to another. The href attributes is the most important because it determines the link’s destination.
Example:
<a href="https://peanuts.fandom.com/wiki/Football_gag">Football Gag (Peanuts Wiki)</a>Q5: What are ‘semantic elements’ in HTML5?
.
.
.
.
Ans: Semantic elements provides meaning to the web page, not just for the sake of presentation. For example, <p> indicates that the enclosed text is a paragraph. On the other hand, <b> and <i> are not semantic elements, because this only indicates that the enclosed text has to be presented as bold and italic respectively and it doesn’t have any meaning to the markup. Therefore, in semantic HTML, this has been replaced by <strong> and <em> respectively.
Q6: What is the purpose of <!DOCTYPE html>?
.
.
.
.
Ans: The <!DOCTYPE> declaration has to be put on top of the HTML documents. It is a way to tell the browser about what to be expected to display. Also, <!DOCTYPE html> is not case sensitive. It could be <!Doctype html> or <!doctype html> and other combinations you can think of.
Quick Note: In HTML5, we only have to write <!DOCTYPE html> but before that it is more complicated, like in HTML 4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Thank you HTML5 for making our life easier 🙇🏻♀️
More info: HTML <!DOCTYPE> Declaration and Valid HTML Elements in Different DOCTYPES
Q7: Given a certain website, what are the ways you could optimize its assets and reduce page load time?
.
.
.
.
Ans: As a rule of thumb, make fewer HTTP request and decrease the download size of web page contents (like images) would help. There are some techniques to do so:
- File compression and concatenation
- Re-organizing and refining codes
- Using internal and external style sheets and minimizing inline style CSS
You know like:
<img style=“color: yellow; height: 100px” src=“you-should-move-that-inline-style-to-external-css-styling-sheet” alt=“why you shouldn’t use inline styling” />- Using a CDN (content delivery network) for media files and hosting
- Using asynchronous loading for CSS and Javascript files
More info: 20 Ways to Speed Up Your Website (This also states some reasons of why a website speed optimization is important.)
Q8: What are the different types of storage in HTML5?
.
.
.
.
Ans: In HTML5, data can be stored in two ways: session storage and local storage.
Session storage: A page session lasts as long as the tab or the browser is open and the data would be cleared automatically when the user closes the browser.
vs
Local storage: local storage has no expiration time and the data would not get cleared automatically when the user closes the browser.
More info: Window.localStorage and Window.sessionStorage
Q9: Why are CSS links placed in <head></head> tag?
.
.
.
.
Ans: Style sheets are linked in the head section of HTML markup, allowing the browser to format and render the markup as it goes. If placed the style sheets at the bottom of the document, once the browser finishes rendering and reaches the bottom, it would have to re-render to load the style. This would make the process waaaay slower.
Q10: List out the page structure elements of HTML5.
.
.
.
.
Ans:
<header>: Used to define header for a document or a section<nav>: Used to define container for navigation links<section>: Used to define a section inside a document<article>: Used to tag an independent self-contained article<aside>: Defines the content separately (just like a sidebar).<footer>: Used for tagging a footer inside a document or a section<details>: Used to define any additional details<summary>: Used to define a heading inside the<details>element
~Ta da~ You made it till the end!!!
How well do you know the fundamentals?? It’s crazy that we always write a HTML document but sometimes we might forget the details behind… at least I did… I am currently using Educative.io: Ace the Front End Interview course to help me study and this is where I got all the 10 questions above. I hope this article helps if you are also studying or you are simply here learning :)
Hope you guys enjoy this article!
