HTML INTERVIEW QUESTIONS ANSWERS [2019]

HTML stands for HyperText Markup Language. Markup language is used for creating websites and anything that can be viewed in a web browser. The markup tells the Web browser how to display a Web page\’s words , images and content for the user.

HTML is a set of Markup tags:

A markup language is a set of markup tags

Eample:

<html>
     <head>
          <title></title>
     </head>
     <body>
     </body>
</html>

The start <> tag is called the opening tag. The end</> tag is called the closing tag.

The declaration must be placed in your HTML document, before thetag. It gives the instruction to the web browser about what version of HTML the page is written in.

<!DOCTYPE html>

HTML5 is the latest or updated version of markup language that defines HTML.

Some new features in HTML5 include:

  • DOCTYPE declaration
  • section – Section tag defines a section in the document, such as a header, footer or in other sections of the document. It is used to define the structure of the document. 
  • header – Header tag defines the head section of the document. A header section always sticks at the top of the document. 
  • footer – Footer tag defines the footer section of the document. A footer section always sticks at the bottom of the document. 
  • article – Article tag defines an independent piece of the content of a document. 
  • main – The main tag defines the main section in the document which contains the main content of the document.
  • figcaption – Figcaption tag defines the caption for the media element such as an image or video.

Elements

Each part of a web page, such as a paragraph, an image, a link or anything else you can interact with, is an element. Each type of element has its own behavior – for example you can click on links, or type in text boxes.

Tags

An HTML document is a simple, plain text document, which you are able to open with any text editor on your computer. When you open one, you’ll see the document is made up of tags, which are keywords surrounded by angled brackets, each of which describes an HTML element. Here you can see HTML tags telling the browser how to render the text element inside:

<span>This text is surrounded by HTML tags!</span>

Most tags have opening and closing tags. The opening tag is written with the tag name in angled brackets, like <tagname> whereas the closing tag adds a forward slash: </tagname>. Anything between these opening and closing tags is considered to be contents of that tag.

Some tags, like the <img> tag are self-closing. This means that they cannot have any content. For example, an image can’t contain additional HTML elements within it. The only way to change their behavior or appearance is through attributes or CSS.

<img src="https://www.webpuran.in/" />

Each tag can also have additional attributes, which change the way the tag behaves or is displayed. For example, an <input> tag has a type attribute, which you can use to specify whether it’s a text field, checkbox, radio button or one of many more options.

Attributes are specified directly after the name of the tag, inside the two angled brackets. They should only ever appear in opening tags or in self-closing tags – they can never be in closing tags. They are followed by an equals sign = and the chosen value in double quotes ". Take care not to include any spaces before and after the equals sign! Multiple attributes can be defined on a single tag, separated by a space.


<input type="text" />


<input type="checkbox" />


<input type="radio" value="on" />

There are some attributes that are available on every single tag – like the style attribute – however, most tags also have their own specific ones as those attributes simply wouldn’t make sense on tags of a different type (like an image source attribute on a paragraph tag).

No, there are single HTML tags that does not need a closing tag.
 Examples are the
tag and   tags

A block-level element always starts on a new line and takes entire space of its parent element (container).
Browsers typically display the block-level element with new line and takes up the full width.

Examples of block-level elements:

  1. p.
  2. h1, h2, h3, h4, h5, h6.
  3. ol, ul.
  4. pre.
  5. address.
  6. blockquote.
  7. dl.
  8. div

Sometimes it can be useful to add code comments to your HTML document. These will not be displayed in the browser, but they can be useful to leave notes for yourself and other developers as to what a section of HTML is for. The start of the comment is denoted by . Anything in the middle will be completely ignored, even if it contains valid HTML.


<!-- This is a comment -->

 

<p>This is a paragraph.</p>


<!-- Remember to add more information here -->

While comments are useful, try to keep them to a minimum. Only use them when something is not quite clear enough, or else your documents will become more ‘comment’ than code!

Each element in HTML is displayed in one of a few ways. By default, most tags are either displayed as block-level or inline. This value can be overridden using CSS.

Block

As the name suggests, a block-level element is drawn as a block that stretches to fill the full width available to it (the width of its container) and will always start on a new line.

Examples of elements that are block-level by default: <div><img>, <section><form>, <nav>.

Inline

Unlike the block-level elements, inline elements are drawn where they are defined and only take up space that is absolutely needed. The easiest way to understand how they work is to look at how text flows on a page. When a line of text gets to the end of the space available, it wraps onto the next line and happily keeps going. If you were to tack more text onto an existing line of text, it will stay on the same line, as if it was all part of the same text to begin with.

Examples of elements that are inline by default: <span><b>, <strong>, <a>, <input>.

There are a lot of different HTML elements, which can be a little overwhelming. Luckily, they are also generally pretty intuitive! To help you prepare for a pop quiz in your next interview, we’ve organized some of the most common elements in sections below:

Text

TAGDESCRIPTION
pParagraph block. Has margin above and below by default.
spanInline text, no distinguishing styling by default. Generally used to style parts of a block of text differently (e.g. underlined, different background or font)
aAnchor or link. The href attribute defines where it takes you upon clicking it. This can be a reference point on the same page or a different page.
buttonA clickable element styled differently depending on the browser and operating system (e.g. Windows, Mac, Linux) used, though these can be overridden. What happens upon click is up to you to decide!
strong, bRenders a piece of text bold.
iRenders a piece of text italic.
h1, h2, …, h6These are headings of different levels. For example, you would generally have a single h1 tag, which can have multiple h2 tags inside of it. Each of those in turn can have multiple h3 tags inside them, and so on.
brDenotes a line break. HTML ignores white space in your code when it becomes more than a single space. Therefore, to break text onto a different line, you can use this tag. Alternatively, you could put the different pieces of text in two separate block-level elements.

Layout

TAGDESCRIPTION
divThis is your basic container element. It is a block-level element but has no additional styling by default.
ulThis stands for unordered list, also known as a bulleted list. Inside the ul element you can have any number of li elements. Using CSS you can define whether it displays as bullet points, empty circles or squares.
olStands for ordered list. Each item inside this list will have an incremented number or symbol beside them (e.g. 1, 2, 3 or a, b, c). The symbols can be numbers, letters or roman numerals.
liStands for list item. These live inside ul or ol elements. Each li is a separate item in the list, denoted by bullet point, number or any other symbol chosen by you.
tableSometimes you need to display related data in a table format. Hurray for tables! Just be sure not to use them for your page’s layout, or you might get a phone call from the 90s.
trUsed to define table rows inside table elements.
tdUsed to define table cells inside tr elements, which in turn are inside a table element.
theadOptional (but recommended) part of your table. Use it to group a table row (tr) that contains the column titles of your table.
tbodyLike thead, this is optional. If you have a thead in your table, you should also include a tbody. It should contain all rows that are not in your thead.
sectionBehaves like a div but it’s used to mark a specific section of a page. Each section can have its own h1 tag, whereas normally you should only have one h1 per page. Introduced in HTML5.
navBehaves like a ul but specifically for navigation items. Introduced in HTML5.

Visual

TAGDESCRIPTION
imgUsed to show images on your page. Use the src attribute to specify which file you’d like it to load.
video

Like img, this is used to display video on your page. If you don’t want to embed video from another source (like YouTube or Vimeo), then this is your best bet. Use source tags with the src attribute inside the video tag to specify which file to load, including backup options with different file types.

Just make sure your video is small in file size or you might get some angry emails. You can specify whether you want it to show video controls (like a play/pause button) and whether it autoplays. Older browsers do not support this.

audioSimilar to the above elements, but of course this only loads audio. As with the video element, this will display audio controls if you specify so. As before, use source tags with the src attribute inside the audio tag to specify which file to load, including backup options with different file types.

Forms

TAGDESCRIPTION
formAs the name suggests, this creates a form. Every input element inside a form tag belongs to that form. The action and method attributes are used to specify what to do when submitting the form.
inputThese elements are very versatile and can take on many forms using the type attribute, from text fields and radio buttons, to date fields and Submit buttons.
textareaThese are larger than simple text fields and allow the user to enter line breaks as well. The size can be adjusted.
labelThis defines a label for an input element. When using the for attribute, this can be clicked on to select its associated input field.
selectYour classic dropdown. Each item inside the dropdown list is defined using the option tag, nested inside the select tag. You can of course have many option tags inside a select.
optionAn individual item in a dropdown list.

Anchor tag in HTML is used for linking between two sections or two different web pages or website templates.

To open an url into a new tab in the browser upon a click, we need to add target attribute equal to _blank.

<a href="https://www.webinfratech.com/" target="_blank">Webinfratech | Web Designing | Web Development | Digital Marketing</a>

To HTML create email links using

Example:

<p>
This is an email link:
<a href=”mailto:someone@example.com?Subject=Helloagain” target=”_top”>Send Mail</a>
</p>

Tags are used to enter a new line into the HTML contents. These tags are generally used to separate two different lines of text between each other.

Cell Spacing is referred to space/gap between the two cells of the same table.
Cell Padding is referred to the gap/space between the content of the cell and cell wall or Cell border.

Example:

Cell padding

is used for formatting purpose which is used to specify the space needed between the edges of the cells and also in the cell contents. The general format of specifying cell padding is as follows:

< table width="100" border="2" cellpadding="5">

The above adds 5 pixels of padding inside each cell .

Cell Spacing:

Cell spacing is one also used f formatting but there is a major difference between cell padding and cell spacing. It is as follows: Cell padding is used to set extra space which is used to separate cell walls from their contents. But in contrast cell spacing is used to set space between cells.

<html>
          <head>
                     <title></title>
        </head>
        <body>
        </body></html>

It introduced a number of semantic elements, which is to say elements that convey meaning. Some of the new semantic elements are <header><footer>, <section>, and <article> . They are semantic in that they are not just simple containers, but they tell the browser more about their contents.

There are additional form element types, like "number", "date", "calendar" and "range". Video and audio elements have also been added, as well as new graphic elements, such as <svg> and <canvas>.

When you’ve got a good grasp of HTML, your interviewer may ask you some questions on how HTML works with CSS and JavaScript, to tie everything together. If you are planning on working as a front end developer, employers prefer some proficiency in all three languages.

CSS (Cascading Style Sheets) allows you to change the look of elements on the page, transforming it from a simple text document to a fully fledged website. We won’t go into too much detail on CSS here, but you can read our article on CSS interview questions for more.

There are three main ways to apply CSS styles to a webpage:

Inline styles

You can add a style attribute to almost any tag. Inside this attribute you can write your CSS rules.

<div style="background-color: red;">A container with a red background.</div>

A style block

You are able to define one or more style blocks inside the head section of your HTML document. Inside these blocks you can write your CSS rules. You will have to specify which elements on the page you’d like to style. In the below example, we’re targeting the <body>tag and an element with a class attribute equal to .button.

<head>
    <style>
         body {
             font-size: 16px;
         }

         .button {
             padding: 10px;
         }
    </style>
</head>

Link to a CSS file

By far the most recommended option is to link to a CSS file. This way you are able to keep the content (HTML) separate from the way you present that content (CSS). It also means you can use the same styles on multiple pages. To link to a CSS file, you will have to add a <link> tag to the <head> section in your document with an href attribute that specifies the location of the CSS file.

<head>
    <link rel="stylesheet" href="styles.css">
</head>

 Responsive Web Design makes your web page look good and suitable to work on every device and every screen size, no matter how large or small, mobile or desktop

 

HTML 4.01

1. Audio and Video are not part of HTML4 specification.

2. Vector Graphics is possible with the help of technologies such as VML, Silverlight, Flash etc.

3. It is almost impossible to get true GeoLocation of user browsing any website especially if it comes to mobile devices.

4. Browser cache can be used as temporary storage.

5. Does not allow JavaScript to run in browser. JS runs in same thread as browser interface.

6. Works with all old browsers

 

HTML5

1.  Audio and Videos are integral part of HTML5 specifications e.g.

2.  Vector graphics is integral part of HTML5 e.g.SVG and canvas

3.  JS GeoLocation API in HTML5 helps identify location of user browsing any website (provided user allows it)

4.  Application Cache, Web SQL database and Web storage is available as client side storage. Accessible using JavaScript interface in HTML5 compliant browsers.

5.  Allows JavaScript to run in background. This is possible due to JS Web worker API in HTML5

6.  Most of modern browser have started supporting HTML5 specification e.g. Firefox, Mozilla, Opera, Chrome, Safari etc.

In order to add interactivity to your page, other than what’s already provided through HTML, you will need JavaScript. It is a scripting language that allows you to interact with certain elements on the page, based on user input. As with CSS, there are three main ways of including JavaScript:

Inline

Certain HTML elements allow you to execute a piece of JavaScript when a certain event occurs. For example, a button allows you to run a script when you click on it. These events are accessed through attributes and differ based on the events that are available on each element. The following example shows an alert with a message when the user clicks on it.

<button onclick="alert('You clicked on me!');">Click me!</button>

A script block

You can define a script block anywhere on the page, which will get executed as soon as the browser reaches that part of the document. Note that this can be inside the <head> or <body>section of your document.

<script>
    var x = 5;
    var y = 6;
    var result = x + y;
    alert(“X + Y is equal to " + result);
</script>

Link to a JavaScript file

Again, as with CSS, this is the preferred way of including JavaScript. It allows you to keep the content of the page separate to how users interact with that content, and it allows you to load the same script on multiple pages. As with the script block, you can load a JavaScript file from the <head> or <body>, but keep in mind it will be loaded in the order you’ve structured your document.

<script src="my-code.js"></script>
<!DOCTYPE html>
<html>       <head>            <title></title>       </head>        <body>        </body>
</html>

The basic purpose of using alternative texts is to define what the image is about. During an image mapping, it can be confusing and difficult to understand what hotspots correspond to a particular link. These alternative texts come in action here and put a description at each link which makes it easy for users to understand the hotspot links easily.

Image mapping lets a user to link one image to different web pages in and out of the website. It is the process of defining special shapes inside an image and link it to different destinations.

Copyright symbol can be either copied and pasted from other sources. Or, you can also add it by writing a small piece of code: © or & #169; in the required page

The list elements in HTML are:

  • Ordered List (
    <ol>
      <li>Gather ingredients</li>
      <li>Mix ingredients together</li>
      <li>Place ingredients in a baking dish</li>
      <li>Bake in oven for an hour</li>
      <li>Remove from oven</li>
      <li>Allow to stand for ten minutes</li>
      <li>Serve</li>
    </ol>

    An Ordered List or ol tag are the list which will list the items in an ordered way, i.e. numbered or alphabetically.

  • Unordered List (
    <ul>
      <li>bread</li>
      <li>coffee beans</li>
      <li>milk</li>
      <li>butter</li>
    </ul>

    An Unordered List or ul tag is the list which will list the items in an unordered way, i.e. in bulleted format or in any other format.

  • Definition List (
    <dl>
      <dt>Name</dt>
      <dd>Value</dd>
      <dt>Name</dt>
      <dd>Value</dd>
      <dt>Name</dt>
      <dd>Value</dd>
    </dl>

    – A definition List or dl tag arranges the items in the way in which they are arranged in a dictionary.

Meta tags in html are used by the developer to tell the browser about the page description, author of the template, character set, keywords and many more.

Meta tags are used for search engine optimization to tell the search engine about the page contents

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Webpuran, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

A heading is a block level element which is used to give a heading to the particular section or topic.

A total of 6 types of headings can be written in HTML

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<form >
         <p>Name:</p>
         <input type = "text" name = "user_name" placeholder = "Enter Name"/>
         <br/>
         <br/>
         <p>Email: </p>
         <input type = "email" name = "user_email" placeholder = "Enter email"/>
         <br/>
         <br/>
         <p>Password: </p>
         <input type="password" name = "user_pwd" placeholder = "Enter Password" />
         <br/>

         <button> Submit </button>
</form>

button type=”button” onclick=”alert(\’Hello Superman!\’)”>Hey Click Me!</button>

XHTML means Extensible Hypertext Markup Language, which is basically a part of Family of XML markup language. It usually extends the most popularly used HTML i.e. Hypertext Markup Language, the pages in which the web pages are formulated.

Cell Spacing is referred to space/gap between the two cells of the same table.
Cell Padding is referred to the gap/space between the content of the cell and cell wall or Cell border.

Example:


<table border cellspacing=3>
<table border cellpadding=3>
<table border cellspacing=3 cellpadding=3>

HTML supports a wide range of media formats for sound, music, videos, movies, and animations. Below is the list extensions supported by each media format.

MEDIA TYPEFORMATS SUPPORTED
Imagespng, jpg, jpeg, gif, apng, svg, bmp, bmp ico, png ico
AudioMIDI, RealAudio, WMA, AAC, WAV, Ogg, MP3, MP4
VideoMPEG, AVI, WMV, QuickTime, RealVideo, Flash, Ogg, WebM, MPEG-4 or MP4

Semantic HTML or Semantic Markup is HTML that introduces meaning to the web page rather than just presentation.

<form>, <table>, and <article> are examples of Semantic Elements.

Below are the list of few new Semantic Elements introducted HTML5

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

Tim Berner Lee(Tim Berners-Lee) is known as the father of “World Wide Web”.

This Post Has 2 Comments

  1. Give your feedbacks. It will help us. thank you

  2. It’s an remarkable piece of writing for all the internet viewers; they will
    obtain benefit from it I am sure.

Leave a Reply