There are many ways that we can learn and acquire knowledge in this IT industry. For example, reading books, watching video tutorials, reading blogs … etc and learning from interview questions are also ways we can test our current knowledge, as well as expand knowledge in the sections. I do not know, not sure yet. Sometimes I go online to wait for these interview questions to supplement my knowledge: v Watch to learn, not prepare to quit brooo hahah. That’s why I started to sum up in this series.
Ah forgot to introduce, hello everyone, I’m Tien
This series will be 55 HTML interview questions I picked up on the internet, you can refer to cover knowledge offline. There will be 55 câu hỏi phỏng vấn CSS, 55 câu hỏi phỏng vấn JS, 55 câu hỏi phỏng vấn ABC, XYZ ... Your job is to like and save the article to support you, if everyone supports heat. love. I will try to synthesize for the next series
It’s a bit rambling, right: v Now let’s start.
1. What is an iframe in HTML? And how does it work?
- iframe is a tag in HTML that makes it possible to embed other document content in HTML document.For example:
<iframe src="[https://github.com](https://github.com/)" height="300px" width="300px"></iframe>
2. Explanation of meta tags in HTML?
There are a few points we should note about meta tags in HTML as follows
- The meta tag is always placed in the
headtag at the top of the HTML page. - The meta tag won’t render on the page, but ispect can be used in the browser to view the content
- The meta tag can contain
character encoding, description, title - The meta tag will inform search engines. For example, Google Search Engine
For example
1 2 3 4 5 6 7 | <!DOCTYPE html> <html><head> <meta name="description" content="I am a web page with description"> <title>Home Page</title></head> <body></body> </html> |
3. What does the alt attribute of the image mean?
- The alt attribute will provide alternative information for an image in case the user is unable to view it (due to slow connection, error in src..vv attribute)
- The alt attribute should be used to describe any image except those for decorative purposes only, in that case it should be left blank.
4. What is the difference between span tag and div tag?
divis a block elementspanis an inline element
In addition, it doesn’t seem plausible to put a block element inside an inline element.
Example: While div tag can have p tag and p tag has span tag inside. However, putting div or p tag inside a span tag doesn’t make sense. You can of course use it, but this is a convention you should be following.
Below is an explanation of the https://developer.mozilla.org/ page for this problem
5. How to Search Engines can search index (index) better?
- You can get better indexed by using the following 2 commands in the <HEAD> section of your HTML document.
1 2 3 | <META NAME="keywords" CONTENT="keyword keyword keyword keyword"> <META NAME="description" CONTENT="description of your site"> |
- Both contain a maximum of 1022 characters. If a keyword is used more than 7 times, the keywords tag will be completely skipped.
6. Some concepts about HTML5?
- HTML5 is designed to replace HTML4, XHTML, and HTML DOM Level 2. A few of them are:
- Provides rich content (graphics, movies, audio, .etc ..) without additional plugins, such as Flash.
- Provides better sematic support tags for the site structure.
- Provides better cross-platform support whether running on a PC, tablet or smartphone.
7. How to highlight text in HTML?
- If you work with HTML5, use the
<mark>tag to quickly and easily highlight text.<mark>highlighted text</mark> - If using only HTML, then you can set the background-color for the tag. Like the example below
<span style="background-color: #FFFF00">Yellow text.</span>
8. Explain the meaning of sematic tags in HTML5: <header>, <article>, <section>, <footer>
<header>: Used to specify the beginning of a document page or the beginning of a paragraph. The <header> element should be used as a containter containing the introductory or introductory text.<article>: used for standalone content and contains its own content. The content inside the <article> element has separate meanings and can be independent from other web content.<section>: The <section> element identifies a section contained in the document. Based on the W3C HTML5 documentation: “A section is a group of similar content on the same topic.”<footer>: The <footer> element specifies the end of a document page or the end of a paragraph. The <footer> element should contain information such as author information, copyright information, links to terms of use, contact information …
9. What is Character Encoding?
- To display the HTML page correctly, the web browser must know what character encoding is used. This will be indicated in the meta tag.HTML4:
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">HTML5:
<meta charset="UTF-8">
10. Self closing tag in HTML5 (self closing tag)?
- The story of self-closing tags is not that interesting when you are not interested in it. Self-closing tags are related to the ways in which HTML has been developed during use since the late 1980s. Conventional HTML tags have an opening and closing tag as you know it. However, there are elements in HTML called void elements, such as images and links, that don’t strictly require closing tags because of their inherent structure. And probably, the experts assume that things like images and links don’t need and can’t have content – they’re just kind of pointers to an element installed on the page.
- <area> : This is a pretty unique tag that functions as an area for an image.
- <col> : Specify an attribute for each column.
- <embed> : Embed flash or something external.
- <img> : Embeds an image through the src attribute.
- <input> : It is input, that’s it.
…. etc …
Some self-closing tags you can refer to, in addition, there are many other cards that I cannot easily list all. You can see more here .
11. What is the difference between attribute and property in HTML?
- attributes will be defined in HTML tags and properties will be defined in the DOM. For example we have 1 tag like this:
<input type="text" value="Hello">
1 2 3 4 | const input = document.querySelector('input'); console.log(input.getAttribute('value')); // Hello console.log(input.value); // Hello |
After we add the value of the text field by adding “World!”. It will become as follows
1 2 3 | console.log(input.getAttribute('value')); // Hello console.log(input.value); // Hello World! |
12. When to use the small card?
- The small tag causes the front size to be one size smaller (Example: Large to medium or small) down to the browser minimum font size. In HTML5, this element is used to render marginal comments and fine print. Or the simplest you can see is the copyright under the footer.
1 2 3 | <img src="image.jpg" alt="London by night"> <small>The copyright of this image is owned by Aurelio De Rosa</small> |
13. What is the difference between block element and inline eement?
block elementareblock elementthat will take up the entire available width on a web page, effectively blocking any other elements on the left or right.inline elementare elements that occupy only the necessary width to display the content of the element. Hence, other inline elements can be on the same line.
Some of the most popular block element are:
- Paragraphs (
<p>) - Headers (
<h1>through<h6>) - Divisions (
<div>) - Lists and list items (
<ol>,<ul>, and<li>) - Forms (
<form>)
Some of the most popular inline element are:
- Spans (
<span>) - Images (
<img>) - Anchors (
<a>)
14. Explanation of standard, full standard and quirks mode.
- Back in the early days web pages were often written in two versions: One for Netscape Navigator and one for Internet Expoler. When the W3C invented the standard , the websites couldn’t use them, as that would break most existing websites. Consequently, browsers introduced 2 standards for matching the new and old website. Now it has 3 modes:
quirks mode, standards mode, và full standards - For HTML, the browser will use DOCTYPE at the top of the page to decide which mode to process it in. You can refer to the code below.
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html lang="en"> <head> <meta charset=UTF-8> <title>Hello World!</title> </head> <body> </body> </html> |
You can learn more here
15. How do I set the mode to suit IE (Internet Explorer)?
- Use http-equiv = X-UA-Compatible meta with IE content = edge
- IE = edge will tell IE to display new content in the current highest mode.
You can refer to the picture below
Part 1 is temporary so
Please like and up vote the article if you find it necessary. It will be the driving force for me to have the next articles and series. Don’t be afraid to leave comments so we can interact and learn from each other
Thank you for reading and see you next posts: v