Web Designer Interview Questions and Answers for 2024 Web Development

Expect to come across this popular question in junior web designer interview questions. HTML, CSS, JavaScript, and PHP are commonly used languages for web designing. 

• HTML: HTML (Hypertext Markup Language) helps us build the codes required to structure a complete website, including its content. 
• CSS: CSS or Cascading Style Sheets is widely used to change the overall look of web pages. We can also create layouts with it. 
• JavaScript: This programming language is used to make any website responsive. 
• PHP: ‘PHP: Hypertext Preprocessor’ is an open-source scripting language widely used for creating dynamic websites and web applications. Unlike HTML, it runs on the server side. 

This is a frequently asked question in web designer interview questions. Responsive web design is the one that fits the webpage across screens with different resolutions. Responsive pages adapt the size of the screen without losing any details on the page and provide an optimal viewing experience with zero distortion. To build a responsive website, both HTML and CSS will be required to run on the client side.

Responsive web design is important because internet users view web pages on different devices. If a page doesn't offer a good experience, visitors will navigate away, which will increase the bounce rate of the website. Practice more responsive web design interview questions to ace this aspect of web designing.

jQuery functions eases JavaScript usage while making a website responsive. jQuery is a JavaScript library with a handful of pre-build functions that help you easily customize web page designs, add animations, and do much more while writing less code. Some important jQuery functions to know: 

• Toggle function. 
• Hide and show functions. 
• slideUp and slideDown functions. 
• fadeOut and fadeIn functions. 
• slideToggle function. 
• fadeToggle function. 
• Animate function. 
• Image replacement gallery. 
• Chainable transition function. 

HTML tags work like keywords that define how the content (HTML element) will be interpreted by the web browser in order to format and display it. With the help of these tags, a web browser can differentiate between simple and HTML content. HTML tags must be enclosed with '<' and '>'. 

HTML tag examples: <h1>, </h1>, <p>, </p>, <b>, <i>, etc. 

An HTML element is a component of an HTML file that encloses attributes with a start and end tag. An HTML document is made of elements. 

HTML element examples: <p>Hello world!!!</p>, <h1>Web page</h1>, etc.

Web browsers have developed two modes, known as Standards mode and Quirks mode. These modes differentiate how web browsers handle new standards-compliant sites vs. older legacy sites. Browser layout engines now cooperate in one of three modes: quirks mode, almost standards mode, or full standards mode. 

• Quirks Mode: Many web browsers utilize a method called "Quirks mode" to display non-standards-compliant content so that it displays correctly on older browsers. Our page is likely running without a type declaration because the browser is attempting to interpret 'best guess' in Quirks mode, which is combined with a broad knowledge of code that may not be properly organized, non-standard, or written ineffectively. Quirks mode is basically just Internet Explorer 5 backward compatibility. 
• Almost Standards Mode: HTML and CSS standards require the use of the "standards mode," which is by default available in most modern web browsers. It renders HTML and CSS according to their respective DOCTYPEs. It performs syntax checks according to the DOCTYPE declared in the W3C Standard. A properly structured code is welcomed, and the desired actions are carried out. 
• Full Standard Mode: A further compatibility option, called full standard mode or strict mode, which implements a single non-standard behavior for table cell sizes while otherwise adhering to the requirements. 

The way programmers have been modularizing software code for years, we can modularize our websites by using CSS. When our website's code is modularized, it is simpler to keep the design looking fresh and running smoothly. CSS is the current recommended practice and has been for a while. 

• Superior design uniformity. 
• Less difficult to keep up to date and maintain. 
• Simple syntax. 
• Expanded presentation choices. 
• Advantages of Search Engine Optimization. 
• Simplified access. 
• Convenience in adapting presentations to various audiences. 
• Increased download speeds.

Error messages should be brief and to the point to serve their purpose as a warning. For such communications to be promptly understood by the intended recipient, the language used should be straightforward while not eliciting any panic. Readers should not get too alarmed by the message. In theory, error messages should be able to give solutions to that problem. 

Here are some characteristics of a helpful error message: 

• Clearly state that there is an issue. 
• Describe the issue that we are encountering. 
• Try to think of a way to help the user finish the task. 
• Tell them where to get assistance. 
• Do not define the error as a problem. 

Knowledge of media queries is an important technical interview question for UI/UX designers. It is a common practice to use media queries to provide a unique style sheet for each device type, such as laptops, tablets, desktops, and smartphones (iPhone and Android). 

The notion of media types in CSS2 is expanded in CSS3 with the addition of media queries. Earlier, only the type of device was determined, but now, the device's capability is determined with media queries. 

One of the numerous things that media inquiries may check for is: 

• Viewport's height and width. 
• Device width and height. 
• Resolution. 
• Orientation (whether it's a tablet or phone in portrait or landscape). 

Code for adding background color is one of the essential interview questions and answers for UI/UX designers. With the below code, we can add a background color in HTML- 

<body style=”background-color:x”> [Replace 'x' with the color code want to add.] 

The CSS attribute z-index determines the stacking sequence of adjacent HTML elements. In this arrangement, higher-indexed components will be stacked on top of lower-indexed ones. We must keep in mind that the Z index only applies to positioned items, i.e., position: relative, position: absolute, or position: fixed.

z-index example:
div {
position: fixed;
left: 20px;
top: 15px;
z-index: -1;
}

HTML has had a plethora of changes in the past years, all to elevate user experience and write codes easier. Input types are introduced to make the website forms more interactive. Here are some of the input types: 

• DateTime 
• date 
• color 
• time 
• week 
• DateTime-local 
• month 
• tel 
• email 
• URL 
• range 
• search 
• number 

There are five elements present in HTML5 that support media. The elements are- <audio>, <track>, <source>, <video>, and <embed>.

On-the-go image creation is possible using JavaScript and the HTML <canvas> element. The <canvas> element serves just as a container. To create the visuals, we will need to utilize JavaScript. Whether we are looking to create a path, circle, box, some text, or even an image- <canvas> is a helpful option.

This a common question in web designer interviews, don't miss this one. When it comes to defining 2D graphics in XML, SVG is the language of choice. Canvas generates 2D images in real-time using JavaScript. Because SVG is an XML-based format, all DOM elements are accessible inside the SVG context. The element may have event handlers attached to it in JavaScript.

The speed at which a website's pages load depends on different variables. However, a few measures may be taken to cut down significantly on it. Whenever we are optimizing page loading time, consider the following: 

• It is important to optimize and compress our photos. 
• Select a hosting platform that enables optimal performance. 
• Store copies of our web pages in a cache. 
• Use fewer redirects. 
• CSS and JavaScript files should be loaded asynchronously and with defer attributes. 
• Turn on caching in the browser. 
• Use a CDN (Content Delivery Network). 
• Reduce the size of our HTML, JavaScript, and CSS files. 
• Remove unnecessary plugins. 

Using the align declaration in the IMG SRC tag, we can adjust the relative positioning of the images. 

Align comment: 

< IMG SRC = "http://www.xyz.com/chguy.gif" align=top > 

Alternatively, use align=top or align=middle/bottom.

Currently, there are three primary varieties of CSS: 

• Inline CSS: When an HTML element has a CSS property, it is said to use inline CSS. This property is often located in the body section. The style property of an HTML tag is used to provide the type of style. 
• Embedded CSS: This comes in handy whenever a single HTML file has to have its formatting handled in a certain way. The CSS rules must be included in the HTML file's head section; in other words, the CSS must be embedded in the HTML document using the <style> tag. 
• External CSS: An external style sheet contains the style properties for a given element stored in a separate CSS file using tag attributes such as id, class, header, etc. Properties defined in a style sheet (.css) file are referenced from an HTML page through the link tag. Because of this, we only need to define a style for an element once, and it will be used consistently across an entire website. 

In a client-server architecture, the server acts as a central hub for all of the system's resources and services, while clients access them through the web and perform various tasks under the server's direction.

The client makes an information query to the server over the web. The request is received, processed, and then returned to the client by the server. Several users may connect to the server at once. In addition, a client can also establish connections with numerous servers at once, with each server offering unique client services.

Yet another basic web design interview question that discusses grouping in CSS3. Code can be shortened, and websites can load more quickly by grouping similar elements together. It's an approach to making our code easier to understand and use. We may go more granular in our programming with the assistance of grouping. When used, the grouping selector will pick all of the HTML components that have similar style specifications. To reduce the amount of code, it is recommended that the selectors be grouped together. A comma may be used to break selections into groups. 

Grouping example: #grouped g, ul { padding-top: 40px; margin: 1; }

It's no surprise that this one pops up often in website design interview questions. Any basic, intermediate, or advanced-level designer may face problems with website design. Here are the most common problems that we may face anytime: 

• Using outdated web design. 
• Poor tracking, kerning and leading. 
• Scattered website navigation. 
• Outdated SEO strategies. 
• Unmatched color schemes. 
• Complicated user journey. 
• Unoptimized use of images, colors, and icons. 
• Not using the right font. 
• Poor content quality. 
• Nonconformity in fonts can distract visitors. 
• Inaccessible contact details. 
• Usage of generic stock photos. 
• Slow upload time. 
• Unclear and poor-quality images. 
• Unresponsive design. 

In the cascading style sheet (CSS) syntax, WebKit refers to the rendering engine utilized by Safari and Chrome. It is the brains behind our favorite web browser. WebKit code may have to be included in CSS for proper rendering across browsers. 

We should note that the WebKit CSS styles are not supported by Internet Explorer, Firefox, or Opera (though Firefox has its own extensions, which are quite similar). To use the CSS WebKit prefixed styles, a browser must use the WebKit rendering engine. 

Using the Child Selector, we may get all the components that are children of a certain element. As so, it reveals the connection between the two entities. When used on a given parent, the 'element > element selector' will select all the element's children. The parent component is the element to the left of the sign >, and the child component is the element to the right. 

Example: Suppose the HTML tag <ul> is used within a paragraph. Now, the ‘ul’ tag is considered a child of the element ‘paragraph’. To implement this in CSS, the following syntax is used: 

p > ul { font-size:30px; } 

The <border-radius> attribute in CSS3 enables developers to give their elements smooth, rounded edges. This is readily adaptable to cover any angle on either side. 

Border-bottom-right-radius, border-bottom-left-radius, border-top-right-radius, and border-top-left-radius allow us to choose individual values for every one of the four corners. Alternatively, we may make each corner elliptical by giving it a number for two different radii (arc-shaped).

Pagination is the way users may navigate between individual results pages by clicking on "previous", "next," or specific page numbers. 

The page picker on an online store is a straightforward example since it enables customers to see the items over numerous pages without repeatedly scrolling. 

This is readily accomplished with the following CSS3 code: 

/* Pagination links */ 
.pagination a { 
  color: red; 
  float: left; 
  padding: 10px 20px; 
  text-decoration: none; 
  transition: background-color .2s; 
} 
/* Style the active/current link */ 
.pagination a.active { 
  background-color: dodgerblue; 
  color: white; 
} 
/* Add a black background color on mouse-over */ 
.pagination a:hover:not(.active) {background-color: #ddd;}

To implement a transitional effect on any web page element, we will need to employ CSS's transition property. In all properties, the transition consists of the following four characteristics. Now, check out the property values: 

• transition-property: It details which CSS attributes should undergo a transition and how. 
• transition-duration: The time required for a transition animation to finish is defined here. 
• transition-timing-function: The rate of change is defined. 
• transition-delay: The delay before the transition begins or the start time of the transition is specified with this property. 

An element's pseudo-class specifies a unique mode of operation. CSS pseudo-classes are a common method for updating an element's visual appearance in response to a shift in the element's state. As an example, pseudo-class may be used to invert the background and foreground colors of a link when the mouse is hovering over it. 

Other scenarios calling for the deployment of a pseudo-class include: 

• For highlighting the user's position 
• To create blurry animations 
• Adding styles for external links 

This an important web designer interview question that every candidate applying in this domain should be able to answer promptly. To add comments into HTML while making sure the text is not picked up by the browser, use <– and –>. The comment should start with ‘<!–’ and end with ‘–>’. However, you must know that anyone viewing the page source code can see the HTML comments. But they won’t be provided by the browser in any way. 

HTML comment example: <!– The comment. –>

The CSS property float is often used to modify an element's placement and alignment on a website page. You may make a component float to the right or left of its container using the CSS float feature, and the surrounding text and inline components will adapt to fit around it. Despite being isolated from the page's typical flow, the element is nevertheless an integral component of that flow. 

CSS float example: div { float: left; } [The element of div will be positioned at the left side of the screen.] 

A staple in interview questions for web designer freshers, be prepared to answer this one. There are a handful of tools available to aid web designing. These tools are used for creating websites without requiring the knowledge of HTML or CSS, editing codes, designing a website, and creating design prototypes. Some of these tools are: 

• Google Web Designer 
• Webflow 
• Adobe XD 
• Canva 
• InVision Studio 
• Adobe Dreamweaver 
• WordPress 
• Shopify 
• Wix 

When possible, it is best to utilize an external stylesheet rather than duplicating the CSS across many pages in order to control the styling of different pages at once. As opposed to inline CSS, it follows the notion of separation of concerns, which improves the readability and structure of both the CSS and the HTML. It can be used across different HTML files without the need to modify the CSS declarations each time. 

Some other benefits of using an external stylesheet: 

• They provide a centralized style of administration in which changes to one file may be applied uniformly to several. 
• It doesn't matter how often a class is used again. 
• Selectors and grouped elements make it simple to apply styles

XHTML and HTML are both markup languages, but their use cases are different. This common senior web designer interview question is answered below. 

XHTML: Extensible Hypertext Markup Language is what XHTML refers to. Since XHTML combines elements from both XML and HTML, it may be thought of as a subset of XML. When you combine XML with HTML, you get XHTML. XHTML is often seen as an enhanced form of HTML. 

HTML: Hypertext Markup Language (HTML) is the most used language on the web. Websites and their interconnectivity are made possible using HTML. Just so we're clear, HTML is a markup language and not a programming language. HTML sites may be given a fresh design with the help of additional technologies like CSS and JavaScript. 

To select a particular HTML element, the ID selector looks at its ID property. The ID selector is employed to single out a specific element on the page by its unique ID. The hash (#) character followed by an element's ID is used to select that HTML component. The ID selectors are represented as #idName. 

Example: The below-mentioned HTML component will have the ID selector- #footer. 

<div id=“footer”> It is the footer </div> 

Object-oriented representation of HTML and XML texts is done using the Document Object Model (DOM), a platform-independent programming interface. It specifies how documents are organized and how they may be retrieved. Developers are given complete control over every aspect of a document with DOM, including its layout, formatting, and content. The Document Object Model (DOM) provides a hierarchical representation of a website for the convenience of both programmers and website visitors.  

Each node in this tree represents a section of the document, and this tree is processed as if it were an object. Every branch culminates in a node, and each node has its own set of things to store. When a page is loaded into a browser, its HTML and CSS are parsed to create the Document Object Model (DOM), which is then used to render the page.

If we are building a website, utilize H1 tags as much as you want; no upper or lower limit exists. H1 tags are a fantastic method to provide hierarchy to a page, making it easier for both humans and search engines to determine which content belongs under which headings. However, as they are read by computers and web crawlers, H1 tags should be placed on web pages. Nonetheless, if you overuse H1 tags, it might hurt the website's SEO.

Any set of web designer interview questions and answers should consist of a clear idea of semantic HTML. By "semantic HTML," we mean tags that provide clear indications of their intended function to both the coder and the browser. They make an HTML page more than simply a pretty display by lending it context. The elements in semantic HTML indicate the meaning of the content being sent. HTML tags with semantic value specify their content precisely, making them accessible to both people and computers. 

The <header> and <footer> tags are some examples of semantic elements since they specify the context in which they are to be used and the data type of the material they contain. New semantic components included in HTML5 are: 

<details>, <article>, <figure>, <figcaption>, <section>, <mark>, <time>, <summary>. 

The visibility: hidden property hides the element, but it takes up space in the layout. The element will be hidden from view but not the page flow.

On the other hand, display: none eliminates the element from the document and does not take up any space. Here, the tag is removed from the normal flow of the page, which enables other elements to fill it in.

The first component of every CSS Rule is a selector. It's a sequence of nouns and verbs that specifies to the browser what HTML tags must be picked out and given the values for their stylesheet properties as defined in the rule itself. Whenever there is a need to apply a style to inline components, a CSS selector is applied in conjunction with a rule. Selectors make it simple to locate and choose HTML elements according to their name, attribute, ID, etc.

A grid system is a tool used in graphic design to help the designers with alignment and layout. This refers to a set of guidelines the designer may follow to ensure everything fits neatly into place. A grid is made up of intersecting vertical and horizontal lines, which serve to organize the page's elements. Websites can benefit from using a grid to arrange their design components in a manner that is both aesthetically pleasing and functional for site visitors. Different variations of grids serve different purposes while designing websites.

It is one of the important interview questions for web designer freshers. To answer this, a class selector in CSS consists of the period (.) followed by the class's name. It picks everything on the page that has the same class property, allowing you to apply separate CSS declarations to them individually. To put it another way, the class selector is what you use to select a certain statement so that you can tweak its HTML tag-assigned style. 

Use of class selector in CSS: 

.exampleclass {font-family: TimesNewRoman; font-size: 30; background: blue;} 
<div class="sampleclass"> 
... 
</div> 

The term "information architecture" (IA) is used to describe the methodical and long-term process of determining how to best organize, structure, and categorize data. It's a method for organizing and labeling data in a straightforward manner, making it easier for people to discover what they need. Innovation is not the only possible outcome of IA; it can also be used to reimagine an already existing design. This is the single most important factor in determining how successfully consumers will be able to navigate your website and stay engaged with its content.

The World Wide Web Consortium (W3C) is an international group that advocates for the advancement of the web. Web Standards are developed there via a collaborative process, including the public, the organization's membership, and a full-time team of specialists from across the globe. Additionally, W3C creates WWW design standards to improve communication and cooperation among the many parties involved in the web's development. W3C is there to steer the evolution of the internet toward its own potential.

In web design and other media, white space is used to visually combine and separate items, highlight a single piece, and redesign content grid or arrangement.

As well as aiding in the marketing concept and adding to aesthetic harmony, whitespace may be used to guide the eye of the user from one component to the next.

Because of this, the site is neat and organized, with content that visitors will like.

When we use HTML5 video to embed a clip on a website (instead of a video-hosting service like YouTube), the site hosting the video is responsible for delivering it in the right format that the user's browser can understand and play. Major web browsers, software platforms, and devices all presently accept the MP4 video standard incorporating MPEG4 or h.264 compressions. Backups of the clip in OGV and WebM forms are useful for the Firefox browser and certain Android devices that can't play MP4 movies.

The only difference between these events is their time of execution. An advanced web designer must have knowledge of it. That’s why we consider it to be one of the most important senior web designer interview questions.

The <window.onload> event gets executed only when all of a page's CSS and image styles are fully loaded. There is a little lag in page rendering because of the event. The DOM initialization is the sole prerequisite for the <onDocumentReady> event to take effect. It ensures zero delays in action.

The term "type conversion" refers to the process of changing one data type into another. When a scripting language like JavaScript or a compiled language like C++ automatically transforms data types, this is called an implicit type conversion. In order for a function or operator to get the desired results, it may be necessary to perform a type conversion, like converting a string to a number or an object to a boolean, and so forth.

The term "scope of variables" describes how widely a given variable may be used in the code. 

Let us say that you perform two distinct roles. In function 1, you define a variable. Then you go to the subsequent function, which is function 2. Now, you can use the variable created in Function 1 in Function 2. A JavaScript variable's scope is the area of code in which it can be used. 

The scopes of JavaScript variables are as follows: 

Global Scope: A variable with global scope is one that has been defined outside of a function. 

Example: 

var globalVariable = "This is a Global variable"; 
// Code present here can use globalVariable 
function myFunction() { 
// Code present here can also use globalVariable 
} 

Local Scope: A variable with the local scope is one that has been declared inside a function. 

Example: 

// Code present here cannot use localVariable 
function myFunction() { 
var localVariable = "This is a local variable"; 
// Code present here can use localVariable 
} 

Block Scope: The "block scope" variables defined inside a certain block (denoted by {}) are inaccessible from outside of that block. 

Function Scope: When you write a function in JavaScript, you are really establishing a new scope. 

JavaScript comments are used to provide context and improve the readability of JavaScript code. To avoid executing potentially problematic code while experimenting with alternatives, JavaScript comments can be used. Code comments can be added in two different ways in JavaScript; that are single-line and multi-line comments. 

Single-line comment: “//” - it is used to insert single-line comments. 

Example: 

//This is a single-line comment 
Multi-line comment: “/* */” is used for adding multi-line comments. 

Example: 

/* This 
is a 
multi-line 
comment*/ 

Undefined: Whenever a variable is defined but not given a value, this situation arises. 'Undefined' is not a valid keyword. 

Example: 

var stay; 
undefined 
console.log(stay) 

Undeclared: It happens when we attempt to use a variable that hasn't been defined using the var or const keywords or hasn't been initialized. 

Example: 

//ReferenceError: myVariable is not defined 
console.log(myVariable) 

A must-know for anyone heading into a web design interview, this question is frequently asked in web design Interview Questions. The following script can help you submit a form in JavaScript after furnishing all the elements like the anchor tag and one click. 

Script: 

document.forms[0].submit()

[The value ‘0’ defines the index of the JavaScript form.]

The <this> keyword in JavaScript indicates the current object in use. The method of execution determines which entity is accessed (called or used). Depending on the usage, the <this> keyword may designate a variety of elements. But inside an object method, <this> denotes the object.

This is another important senior web designer interview question. There is a boolean element called defer. Setting this delay attribute means the script will be downloaded in parallel with page processing but will not be run until after page parsing is complete. That means its primary function is to postpone running the page's JavaScript until the parser has finished loading and initializing the page.

This is a commonly asked technical interview question for UI/UX designers. Any competent site designer must be able to weigh and comprehend these dissimilar aspects- what the designers say about the aspects they consider most important while designing. If you are designing a site for a huge financial institution, for instance, you may prioritize safety above search engine optimization (SEO). In contrast, online publications have a heightened focus on speed and SEO.

If a jQuery event handler produces a false boolean value, the event will not proceed with its corresponding function, and the handler will be removed from future execution.

The goal of CSS3, the current version of the Cascading Style Sheets language, is to expand on the capabilities of CSS2. It introduces several improvements and modifications, including the flexible box, multi-column, and grid layouts, as well as transitions, gradients, shadows, rounded corners, and animations. Previously, creative HTML hacks and applications like Photoshop were required to achieve the same level of visual flair as is now possible directly inside a web browser using CSS3.  

What makes CSS3 so special is how well it handles, reducing the need for images and code that used to be integral parts of your site's structure. This means less work for your web server and quicker page loads. One of the common topics of discussion in web design interviews is a list of the most important new features included in CSS3. Have a look- 

• Superior animation. 
• Layouts with many columns. 
• Various Gradient and Background Options. 
• Opacity. 
• Selectors. 
• Rounded corner. 

In this Agile software design method, pair programming, two designers work together on a single computer. This practice has its roots in the Extreme programming (XP) methodology. Two individuals collaborate on the design, development, and testing of user stories. This method is widely used in a fast-paced work environment. That is why pair programming is an important segment in our web designer interview questions and answers set for experienced designers.

Wrapping objects in their jQuery equivalents is done using the $() function. This is performed so that users can access all of the jQuery object's methods. We must also know that selectors may also be provided to the $() method, which will return a jQuery object containing the relevant DOM components.

The term "Content Delivery Network" (CDN) refers to a global network of servers that stores data in a centralized location for later retrieval. With a content delivery network (CDN), files may be sent at a greater speed from a server that is geographically closer to the client than your web server could be, thereby cutting down on the time it takes for the page to load. 

Because of the many benefits they provide, CDNs are commonly employed in jQuery. Here are the benefits: 

• Using a CDN significantly lessens the pressure on the hosting machine. 
• Optimizations have made jQuery frameworks more quickly accessible. 
• Significant bandwidth reductions can be achieved by using CDN. 
• To further aid with speedy page loads, CDNs may store copies of frequently visited pages in a cache.

There are two distinct types of jQuery content delivery networks (CDN): pull-style and reverse proxy. Even though the jQuery UI CDN stores a replica of the website's content, including media, requests are still sent to the web server in a conventional pull. Alternatively, a reverse proxy will take quick action upon receiving a request.

The following snippet demonstrates how to use the body background attribute to provide the image that will be used as the backdrop of a web page. 

</head>tag. 
<body background= "picture.gif"> 

The background picture can be fixed so that it remains constant while scrolling the browser. This may be done by including the 'bgproperties' element in your HTML code. 

<body background = "picture.gif"bgproperties="fixed">

Web designers can use Dreamweaver templates to separate editable and uneditable sections of a website. All web pages that make use of this template will automatically reflect the changes made on it. When using Dreamweaver templates, you can ensure that every page of your site has the same feel and design. We may make changes to all of our site's pages at once with it.

Although these tags may be used to change the appearance of the text (using EM to make it italic, STRONG to make it bold, and SMALL to make it smaller), that is not their major function, and you shouldn't use them only to make your writing seem a certain way. These tags provide a distinctive design impact not found in others (<b>). Here are the functions of these tags: 

• <em> tag: For marking up any emphasized text. 
• <strong> tag: Mostly used in headings, titles, as well as paragraphs to put stress over the word of greatest importance. 
• <small> tag: It is commonly used for side comments, disclaimers, clarifications, etc. 

Commonly the first line of code in an HTML or XHTML page is known as the DOCTYPE declaration that specifies the document type for the file. It's not a tag or component but rather a mechanism for telling browsers what edition of HTML or another markup language has been used to create the current page. Each HTML file needs a declaration of its document type to work properly. 

Example: 

< !DOCTYPE html > 
Example 
<!DOCTYPE html> 
<html>  
<body> 
    <h1>This is a Heading</h1> 
    <h2>This is HTML5 Doctype</h2> 
</body> 
</html>