If you are going to an interview or simply want to understand more about web development and its related technologies, here are some common questions which will help you answer any uncertainties you may have.
1. What is HTML?
You cannot talk about web development and not mention HTML which stands for Hypertext Markup Language. HTML is the main language used to format and organize websites’ user interface in different web browsers. Also anything interactive in a web page is made up using HTML like for example a textbox or a button. However it is important to know that HTML is not a programming language. That means that in order to make a button functional you cannot use HTML.
Another main concept of HTML is that it makes use of hypertext which allows the user to navigate from one webpage to another in the same website or connecting websites together.
2. What are tags?
HTML makes use of tags and attributes in order to structure your work in a web page. There are different kinds of tags and they are used according to what a user needs to input in a website.
The following is an example of what every HTML page structure should look like before you start to write any content of your own. The tag <!DOCTYPE html> defines the type of HTML being used, “!DOCTYPE html” means that HTML5 will be used. Every HTML page should also contain the tags <html> </html> and write the content of the page in between.
<!DOCTYPE html>
<html>
</html>
The following is a simple example of adding some simple text in a website with the use of the tag “<p>” to open the tag and “</p> to close that same tag.
<p> This is some text </p>
3. Do all HTML tags have an end tag?
Although the majority of tags in HTML have to be closed, there are certain tags which do not have to be closed. A very commonly used tag that does not have an end tag is the ‘<input>’ tag which is used to create a textbox.
Here is a list of some other tags which do not have an end tag:
- <br> to skip a line
- <hr> used for horizontal rule to separate content
- <img> to insert an image in a webpage
- <col> used to create a column
- <base> specifies the URL used in a page
4. What’s the difference between a block-level element and an inline element?
Tags in HTML can be displayed in block-level or inline. Every tag has its own default element which can be annulled by the use of CSS.
Tags in block-level elements are the following:
- <div>
- <form>
- <nav>
Whatever you write between the above tags will be displayed from the beginning to the end of a given width. Also when using a block-level tag their content will start on a new line.
Tags in inline elements are the following:
- <span>
- <input>
- <button>
Inline elements on the other hand will use the necessary amount of width and the content of such elements will not start on a new line.
5. What are some of the common lists used when designing a page?
The most common lists used in HTML are:
- Unordered list: Is a list of items that have no particular order example a list of fruits.
| HTML <ul> <li> Strawberries </li> <li> Grapes </li> </ul> | Output of HTML Strawberries Grapes |
- Ordered list: A list where its items have to be displayed in numerical order example road direction.
| HTML <ol> <li> Turn left </li> <li> At the roundabout take 2nd exit </li> </ol> | Output of HTML Turn left At the roundabout take 2nd exit |
- Description list: sometimes referred to it as definition list. It is a list that with every item a description is written to describe that particular item.
| HTML <dl> <dt>John Brown </dt> <dd>age: 30 </dd> <dt> Jane White </dt> <dd> age : 31 </dd> </dl> | Output of HTML John Brown Age: 30 Jane White Age: 31 |
6. How to create a hyperlink in HTML?
A very common and useful tag is the ‘<a>’ followed by ‘href’ which is used to create a hyperlink in HTML. Hyperlinks are clickable text that will take you to another specified page. The following is an example of a hyperlink that when the word ‘Google’ is clicked google page will open.
<a href=”www.google.com”>Google</a>
How do you use JavaScript on a web page?
JavaScript is a commonly used programming language to make a website functional. The following are two ways to introduce JavaScript to your HTML code.
- A script with JavaScript page’s path can be added in the HTML page.
<script src=”index.js”> </script>
- Or add the JavaScript code in the HTML page by placing all the JavaScript code between the script tag. This is typically used when you only have a few JavaScript code.
7. What is an iframe in Html?
An iframe is a created space in a webpage to display contents of another page. In an iframe you can vary its width and height and add scrollbars as it is required. This is commonly used for advertisement in a website or for inserting a youtube video in a webpage. Here is an example how to create an iframe:
<iframe src=”www.google.com” width=”200” height=”200”> </iframe>
8. Difference between HTML and XHTML
XHTML stands for Extensible HyperText Markup Language. Its use is exactly the same as HTML although it makes HTML work with other markup languages such as XML. While some syntax errors are ignored in HTML, XHTML is much more stricter and does not allow elements to be left open or attributes to be written in uppercase.
9. What is the SVG element?
SVG stands for Scalable Vector Graphics. Is a language used for 2D graphics in XML which supports images and animations. The main advantage of SVG is that it can be scaled to any size without being pixelated. SVG uses various shapes to draw like a circle, this can be noticed in an svg tag like in the example below.
<svg width=”300” height=”400”>
<circle cx=”150″ cy=”30″ r=”40″ stroke=”#4e89ab” stroke-width=”3″ fill=”lightgray”/>
</svg>
10. What are the parts of the HTML page?
An HTML page is divided into three parts which are:
- The version of the HTML being used: <!DOCTYPE html>
- The head section: <head> where the title of the document can be defined or it meta element is included
- The body section: <body> the main content of the document is written.
11. How to change the font colour in the HTML page?
To change the font colour in an HTML page the following has to be applied in the tag that a color change is required:
style=”color:blue”
12. Which new tags are included in the HTML5?
Here is a list of the new tags being included in HTML5:
- <article> used to write a blog
- <aside> content which has nothing to do with the rest of the page
- <audio> for an audio file
- <canvas> used to input bitmap graphics like graphs
- <command> command that a user can call
- <datalist> new list attribute
- <details> information which a user can access
- <embed> external content or plugin
- <figure> self-contained flow content
- <footer> in information at the bottom of a webpage like copyright text
- <header> information at the top of a webpage
- <keygen> control of key pair generation
- <hgroup> the header of a section
- <nav> its content represent navigation
- <mark> text marked for reference
- <meter> contains measurements
- <output> output from a calculations
- <progress> a task is taking place such as download
- <ruby> allow ruby annotations
- <section> a document section
- <video> a video file
- <time> contains date and time
- <wbr> a line break
13. What is CSS?
CSS stands for Cascading Style Sheets, used to style HTML documents. It helps the developer to define colours, fonts, styles, width, height of each element designed in an HTML page.
Most of the time CSS files are separate files linked through HTML pages which with the help of each element’s class name a style is given. Sometimes instead of using a separate CSS file, CSS code is written directly into the elements that need to be styled.
14. What is the difference between the a <div> and a <frame>?
A <div> is like a container of elements which usually share the same styles. A <div> is also used to create sections in an HTML document where it can be easily manageable. On the other hand a <frame> divides a webpage however, nowaday it is being replaced by <iframe>
15. What is the CORS? How does it work?
Cross-Origin Resource Sharing is a procedure where a webpage running on a particular domain requests information from another source running on a different domain. This is done when the webpage requesting information runs a cross-origin HTTP to access the needed information found on another domain.
Example of how CORS works is when you have webpage A which needs information from webpage B, so webpage A makes a cross-origin request to get the desired information from webpage B.
16. How will you align a table to the right or left?
A table can be aligned using the attribute “align”. The following are two examples where an HTML table is aligned to the right and to the left respectively.
- <table border=”1″ align=”right”>
- <table border=”1″ align=”left”>
17. What is the purpose of the canvas in HTML?
A canvas is an element in HTML. The purpose of the canvas is to draw graphics in a rectangular area with the help of JavaScript. Below is an example to create a canvas in a webpage.
<canvas id=”canvas1″ width=”400″ height=”200″> </canvas>
It is important to specify the “id” of the canvas so it can be easily accessed from the JavaScript code. Also specify the dimensions of the canvas where the graphics will be shown.
18. What is the difference between HTML and HTML5?
As already discussed in previous sections, HTML is a markup language used to format and organize web pages making use of various elements. HTML5 is the fifth version of HTML where a good number of elements have been edited or deleted while other technologies have been added making it more modern and easy to use.
The main difference between HTML and HTML5 is the use of JavaScript. In HTML5 JavaScript can be used along with HTML code while in HTML JavaScript is not allowed. HTML5 supports all new browsers while HTML supports old browsers. HTML5 supports audio and video with the use of elements (<audio>, <video>) while HTML does not support such elements.
19. How do you create links to sections in the same page ?
In HTML links are not only used to navigate to another webpage but also to move from top or bottom of the same page. Below is an example of how it is done.
To move to top of the page #top is used as a link:
<a href=”#top”>Top</a>
To move to bottom of the page #bottom is used as a link:
<a href=”#bottom”>Bottom</a>
Also instead of #top and #bottom you can move to a particular section in a webpage by specifying its “id” name like this:
<div id=”first”> </div>
<a href=”#first”>go to First</a>
When the link “go to First” is clicked, the link will take you to the div “first”.
20. Explain the main input type provided in forms
There are quite a good number of input types that can be used in forms.Three most used input types are the following:
Input type text is used for the text field to input any text you want.
Input type password is usually used for text fields which contain passwords. When typing dots will be visible instead of text.
Input type submit is used for buttons in a form.
