As the demand for skilled web developers continues to rise, it is essential to prepare for HTML and CSS interviews. Mastering these fundamental technologies is crucial for building modern and visually appealing websites.
To help you succeed in your job search, we have compiled a list of the top HTML and CSS interview questions and provided comprehensive answers to assist you in your preparation for interviews in 2023.
1. What’s a URL?
Answer – A URL, or uniform resource locator, is an address that points to a specific document or bit of information on the Internet.
2. What’s required to publish documents on the Web?
Answer – You need access to a web server. Web servers, which are programs that serve up documents over the Web, reply to web browser requests for files and send the requested pages to many different types of browsers. They also manage form input and handle database integration.
3. How would you briefly define the meaning of the terms website, web server, and web pages?
Answer – A website is one or more web pages linked together in a meaningful way. A web server is the actual computer that stores the website (or confusingly enough, the piece of software that responds to requests for pages from the browser).
4. In terms of web publishing, what’s the meaning of the term home page?
Answer – A home page, in terms of web publishing, is the entry point to the rest of the pages in your website (the first or topmost page).
5. After you set a goal or purpose for your website, what’s the next step to designing your pages?
Answer – After you set a goal or purpose for your website, you should try to organize your content into topics or sections.
6. Regardless of the navigation structure you use in your website, there’s one link that should typically appear on each of your web pages. What is it?
Answer – You should try to include a link to your home page on each of the pages in your website. That way, users can always find their way back home if they get lost.
7. What’s the purpose of a storyboard?
Answer – A storyboard provides an overall outline of what the website will look like when it’s done. It helps organize your web pages in a way that works for you. They are most beneficial for larger websites.
8. What does HTML stand for? How about XHTML?
Answer – HTML stands for Hypertext Markup Language. XHTML stands for Extensible Hypertext Markup Language.
9. What’s the primary function of HTML?
Answer – HTML enables you to describe the structure of a document so that it can be styled, either using HTML tags or using CSS.
10. Why doesn’t HTML control the layout of a page?
Answer – HTML doesn’t control the layout of a page, because it’s designed to be crossplatform. It takes the differences of many platforms into account and allows all browsers and all computer systems to be on equal ground.
11. What’s the basic structure of an HTML tag?
Answer – Most HTML elements consist of opening and closing tags, and they surround the text that they affect. The tags are enclosed in brackets (<>). The beginning tag turns on a feature, and the ending tag, which is preceded by a forward slash (/), turns it off.
12. What three HTML tags describe the overall structure of a web page, and what do each of them define?
Answer – The <html> tag indicates that the file is in the HTML language. The <head> tag specifies that the lines within the beginning and ending points of the tag are the prologue to the rest of the file. The <body> tag encloses the remainder of your HTML page (text, links, pictures, and so on).
13. Where does the <title> tag go, and what is it used for?
Answer – The <title> tag indicates the title of a web page in a browser’s bookmarks, hotlist program, or other programs that catalog web pages. This tag always goes inside the <head> tags.
14. How many different levels of headings does HTML support? What are their tags?
Answer – HTML supports six levels of headings. Their tags are <h1 .. /h1> through <h6 .. /h6>.
15. Why is it a good idea to use two-sided paragraph tags, even though the closing tag </p> is optional in HTML?
Answer – The closing </p> tag becomes important when aligning text to the left, right, or center of a page. Closing tags also are required for XHTML 1.0.
16. Ordered and unordered lists use the <li> tag for list items; what tags are used by definition lists?
Answer – Definition lists use the <dt> and <dd> tags for list items.
17. Is it possible to nest an ordered list within an unordered list or vice versa?
Answer – Yes, you can nest ordered lists within unordered lists or vice versa. You can also nest lists of the same type, too.
18. Which attribute is used to set the starting number for an ordered list? What about to change the value of an element within a list?
Answer – With the <ol> tag, the start attribute is used to specify the starting value for the list. To change the numbering within a list, the value attribute is used. Subsequent items are numbered from the most recent value that’s specified.
19. What are the three types of bullets that can be specified for unordered lists using the list-style-type CSS property?
Answer – The bullet types supported by the list-style-type property are disc, circle, and square. The default is disc.
20. What two things do you need to create a link in HTML?
Answer – To create a link in HTML, you need the name or URL of the file or page to which you want to link, and the text that your readers can select to follow the link.
21. What’s a relative pathname? Why is it advantageous to use them?
Answer – A relative pathname points to a file, based on the location that’s relative to the current file. Relative pathnames are portable, meaning that if you move your files elsewhere on a disk or rename a directory, the links require little or no modification.
22. What’s an absolute pathname?
Answer – An absolute pathname points to a page by starting at the top level of a directory hierarchy and working downward through all intervening directories to reach the file.
23. What’s an anchor, and what is it used for?
Answer – An anchor marks a place that you can link to inside a web document. A link on the same page or on another page can then jump to that specific location instead of the top of the page.
24. Besides HTTP (web page) URLs, what other kinds are there?
Answer – Other types of URLs are FTP URLs (which point to files on FTP servers); file URLs (which point to a file contained on a local disk); and mailto URLs (which are used to send electronic mail).
25. What are the differences between logical character styles and physical character styles?
Answer – Logical styles indicate how the highlighted text is used (citation, definition, code, and so on). Physical styles indicate how the highlighted text is displayed (bold, italic, or monospaced, for example).
26. What are some things that the <pre> (preformatted text) tag can be used for?
Answer – Preformatted text can be used for text-based tables, code examples, ASCII art, and any other web page content that requires extra spaces to align characters.
27. What’s the most common use of the <address> tag?
Answer – The <address> tag is most commonly used for signature-like entities on a web page. These include the name of the author of the web page, contact information, dates, copyright notices, or warnings. Address information usually appears at the bottom of a web page.
28. Older versions of HTML provided ways to align and center text on a web page. What’s the recommended way to accomplish these tasks in HTML 4.01?
Answer – Alignment and centering of text can be accomplished with style sheets, which is the recommended approach in HTML 4.01.
29. Why can’t absolute units be used reliably in CSS?
Answer – Absolute units have problems in CSS because there’s no way to know exactly what sort of display medium the user has. An inch on one monitor might be completely different than an inch on another.
30. True or false: Including style sheets on your page requires features provided by a web server.
Answer – The answer is false; you can use the <link> tag to load external style sheets without involving the web server in any way.
31. How do the absolute and relative positioning schemes differ?
Answer – The relative positioning scheme places elements relative to the previous element on the page, whereas the absolute positioning scheme places the element exactly where you tell it to on the page.
32. Is the margin or padding of an element inside the border?
Answer – The padding of an element is inside the border of an element, and the margin is outside.
33. How do you lay out your page so that elements positioned statically appear above elements that are positioned absolutely?
Answer – This is a trick question. You cannot put statically positioned elements above absolutely positioned elements. However, if you change the statically positioned elements so that they use the relative positioning scheme, you can alter their stacking layer using the z-index property.
34. What’s the most important attribute of the <img> tag? What does it do?
Answer – The most important attribute of the <img> tag is the src attribute. It indicates the filename or URL of the image you want to include on your page.
35. If you see a funny-looking icon rather than an image when you view your page, the image isn’t loading. What are some of the reasons this could happen?
Answer – Several things might cause an image not to load: The URL may be incorrect; the filename might not be correct (they’re case-sensitive); it might have the wrong file extension; or it might be the wrong type of file.
36. Why is it important to use the alt attribute to display a text alternative to an image? When is it most important to do so?
Answer – It’s a good idea to provide text alternatives with images because some people use text-only browsers or have their graphics turned off. It’s especially important to provide text alternatives for images used as links.
37. What is an imagemap?
Answer – An imagemap is a special image in which different areas point to different locations on the Web.
38. Why is it a good idea to also provide text versions of links that you create on an imagemap?
Answer – It’s a good idea to include text versions of imagemap links in case there are users who visit your page with text-only browsers or with images turned off. This way, they can still follow the links on the web page and visit other areas of your website.
39. True or false: When you use the background shorthand property, the order of the values is important.
Answer – True. The property will work only if you enter the values in the proper order.
40. What are the basic parts of a table, and which tags identify them?
Answer – The basic parts of a table (the <table> tag) are the border (defined with the border attribute), caption (defined with the <caption> tag), header cells (<th>), data cells (<td>), and table rows (<tr>).
41. Which attribute is the most common attribute of the table tag, and what does it do?
Answer – The border attribute is the most common attribute for the table tag. It specifies whether border lines are displayed around the table and how wide the borders should be.
42. What attributes define the amount of space between the edges of the cells and their content, and the amount of space between cells?
Answer – cellpadding defines the amount of space between the edges of the cell and their contents. cellspacing defines the amount of space between the cells.
43. Which attributes are used to create cells that span more than one column or row?
Answer – The rowspan attribute creates a cell that spans multiple rows. The colspan attribute creates a cell that spans multiple columns.
44. Which elements are used to define the head, body, and foot of a table?
Answer – <thead>, <tbody>, and <tfoot> define the head, body, and foot of a table.
45. How many forms can you have on a web page?
Answer – You can have any number of forms on a web page.
46. How do you create form controls such as radio buttons and check boxes?
Answer – These form controls are created with the input element. Radio buttons have the type attribute set to radio, and check boxes are created using the type checkbox.
47. Are passwords sent using a password control secure?
Answer – No! Passwords sent using a password control are not secure.
48. Explain the benefit of using hidden form controls.
Answer – Hidden form controls are intended more for you than for the person filling out the form. By using unique value attributes, you can distinguish between different forms that may be sent to the same script or sent at different times.
49. What other technology do forms rely on?
Answer – For you to process the data submitted via forms, they must be paired with a serverside script through the action attribute.
50. How do you accommodate users whose browsers do not support the <video> tag and do not have Flash installed?
Answer – The key to accommodating users who cannot view your video because of the browser they’re using or because they don’t have the proper plug-in installed is to use alternative content. Content placed inside the <video> tag or <object> tag will be ignored by browsers that understand those tags and displayed by those that don’t. You can include a link to the proper plug-in, a new browser, or even a direct link to the video itself so that the user can download it and play it with an application on their computer.
51. Why is SWFObject a more robust approach to embedding Flash than just using the <object> tag?
Answer – The two main advantages of SWFObject are that it enables you to create valid markup that still supports a wide variety of browsers and that it gracefully handles cases where the user is missing the Flash plug-in or the version of the Flash plugin they have installed is out of date.
52. Why are two <object> tags required to embed Flash movies in pages that work in most browsers?
Answer – Two <object> tags are required because one set of attributes works with Internet Explorer and another set of attributes work with other browsers, like Firefox and Safari.
53. Which video format is supported by all web browsers that support the <video> tag?
Answer – This is a trick question. No one container format or codec is supported by all browsers. To reach your entire audience, you must encode your video in multiple formats and use Flash for browsers without native support for the s tag.
54. Which property tells the text to start flowing normally again, after a floated column?
Answer – The clear property can be used after floated columns—for example, if you want a footer to reach across the entire browser window below the floated columns.
55. How do you designate the containing block for an absolutely positioned element?
Answer – You set the containing block by changing the position property, usually to a value of relative (with no offset properties designated).
56. What HTML tag is used to embed JavaScript scripts in a page?
Answer – To accommodate the inclusion of JavaScript programs in a normal HTML document, Netscape introduced the <script> tag. By placing a <script> tag in a document, you tell the web browser to treat any lines of text inside the tag as script rather than as content for the web page.
57. What are events? What can JavaScript do with them?
Answer – Events are special actions triggered by things happening in the system (windows opening, pages being loaded, forms being submitted) or by reader input (text being entered, links being followed, check boxes being selected). Using JavaScript, you can perform different operations in response to these events.
58. Is an expression that evaluates to the value 0 true or false? How about the string “false” inside quotation marks?
Answer – The number 0 is false, and the string “false” is true. The only false values are 0, null, an empty string, undefined, NaN (not a number), and the Boolean value false.
59. How do you make sure that a variable you create in a function is only visible locally in that function?
Answer – The var statement is used to define a local variable inside a function.
60. How are functions different from methods?
Answer – Methods are associated with a specific object, and functions are standalone routines that operate outside the bounds of an object.
61. What happens whenever a user clicks a link, button, or form element on a web page?
Answer – Whenever a user clicks a link, a button, or any form element, the browser generates an event signal that can be captured by one of the event handlers mentioned in the previous lesson.
62. In an event handler, what does this refer to?
Answer – In event handlers, this is a reference to the element on which the event was called. So in an event handler for the onclick event of a link, this would refer to the link that the user clicked on.
63. What kinds of nodes on a page can be associated with properties like nextChild and previousChild?
Answer – Nodes in the DOM can include HTML elements, text inside HTML elements, and even whitespace between elements.
64. How does form validation with JavaScript conserve server resources?
Answer – JavaScript enables you to do error checking in forms on the browser side before the form is ever submitted to the server. A script must access the server before it can determine the validity of the entries on a form. (Note that even if you use JavaScript form validation you must validate user input on the server, too, because users can bypass the JavaScript if they choose.)
65. What’s the basic function of a web server?
Answer – A web server is a program that sits on a machine on the Internet (or an intranet). It determines where to find files on a website and keeps track of where those files are going.
66. How can you obtain an Internet connection?
Answer – You can obtain an Internet connection through school, work, or commercial Internet or web services, or you can set up your own web server.
67. What are default index files, and what’s the advantage of using them in all directories?
Answer – The default index file is loaded when a URL ends with a directory name rather than a filename. Typical examples of default index files are index.html, index.htm, and default.htm. If you use default filenames, you can use a URL such as http://www.mysite.com/ rather than http://www.mysite.com/index.html to get to the home page in the directory.
68. What are some things that you should check immediately after you upload your web pages?
Answer – Make sure that your browser can reach your web pages on the server, that you can access the files on your website, and that your links and images work as expected. After you’ve determined that everything appears the way you think it should, have your friends and family test your pages in other browsers.
69. Name some of the ways that you can promote your website.
Answer – Some ways you can promote your site include major web directories and search engines, listings on business cards and other promotional materials, and web rings.
70. What’s a hit?
Answer – A hit is a request for any file from your website.
71. What are the advantages of using an all-in-one submission page to promote your site?
Answer – An all-in-one submission page enables you to submit your URL to several different site promotion areas and web robots simultaneously. Some provide a small number of submissions for free and a larger number of submissions for an additional fee.
72. What are the differences between a frameset document, a frameset, a frame, and a page?
Answer – A frameset document is the HTML document that contains the definition of the frameset. A frameset is the portion of the frameset document that is defined by the <frameset> tag, which instructs the browser to divide the window into multiple sections. A frame is one of the sections, or windows, within a frameset. The page is the web document that loads within a frame.
73. When you create links to pages that are supposed to load into a frameset, what attribute makes the pages appear in the right frame? (Hint: It applies to the <a> element.)
Answer – The target attribute of the <a> tag directs linked pages to load into the appropriate frame.
74. When a web page includes the <frameset> element, what element cannot be used at the beginning of the HTML document?
Answer – When a web page includes the <frameset> element, it cannot include the <body> element at the beginning of the page. They’re mutually exclusive.
75. What two attributes of the <frameset> tag divide the browser window into multiple sections?
Answer – The cols and rows attributes of the <frameset> tag divide the browser window into multiple frames.
76. What attribute of the <frame> tag defines the HTML document that first loads into a frameset?
Answer – The src attribute of the <frame> tag defines the HTML document that first loads into the frameset.
77. What are the three flavors of XHTML 1.0, and which of these three accommodates the widest range of markup?
Answer – The three flavors of XHTML 1.0 are Transitional (designed for the widest range of markup, including tags that are deprecated in the standard), Frameset (which includes all tags in the Transitional specification, plus those for framesets), and Strict (for those who want to stick to pure XHTML 1.0 tags and attributes).
78. What are some ways you can organize your pages so that visitors can scan them more easily?
Answer – You can use headings to summarize topics, lists to organize and display information, and link menus for navigation, and you can separate long paragraphs with important information into shorter paragraphs.
79. True or false: Headings are useful when you want information to stand out because they make the text large and bold.
Answer – False. You should use headings as headings and nothing else. You can emphasize text in other ways, or use a graphic to draw attention to an important point.
80. True or false: You can reduce the download time of an image by using the width and height attributes of the <img> tag to scale down the image.
Answer – False. When you use the width and height attributes to make a large image appear smaller on your page, it may reduce the dimensions of the file, but it won’t decrease the download time. The visitor still downloads the same image, but the browser just fits it into a smaller space.
81. Why does it improve performance to put your CSS in a linked style sheet rather than including it on the page?
Answer – Putting your CSS in an external file enables the browser to cache the file so that it doesn’t have to download the same information as the user moves from one page on the site to another.
82. What are the advantages and disadvantages of creating one big web page versus several smaller ones?
Answer – The advantages of creating one large page are that one file is easier to maintain, the links don’t break, and it mirrors real-world document structure. The disadvantages are that it has a longer download time, visitors have to scroll a lot, and the structure is rigid and too linear.
83. How do real-world user needs vary?
Answer – Different users will have different levels of experience. Browser preferences will vary. Some want to see a lot of multimedia, whereas others prefer none at all. Some prefer images and multimedia that are interactive, whereas others prefer simpler pictures that demonstrate a process or technique on how to do something. Other preferences are more specific to the interests of the visitors.
84. What are some important things to include on your site to help those who are new to computers or the Internet?
Answer – Include pages on your site that help tvisitors find the information they’re looking for. Also include pages that help them find their way around the site.
85. What are two things you can do right now to start migrating to HTML5?
Answer – Two things you can do to start migrating to HTML5 are to start using the HTML5 DOCTYPE and to stop using the tags and attributes that were removed from HTML5 in your pages.
86. True or false: It’s better to have a lot of frames in a frameset because you can keep more information in the browser window at the same time.
Answer – False. Too many frames can be confusing for new users, and they might be too small to be useful when they’re viewed at lower resolutions.
87. True or false: To make a site truly accessible, no images can be used for navigation or links.
Answer – False; however, you must use the images in an accessible manner.
88. How should navigation be placed on a page to make it most accessible?
Answer – Navigation should be placed after the main content on a page to make it accessible with users who must navigate the page in a linear fashion.
89. Name three attributes of tags aimed specifically at accessibility.
Answer – Some attributes designed to improve accessibility are the title attribute of the <a> tag, the longdesc and alt attributes of the <img> tag, and the summary attribute of the <table> tag. Remember, though, that longdesc and summary have been removed from HTML5. It is recommended that their content be incorporated into the page in another way.
90. What’s the basic function of a web server?
Answer – A web server is a program that sits on a machine connected to the Internet (or an intranet). It determines which resource is associated with a URL and delivers that resource to the user.
91. What are default index files, and what’s the advantage of using them in all directories?
Answer – The default index file is loaded when a URL ends with a directory name rather than a filename. Typical examples of default index files are index.html, index.htm, and default.htm. If you use default filenames, you can use a URL such as http://www.mysite.com/ rather than http://www.mysite.com/index.html to get to the home page in the directory.
92. What are some things that you should check immediately after you upload your web pages?
Answer – Make sure that your browser can reach your web pages on the server, that you can access the files on your website, and that your links and images work as expected. After you’ve determined that everything appears the way you think it should, have your friends and family test your pages in other browsers.
93. Name some of the ways that you can promote your website.
Answer – Some ways you can promote your site include major web directories and search engines, listings on business cards and other promotional materials, and web rings.
94. What’s a hit?
Answer – A hit is a request for any file from your website.
95. What is the difference between double and single quotes in PHP?
Answer – In PHP, strings in double quotes are parsed for variable references and special characters before they are presented. Strings in single quotes are presented as is.
96. How do the include_once and require_once functions differ?
Answer – The include_once function does not return a fatal error if the file being included is not found. With require_once, if the file is not found, a fatal error occurs and the rest of the page is not processed.
97. Which functions can be used to help avoid cross-site scripting attacks?
Answer – You can use htmlspecialchars() to escape the characters used to generate HTML tags for a page. You can use strip_tags() to remove any HTML tags from a string. Either approach should prevent users from using malicious input to attempt a cross-site scripting attack.
98. How do you declare an associative array in PHP?
Answer – Associative arrays are declared as follows: $array = (‘key’ => ‘value, ‘key2’ => ‘value2’);
99. What are some of the trade-offs between hosted applications and those you install yourself?
Answer – Hosted applications tend to be less work up front and easier to maintain but offer less flexibility than applications you install.
100. Why do some applications require you to change the file permissions on the server?
Answer – Applications that make changes to the file system, either because they store their data in files or because they allow users to upload files, generally require you to change the file permissions for specific directories when you install them.
101. Why do most installable applications ask you to specify a prefix for table names in a database?
Answer – Each application has its own table prefix to prevent naming conflicts when several applications use the same database. For example, several applications might have their own table called “users.” Adding an application-specific prefix to it will prevent conflicts.
- Top 30 Linux Questions (MCQs) with Answers and Explanations
- 75 Important Cybersecurity Questions (MCQs with Answers)
- 260 One-Liner Information Security Questions and Answers for Fast Learning
- Top 20 HTML5 Interview Questions with Answers
- 80 Most Important Network Fundamentals Questions With Answers
- 100 Most Important SOC Analyst Interview Questions
- Top 40 Cyber Security Questions and Answers
- Top 10 React JS Interview Theory Questions and Answers
- CISSP – Practice Test Questions – 2024 – Set 20 (53 Questions)
- Part 2: Exploring Deeper into CCNA – Wireless (145 Practice Test Questions)
