HTML

Q1.  Heading tags in HTML and why <h1> tag is used only one time on a page?

Ans:  There are six types of heading tags available in HTML:

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

 

<h1> tag is used only one time in a page because <h1> is used for the main heading and the main heading can not be repeatable.

If we repeat the main heading on a page it creates a problem for search engines to understand your page.

For example: in a notebook, if we write the main heading 2 or more times on a page then the other person can not understand what the topic is written in a notebook.

Q2. Formatting tags in HTML?

Ans: Formatting tags in  HTML:

1. bold

2. italic

3. superscript

4. subscript

5. strike


1. bold:
to make text bold there are two tags available in HTML:

<b></b>: It is used to make text bold which is not important or not a searchable word.

Example: <p><b>Regular Class</b></p>

 

<strong></strong>: it is used to make text bold which is important and a searchable work. Digital marketing executive uses strong tags to highlight targeted keywords.

Example: <p><strong>Best Web Development Institute in Rohini</strong></p>

2. italic: to make text italic there are two tags available in HTML:

<i><i>: It is used to make text italic which is not important or not a searchable word.

Example: <p><i>Regular Class</i></p>


<em></em>:
It is used to make text italic which is important or a searchable word.

Example:  <p><em>Best Web Development Institute in Rohini</em></p>

 


3. superscript:
<sup></sup> tag is used to make text superscript.

Example:  <p>10<sup>th</sup></p>

 

4. subscript: <sub></sub> tag is used to make text subscript.

Example: <p>CO<sub>2</sub></p>

 

5. strike: <strike></strike> tag is used to make a cut on a text. It is generally used in eCommerce websites to show regular and sale prices.

Example:  <p>Rs 2000 <strike>4000</strike></p>


Q3. Difference between <b> tag and <strong>  tag?

Ans: There are two tags available in HTML <b></b> and <strong></strong> tag to make text bold, mostly beginners got confused in these two tags because it produce same output. Design point of view there is no difference between them but from digital marketing point of view there is a difference see the difference below:

<b></b>: It is used to make text bold which is not important or not a searchable word.

Example: <p><b>Regular Class</b></p>

 

<strong></strong>: it is used to make text bold which is important and a searchable work. Digital marketing executive uses strong tags to highlight targeted keywords.

Example: <p><strong>Best Web Development Institute in Rohini</strong></p>


Q4. Use of alt attribute in <img> tag?

Ans: alt attribute in an image tag is very important for search engines and for blind people who use a screen reader to read text.

The search engines cannot read our media files such as images, audio, and video, so in digital marketing, we use the alt attributes in an image tag to make understand search engines for better results. Most digital marketing executive uses searchable keywords in the alt attribute.

Alt is also helpful for blind people who use a screen reader to read text.


Q5. Links in HTML, Types of links, and Use of target=”_blank” attribute?

Ans: Links in HTML are used to link website pages such as homepage, about page contact page connect together.

In a HTML <a> tag is used to link pages.

Example:

<a href=”about.html”>About us</a>

 

href: is called hyper reference here we put the name of the page which we want to link.

 

We can use the link by the following:

1. text link

2. image link

3. email link

4. phone link

 


1. text link:
when we give a link on a text is called a text link.

Example:

<a href=”about.html”>About us</a>


2. image link:
when we use the link on the image is called an image link.

Example:

<a href=”contact.html”><img src=”images/contact-icon.png”></a>


3. email link:
when we use the link on email is called an email link.

Example:

<a href=”[email protected]”>[email protected]</a>


4. phone link:
When we use the link on the phone number is called a phone link.

Example:

<a href=”tel:7838370333”>7838370333</a>

 

Types of links

There are two types of links available in HTML:

1. internal link

2. external link

 

Internal link: Internal link means when we connect our website pages together such as home page, about page, contact page, etc.

External link: External link means when we connect any outside link such as social media link our Facebook page link on a website, or partner website link that is called external link.

 

Use of target=”_blank” attribute

Target _blank is used to open a page on a new tab.


Q6. How to embed Google Map on the contact page?

Ans: There are some steps to use google map on a webpage:

  1. Go to a google map link
  2. Search address whatever location you want to use
  3. Click on the share link
  4. Click on the embed link
  5. Copy iframe code
  6. Paste in your HTML page.



Q7. How to embed YouTube Video on Webpage?

Ans: There are some steps to use youtube video on a webpage:

  1. Go to the youtube link
  2. Search video whatever you want to use
  3. Click on the share link
  4. Click on embed
  5. Copy iframe code
  6. Paste in your HTML page



Q8. How to link external CSS file in HTML?

Ans: To link CSS file in a HTML page there is following syntax:

<link rel=”stylesheet” href=”foldername/filename”>

Example:

<link rel=”stylesheet” href=”css/style.css”>



Q9. Span tag in HTML?

Ans: <span> tag is used to edit a part of an element like changing the color of a single word.

Example:

<h1>Web <span style=”red”>Development</span></h1>

Here in this example, I have used inline CSS; you can use internal or external CSS whatever you want by using class or id.

 

Q10. New form inputs and validation in HTML?

Ans: HTML5 introduce some of the following new inputs:

<input type=”color”>

<input type=”date”>

<input type=”time”>

<input type=”url”>

<input type=”number”>

Validation in HTML:

required: Required attribute to make input required.

min: it is used in number input to set minimum value.

max: It is used in number input to set maximum value.

maxlength: It is used to set the maximum length of text.



Q11. Semantic Tags in HTML5?

Ans: Semantic tags is useful for designer and for the browser to understand website code easily. Actually before HTML5 designer uses the non-semantic tag <div> to create a design but it is not understandable after a long time for designer because it does not make any sense.

So HTML5 introduced Semantic elements to make sense or give a proper meaning to design. There are commonly used semantic tags following:

  1. <header>
  2. <section>
  3. <nav>
  4. <footer>
  5. <aside>

Q12. HTML5 Features?

Ans: HTML5 Features are following:

Drag & drop:  This feature is used to make elements draggable and dropable. It is used in advanced UI. Example: wix.com, vistaprint.com

Local storage: This feature is used to save user data in a browser like a cache. It is used in web applications and eCommerce websites.

Geolocation: This feature is used to find a current location or anything which is related to a location such as show location on the map, search location on the dropdown, etc. It is used in many websites like ola cabs, swiggy, zomato etc.

New form inputs and validation: HTML5 introduced new form inputs like color input, URL input, date input, and validation like required, maxlength, min, max.

Canvas & SVG: Canvas is used to draw something, it is used to draw a shape like a curve shape or any other shape whatever you want.

SVG: SVG stands for scalable vector graphics it is an extension of an image like .jpg,.png. if we use a .svg image then it will not pixelate if we zoom the image on large scale and it is editable also in coding, we can easily edit SVG images in code.

Semantic Tags: Semantic tags give proper meaning to the designer and browser, some of the semantic tags are following:

<header>,<footer>,<section>,<aside>

 

Q13. Advantages of SVG in HTML?

Ans: SVG stands for scalable vector graphics, it is an extension of an image like .jpg, .png, if we use the image in .svg format it will not pixelate if we zoom, Google recommends using SVG format image. It is editable also we can easily edit SVG images in code.

SVG image is created by using Adobe Illustrator software.

Q14. How to use favicon in HTML?

Ans: favicon is a symbol which is located near the title, lets see how we can use in a website:

<link href="foldername/filename" rel="shortcut icon" type="image/png">

Example:

<link href="images/favicon.png" rel="shortcut icon" type="image/png">

To use favicon in a website you should keep in mind the size of favicon should be less than 50px.

Q15. Audio and Video tag in HTML5?

Ans: To embed audio or video in a website HTML5 provide audio and video tag:

To embed audio:

<audio controls>

  <source src="horse.mp3" type="audio/mpeg">

</audio>

 

To embed video:

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

</video>

Q16. How to use copyright symbol in HTML?

Ans: To use copyright symbol we use HTML entities, HTML entities is nothing it is just code to represent a symbol.

<p> &copy; 2022. Web development Institute</p>



Q17. Datalist input in HTML?

Q18. What is an image map?

Ans:  Image map in HTML is used to give hyperlinks on a specified area of an image, it is a very useful feature for designers, it requires a little bit knowledge of math to find coordinates and radius of a circle.

Image map has 3 shapes

  • Circle
  • Polygon
  • Rectangle

 

Example:

<img src="image-map-in-html.jpg" usemap="#workmap" width="1000" height="667">

<map name="workmap">

<area shape="rect" coords="300,103,710,545" alt="Computer" href="https://www.apple.com/in/macbook-pro/" target="_blank">

 

<area shape="rect" coords="720,337,800,434" alt="Phone" href="https://www.apple.com/in/shop/buy-iphone/iphone-13" target="_blank">

 

<area shape="circle" coords="854,445,44" alt="Coffee" href="https://www.cafecoffeeday.com/cafe-menu/whats-new" target="_blank">

 

<area shape="rect" coords="0,382,255,500" alt="notebook" href="https://www.cafecoffeeday.com/cafe-menu/whats-new" target="_blank">

</map>

Q19.  Use of table tag in HTML?

Ans: table tag is used in the following:

  • It is used to represent data in tabular format, it is mostly used in web applications.
  • It is used to design a newsletter or email template for email marketing.
  • It is used to design a printable design like invoice design, prescription design, etc whatever has to be printed.

 

I hope these questions will help the fresher designers to crack interviews.

Feel Free To Contact Us

Trending Courses

CodeIgniter

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Advance Digital Marketing

Regular : 6 Months

Fastrack : 3 Months

Crash : 2 Months

React JS

Regular : 45 Days

Fastrack : 25 Days

Crash : 15 Days

Laravel

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Front End Developer

Regular : 6 Months

Fastrack : 4 Months

Crash : 2 Months

Request For Demo