How an HTML lab viva actually goes
In most universities the web technology or internet programming lab exam has three parts: you write and execute one program from the list, the examiner checks the output on your screen, and then the viva starts. The internal examiner knows your batch; the external examiner, appointed by the university for the end-semester practical, does not, and reads your record while asking. Viva marks are a component of the practical marks under your university's scheme and usually decide who gets full marks, so a correct program with a blank viva is a half score.
The questions follow a pattern. First, something from the program you just ran ('why did you use the method post here?'). Second, a definition-level basic ('what is the difference between id and class?'). Third, a what-if ('if I remove the doctype line, what changes?'). Fourth, if you are doing well, one deeper question on HTML5 or CSS layout. Answer each in two to four spoken sentences: name the concept, say what it does, give one example, stop.
Before you read the questions
Open your own lab record next to this page. For every question below, find the line in your own program where the concept appears. Examiners ask from your record, not from a question bank, and 'I used it in experiment four for the login form' is the answer that scores.
HTML basics: the first ten minutes of every viva
What is HTML?
HTML is HyperText Markup Language, the standard language for structuring content on a web page. It is a markup language, not a programming language: it describes headings, paragraphs, links and images with elements, and the browser renders them. The current version is HTML5.
Examiners listen for 'markup, not programming'. Call it a programming language and the next question is 'then write a loop in it'.
Say this answer out loudWhat is the difference between a tag, an element and an attribute?
A tag is the marker in angle brackets, like the opening and closing p tags. An element is the whole thing: opening tag, content and closing tag. An attribute is extra information inside the opening tag, like href on an anchor, written as name equals value.
Say this answer out loudWhat is the basic structure of an HTML document?
The doctype declaration, then the html element with two children: head and body. The head holds metadata such as the title, character set and stylesheet links; the body holds everything the user sees. In my programs I wrote the title and meta charset before any content.
Say this answer out loudWhat does the DOCTYPE declaration do?
It tells the browser which version of HTML the page uses so it renders in standards mode. In HTML5 it is just doctype html, with no DTD URL as in HTML4. Without it the browser falls into quirks mode, where box sizes and some CSS behave in old, inconsistent ways.
Say this answer out loudWhat is the difference between the head and body sections?
The head contains information about the page that is not displayed as content: the title on the browser tab, meta tags, CSS links and scripts. The body contains the visible content: text, images, forms and tables. The title is the one head element the user actually sees.
Say this answer out loudWhat are block-level and inline elements? Give examples.
A block-level element starts on a new line and takes the full available width, like div, p, h1 and ul. An inline element sits within a line and takes only its content's width, like span, a, strong and img. The CSS display property changes this, for example inline list items for a horizontal menu.
Say this answer out loudWhat are empty or void elements?
Elements that have no content and no closing tag: br for a line break, hr for a rule, img, input, meta and link. In HTML5 the trailing slash is optional. The browser ignores anything you try to put inside them.
Say this answer out loudHow do you create a hyperlink, and what does target blank do?
With the anchor element: the a tag with an href attribute holding the URL, and the clickable text between the tags. Target equals underscore blank opens the link in a new tab. For external links I add rel noopener so the new page cannot access the window that opened it.
Say this answer out loudWhat is the difference between an absolute and a relative URL?
An absolute URL has the full address with protocol and domain. A relative URL is given relative to the current page, like images slash logo dot png. In the lab I used relative paths so the project still works when the folder is copied to another machine.
Say this answer out loudHow do you insert an image, and why is the alt attribute important?
With the img element: src gives the file path and alt gives a text description. Alt text is shown if the image fails to load and is read out by screen readers, so it matters for accessibility. Width and height are better set in CSS than as attributes.
Say this answer out loudWhat are the three kinds of lists in HTML?
Unordered lists with ul and li, which show bullets; ordered lists with ol and li, which show numbers controlled by the type and start attributes; and description lists with dl, dt for the term and dd for the description. I used an unordered list for the navigation menu in my college home page.
Say this answer out loudWhat is the difference between id and class?
An id is unique: only one element on the page should have it, and I can jump to it with a hash link or select it with getElementById. A class can be shared by many elements and one element can have several classes, so classes are for styling groups. An id selector also beats a class in CSS specificity.
Say this answer out loudWhat are HTML entities?
Codes starting with an ampersand and ending with a semicolon that show characters with special meaning in HTML or not on the keyboard. For example ampersand l t semicolon shows a less-than sign, ampersand n b s p semicolon is a non-breaking space, and ampersand copy semicolon is the copyright symbol.
Say this answer out loudForms and tables: the questions from your registration-form program
How do you create a table in HTML?
With the table element containing rows, tr, and inside each row header cells, th, or data cells, td. I group the header row in thead and data rows in tbody, and add a caption for the title. Borders and spacing come from CSS, not the old border attribute.
Say this answer out loudWhat do rowspan and colspan do?
Colspan stretches one cell across more than one column; rowspan stretches it down across more than one row. In my timetable program I used colspan equals two on the lunch-break cell so it covered two periods, and rowspan on the day name to run down the whole row group.
Say this answer out loudWhat is the difference between th and td?
Th is a header cell: bold and centred by default, and screen readers use it to announce the column or row heading for each data cell. Td is an ordinary data cell. Using th properly is a semantic choice, not just a styling one.
Say this answer out loudWhat is a form, and what do the action and method attributes do?
A form collects user input and sends it to a server. Action is the URL that receives the data; method is how it is sent, get in the URL or post in the request body. In the lab my action pointed to a PHP file that read the submitted values.
Say this answer out loudWhat is the difference between GET and POST?
Get puts the form data in the URL as a query string, so it is visible, bookmarkable and limited in length; it suits searches. Post sends the data in the request body, hidden from the URL and able to carry larger data and files; it suits logins, registrations and anything that changes data on the server.
Say this answer out loudName some input types that HTML5 added.
Email, url, number, range, date, time, color, search and tel. They give the right keyboard on mobile and built-in validation: an email field will not submit without an at sign, and a number field with min and max rejects values outside the range.
Say this answer out loudWhat is the difference between a radio button and a checkbox?
Radio buttons sharing the same name attribute form a group where only one can be selected, like a payment mode. Checkboxes are independent, so the user can tick several, like hobbies. Both send their value attribute to the server when checked.
Say this answer out loudWhat is the label element, and how do you connect it to an input?
A label is the visible text for a form control. I give the input an id and set the label's for attribute to the same id, or wrap the input inside the label. Then clicking the text focuses the control, and screen readers read the label with the field.
Say this answer out loudWhat do the required and value attributes do?
Required stops the form submitting until the field is filled, which is client-side validation without any JavaScript. Value is the initial content of the field and is what gets submitted if the user changes nothing. On a checkbox or radio, value is what the server receives when it is ticked.
Say this answer out loudWhen do you use textarea, select and option?
Textarea is a multi-line text box for an address or feedback, sized with rows and cols. Select creates a dropdown and each option inside is one choice; the selected attribute pre-picks one. For a long list such as the states of India a select is better than thirty radio buttons.
Say this answer out loudSemantic HTML5: the questions that separate a 7 from a 10
What is semantic HTML and why does it matter?
Semantic HTML uses elements whose names describe their meaning, like nav, article and footer, instead of divs everywhere. It matters because search engines, screen readers and other developers can understand the page structure without reading the CSS.
Say this answer out loudName the main semantic elements introduced in HTML5.
Header, nav, main, section, article, aside, footer, figure and figcaption, plus time and mark for inline meaning. In my college website program I used header for the banner, nav for the menu, section for departments and footer for contact details.
Say this answer out loudWhat is the difference between section, article and div?
An article is self-contained content that makes sense on its own, like a news post or a product card. A section is a thematic grouping inside a page, usually with its own heading. A div has no meaning; it is only a container for styling when no semantic element fits.
Say this answer out loudWhat are the main differences between HTML4 and HTML5?
HTML5 added semantic elements, native audio and video, canvas and inline SVG, new form input types with validation, local and session storage, and APIs like geolocation. It simplified the doctype and dropped presentational tags like font and center in favour of CSS.
Say this answer out loudHow do you embed audio or video in HTML5?
With the audio or video element and a src attribute, or source elements inside it for multiple formats like MP4 and WebM so every browser can play one. The controls attribute shows the play bar; autoplay, loop and muted are also available. Before HTML5 this needed a plugin.
Say this answer out loudWhat is the difference between canvas and SVG?
Canvas is a bitmap surface drawn by JavaScript: once drawn, shapes are just pixels, not objects. SVG is vector graphics in XML, so every shape is a DOM element that can be styled, scaled without blurring and given a click event. Charts and games use canvas; icons and logos use SVG.
Say this answer out loudWhat is the meta viewport tag and why do mobile pages need it?
A meta tag in the head with name viewport and content width equals device-width, initial-scale equals one. Without it a phone renders the page at desktop width and shrinks it, so the text is tiny. With it the page uses the real screen width and my media queries work.
Say this answer out loudWhat is an iframe, and what is the risk of using one?
An iframe embeds another HTML page inside the current page, such as a Google Map or a YouTube video. The embedded page is a separate document, often from another site, so it can be misused for clickjacking; the sandbox attribute and the server's frame headers limit this.
Say this answer out loudWhat is the difference between localStorage, sessionStorage and cookies?
All three store data in the browser. LocalStorage keeps key-value pairs with no expiry; sessionStorage keeps them only until the tab closes. Cookies are small, have an expiry and are sent to the server with every request, which is why logins use cookies and a theme preference uses localStorage.
Say this answer out loudCSS basics: asked in every HTML and CSS viva
What is CSS, and what are the three ways to apply it?
CSS is Cascading Style Sheets, the language that controls how HTML looks: colours, fonts, spacing and layout. It can be applied inline with the style attribute, internally in a style element in the head, or externally in a dot css file linked with the link tag. External is preferred because one file styles the whole site.
Say this answer out loudIf inline, internal and external styles conflict, which one wins?
Inline wins, because it has the highest specificity. Between internal and external, whichever is declared later wins if the selectors are equal. Inside a stylesheet, an id beats a class, a class beats an element, and the important declaration overrides everything, which is why I avoid it.
Say this answer out loudExplain the CSS box model.
Every element is a box with four layers: content, then padding, then border, then margin. By default width applies only to the content, so padding and border add to the total size; setting box-sizing to border-box makes width include them, which I set globally in my stylesheets.
Say this answer out loudWhat is the difference between margin and padding?
Padding is the space between the content and the border, inside the element, and it takes the background colour. Margin is the space outside the border between this element and its neighbours, and it is transparent. Vertical margins between blocks can collapse into one; padding never collapses.
Say this answer out loudWhat are CSS selectors? Name a few types.
A selector picks which elements a rule applies to: element selectors like p, class selectors with a dot, id selectors with a hash, descendant selectors like nav a, attribute selectors, and pseudo-classes like hover and first-child. A comma groups several selectors under one rule.
Say this answer out loudWhat is the difference between display none and visibility hidden?
Display none removes the element from the layout, so it takes no space and other elements move up. Visibility hidden makes it invisible but keeps its space, leaving a gap. For a dropdown menu I toggle display; for a slot that must keep its size I use visibility.
Say this answer out loudExplain the values of the position property.
Static is normal flow. Relative shifts the element from its normal spot with top or left while keeping its space. Absolute removes it from flow and positions it against the nearest positioned ancestor. Fixed positions it against the viewport so it stays on scroll. Sticky acts as relative until a scroll threshold, then as fixed.
Say this answer out loudWhat is flexbox, and when would you use grid instead?
Flexbox is one-dimensional: a container with display flex lays its children in a row or column, and justify-content and align-items control spacing and alignment. Grid is two-dimensional, rows and columns at once. I used flex for the navigation bar and grid for the three-column course cards.
Say this answer out loudWhat is a media query?
A media query applies CSS rules only when a condition is true, usually screen width, for example at media max-width 600 pixels. It is the basis of responsive design: the same HTML gets one column on a phone and three on a desktop. It needs the viewport meta tag to work on mobile.
Say this answer out loudWhat is the difference between px, em, rem and percent?
Px is a fixed pixel size. Em is relative to the parent's font size, so it compounds in nested elements. Rem is relative to the root html font size, which makes it predictable for spacing and type. Percent is relative to the parent's size and is used for widths in fluid layouts.
Say this answer out loudWhat is Bootstrap, and how is it different from writing CSS yourself?
Bootstrap is a CSS and JavaScript framework with ready-made classes for the grid, buttons, forms and navigation, so a responsive page is built by adding class names. The trade-off is a larger download and pages that look alike. In the lab I used its grid and wrote custom CSS for colours.
Say this answer out loudThe follow-ups an external examiner asks after your first answer
Once you answer a basic correctly, a good examiner pushes one level deeper on the same point to see whether you understand it or memorised it. These are the pushes that appear in almost every web technology viva, with the answers that end the line of questioning.
If I delete the doctype line from your program, what will change?
The page still displays, but the browser switches to quirks mode. The visible effects are in CSS: widths include padding differently, table font sizes are not inherited, and layouts shift by a few pixels. Nothing breaks dramatically, but the page is no longer rendered to the standard.
Say this answer out loudYour image shows a broken icon. What will you check first?
The src path first: whether the file is in the folder I referenced and whether the case of the file name matches, because Linux servers are case sensitive. Then the extension, jpg versus jpeg. The alt text appearing tells me the path, not the img tag, is wrong.
Say this answer out loudYour stylesheet is linked but the styles are not applying. Why?
I would check four things in order: the href path in the link tag, whether rel equals stylesheet is present, whether the browser cache is serving the old file, and whether a more specific selector or an inline style is overriding my rule. The developer tools show which rule won.
Say this answer out loudHow is HTML different from XML and XHTML?
XML is a general markup language for data with strict rules: every tag closed, case-sensitive, and you define your own tags. XHTML is HTML rewritten under XML rules, so a missing closing tag is an error. HTML5 is forgiving: browsers correct unclosed tags and ignore case.
Say this answer out loudWhere should JavaScript go in the page, and why at the end of the body?
A script tag can go in the head or the body. Placing it just before the closing body tag means the HTML above is already parsed, so the elements the script refers to exist and the page is not blank while the script downloads. The modern alternative is the defer attribute on a script in the head.
Say this answer out loudWhat is the DOM?
The Document Object Model is the tree of objects the browser builds from the HTML, with the document at the root and every element, attribute and text as nodes. JavaScript changes the page by changing this tree, for example getElementById and then setting innerText. CSS is applied to the same tree.
Say this answer out loudHow an external examiner probes, and how to handle it
- They point at your record, not a question bank. The first question is almost always 'explain this line' on the program you just ran, so re-read your own code while the previous student is being examined.
- They ask 'why' after every 'what'. 'What is post?' is followed by 'why post and not get here?'. Prepare the reason for every attribute you used.
- They change one thing and ask what happens: remove the doctype, change display to inline, delete the name attribute on the radio buttons. If you can predict the change you understand the concept.
- They test whether you copied. If your record has Bootstrap classes, they ask what col-md-6 means. If it has a jQuery line, they ask what the dollar sign is. Know every line you submitted.
- They listen for precise words: tag versus element, attribute versus property, padding versus margin. Mixing these up costs a mark even when the idea is right.
- They stop you when you ramble. A two-sentence answer followed by silence invites the next question; a two-minute answer invites an interruption.
How to say 'I don't know' without losing the viva
Never bluff a definition; one wrong one makes the examiner doubt your correct ones. Say: 'Sir, I am not sure of the exact definition, but I used it in experiment three to do X, and I think it works because Y.' That shows honesty plus partial knowledge, and most examiners then give a hint or move on. If you have no idea at all, say 'I don't know this one, sir' clearly; a quick honest pass costs less than a slow wrong answer.
What the ExamPilot AI examiner checks when you practise
In an ExamPilot CS/IT lab viva session, the AI examiner opens with a question about the program you tell it you wrote, then follows the same pattern: a line from your program, a basic, a what-if and one deeper question, for about twelve minutes. You answer out loud, exactly as in the lab. It interrupts when you ramble and probes when your answer is vague, which is the part no written question bank gives you.
You get a transcript, the questions you missed, and a shorter version of each of your answers. Run it the evening before the lab exam with your record open. Start with the CS/IT lab viva mock; the same examiner covers Python and C viva questions and DBMS and OS viva questions.
The night before: a 30-minute checklist
- 1
Re-run every program in your record
Open each file, run it, and read it line by line. Mark any line you cannot explain and look it up now; that line is the one the examiner will point at.
- 2
Say the basics out loud
Cover the basics section above without reading: HTML, tag versus element, document structure, doctype, block versus inline, id versus class, lists, links, images. If you cannot say it in three sentences, you do not have it yet.
- 3
Prepare the 'why' for your own form and table
Why post, why these input types, why a label, why colspan here, why the stylesheet is external. These questions are tied to your record and carry the most marks.
- 4
Do one what-if per topic
Remove the doctype, change the display property, delete the name on a radio group, give two elements the same id. Predict the result, then try it in the browser.
- 5
Run one spoken mock
Twelve minutes with the AI examiner, out loud. Read the transcript, shorten your long answers, and note the two topics you fumbled. Those two are your morning revision.
For the project viva at the end of the year, where questions move from syntax to design decisions, see final-year project viva questions. For the pattern of lab, project and semester vivas across branches, start with the engineering viva questions hub. If your HTML questions come in a campus placement technical round rather than a lab, pair this page with interview questions and answers for freshers.
Practise out loud
Practise your HTML viva out loud
The AI examiner opens your web technology program, asks a basic, a what-if and a deeper CSS question, and scores correctness, brevity and how you handle what you do not know.
Engineering Viva · CS / IT lab viva
Frequently asked questions
- What are the most commonly asked HTML viva questions?
- The same ten come up in nearly every lab: what is HTML, tag versus element, structure of an HTML document, what the doctype does, block versus inline elements, id versus class, how to create a table and a form, get versus post, the three ways to apply CSS, and the box model. After those, the examiner asks from your own record, so know every line you wrote.
- How long should a viva answer be?
- Two to four sentences, about twenty to forty seconds. Name the concept, say what it does, give one example from your own program, and stop. Examiners see ten to fifteen students an hour; a long answer gets interrupted and the interruption is what they remember. If they want more, they ask a follow-up, and that is your chance to go deeper.
- Are CSS questions asked in an HTML viva?
- Yes, almost always, because the lab is usually titled web technology or internet programming and the programs use stylesheets. Expect the three ways to apply CSS, which one has priority, the box model, margin versus padding, selectors, display versus visibility, position values and media queries. If your record uses Bootstrap, expect a question on what its grid classes mean.
- What should I say if I do not know the answer in a viva?
- Say so in one sentence and offer what you do know: 'I am not sure of the exact definition, but I used it in experiment three for the login form and I think it does X.' Examiners mark honesty with partial knowledge above a confident wrong answer, and a quick pass lets them move to a question you can score on. Never invent a definition.
- Is the HTML viva the same for BCA, B.Sc and B.Tech students?
- The question set is nearly identical because the lab syllabus is: document structure, forms, tables, lists, CSS and some HTML5. B.Tech CSE and IT labs go further into JavaScript validation and the DOM; BCA and B.Sc labs often spend more time on forms, frames and Bootstrap. In all three the examiner asks from your own record first.
- How can I practise HTML viva questions out loud?
- Reading answers is not the same as saying them under questioning. Run an ExamPilot CS/IT lab viva session: the AI examiner asks about the program you name, follows up with a what-if, interrupts when you ramble and gives you a transcript with the questions you missed. Two twelve-minute sessions the night before the lab exam cover the basics, forms, CSS and the follow-ups on this page.