12 questions — Basic to Advanced · Click to expand · + for code & details
HTML stands for HyperText Markup Language.
It is the standard language for creating web pages.
HTML describes the structure and content of a web page using a system of elements represented by tags.
Browsers read HTML documents and render them visually.
HTML is not a programming language — it is a markup language that annotates text so browsers know how to display it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a paragraph of text.</p>
<a href="https://example.com">Visit Example</a>
</body>
</html>| EMP_ID | EMP_NAME | DEPT_ID | SALARY |
|---|---|---|---|
| 101 | Alice Johnson | 10 | 50,000 |
| 102 | Bob Smith | 20 | 62,000 |
| 103 | Carol White | 10 | 55,000 |
| 104 | Dave Brown | 20 | 70,000 |
All 4 rows returned from employees table
HTML stands for HyperText Markup Language.
Block-level elements start on a new line and take up the full width available.
Examples include div, p, h1-h6, ul, ol, table, form, and section.
Inline elements do not start on a new line and only take as much width as their content needs.
Examples include span, a, strong, em, img, input, and label.
Block elements can contain both block and inline elements, while inline elements should only contain inline content.
<!-- Block elements: full width, new line -->
<div>I am a block div</div>
<p>I am a block paragraph</p>
<h2>I am a block heading</h2>
<!-- Inline elements: flow with text -->
<p>
This text has <strong>bold</strong> and
<em>italic</em> and a
<a href="#">link</a> inline.
</p>
<!-- CSS can change display type -->
<style>
span { display: block; } /* make inline → block */
div { display: inline; } /* make block → inline */
</style>| EMP_ID | EMP_NAME | DEPT_ID | SALARY |
|---|---|---|---|
| 101 | Alice Johnson | 10 | 50,000 |
| 102 | Bob Smith | 20 | 62,000 |
| 103 | Carol White | 10 | 55,000 |
| 104 | Dave Brown | 20 | 70,000 |
All 4 rows returned from employees table
Block-level elements start on a new line and take up the full width available.
Semantic HTML elements clearly describe their meaning to both the browser and the developer.
Examples include header, nav, main, article, section, aside, footer, figure, figcaption, time, and address.
They improve accessibility (screen readers understand the structure), SEO (search engines rank content better), and code readability.
Non-semantic elements like div and span have no inherent meaning — they are generic containers.
<!-- Non-semantic (avoid) -->
<div id="header">...</div>
<div id="nav">...</div>
<div id="content">...</div>
<!-- Semantic (correct) -->
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Article Title</h1>
<p>Content here...</p>
</article>
<aside>Related links</aside>
</main>
<footer>© 2025 APEX Mastery</footer>| EMP_ID | EMP_NAME | DEPT_ID | SALARY |
|---|---|---|---|
| 101 | Alice Johnson | 10 | 50,000 |
| 102 | Bob Smith | 20 | 62,000 |
| 103 | Carol White | 10 | 55,000 |
| 104 | Dave Brown | 20 | 70,000 |
All 4 rows returned from employees table
Semantic HTML elements clearly describe their meaning to both the browser and the developer.
The id attribute assigns a unique identifier to an element — it must be unique within the entire page and can only be applied to one element.
The class attribute assigns one or more class names to an element and can be shared by multiple elements on the page.
In CSS, id is targeted with # selector (higher specificity) and class with . selector.
In JavaScript, getElementById returns a single element while getElementsByClassName returns a collection.
<!-- id: unique, one element only -->
<div id="main-header">Unique Header</div>
<!-- class: reusable, multiple elements -->
<div class="card highlighted">Card 1</div>
<div class="card">Card 2</div>
<div class="card highlighted">Card 3</div>
<style>
#main-header { background: #2d6446; color: white; }
.card { border: 1px solid #ccc; padding: 16px; }
.highlighted { border-color: #2d6446; font-weight: bold; }
</style>
<script>
// id: returns one element
document.getElementById('main-header').style.color = 'white';
// class: returns collection
document.querySelectorAll('.card').forEach(c => c.style.margin = '8px');
</script>| EMP_ID | EMP_NAME | DEPT_ID | SALARY |
|---|---|---|---|
| 101 | Alice Johnson | 10 | 50,000 |
| 102 | Bob Smith | 20 | 62,000 |
| 103 | Carol White | 10 | 55,000 |
| 104 | Dave Brown | 20 | 70,000 |
All 4 rows returned from employees table
The id attribute assigns a unique identifier to an element — it must be unique within the entire page and can only be applied to one element.
HTML data attributes allow you to store custom data directly on HTML elements using the data-* format.
Any attribute starting with data- followed by at least one character is a valid data attribute.
They are accessed in JavaScript via the dataset property.
Data attributes are useful for storing configuration, IDs, or state information on DOM elements without using hidden inputs or global variables — a common pattern in APEX applications.
<!-- Store extra info on elements -->
<div class="employee-card"
data-emp-id="101"
data-dept="Engineering"
data-salary="50000">
Alice Johnson
</div>
<button class="delete-btn" data-record-id="101" data-table="employees">
Delete
</button>
<script>
// Read data attributes
const card = document.querySelector('.employee-card');
console.log(card.dataset.empId); // '101' (camelCase)
console.log(card.dataset.dept); // 'Engineering'
// In APEX: useful for dynamic actions
const btn = document.querySelector('.delete-btn');
const id = btn.getAttribute('data-record-id'); // '101'
</script>| EMP_ID | EMP_NAME | DEPT_ID | SALARY |
|---|---|---|---|
| 101 | Alice Johnson | 10 | 50,000 |
| 102 | Bob Smith | 20 | 62,000 |
| 103 | Carol White | 10 | 55,000 |
| 104 | Dave Brown | 20 | 70,000 |
All 4 rows returned from employees table
HTML data attributes allow you to store custom data directly on HTML elements using the data-* format.
GET appends form data to the URL as query parameters and is used for data retrieval — bookmarkable, cacheable, limited data size, visible in browser history.
POST sends form data in the HTTP request body — used for creating/updating data, supports large amounts of data, not cached, not visible in URL.
In APEX, all page submissions use POST to protect session state.
GET is used for search forms where the URL should be shareable.
<!-- GET: data in URL - good for search/filter -->
<form method="GET" action="search.html">
<input type="text" name="q" placeholder="Search...">
<button type="submit">Search</button>
</form>
<!-- Result URL: search.html?q=oracle+apex -->
<!-- POST: data in body - good for sensitive/large data -->
<form method="POST" action="save-employee">
<input type="text" name="emp_name" required>
<input type="number" name="salary">
<input type="password" name="pin"> <!-- hidden in POST -->
<button type="submit">Save</button>
</form>
<!-- Data NOT visible in URL -->
<!-- APEX always uses POST for page submissions -->
<form method="POST" action="wwv_flow.accept">| EMP_ID | EMP_NAME | DEPT_ID | SALARY |
|---|---|---|---|
| 101 | Alice Johnson | 10 | 50,000 |
| 102 | Bob Smith | 20 | 62,000 |
| 103 | Carol White | 10 | 55,000 |
| 104 | Dave Brown | 20 | 70,000 |
All 4 rows returned from employees table
GET appends form data to the URL as query parameters and is used for data retrieval — bookmarkable, cacheable, limited data size, visible in browser history.
The DOCTYPE declaration tells the browser which version of HTML the document uses, ensuring it renders in standards mode rather than quirks mode.
In HTML5, the DOCTYPE is simply <!DOCTYPE html> — case-insensitive and much simpler than older HTML versions which required long DTD URLs.
Without a DOCTYPE, browsers enter quirks mode and may render pages inconsistently across browsers.
Always include DOCTYPE as the very first line of every HTML file.
<!-- HTML5 DOCTYPE (always use this) -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<p>Content</p>
</body>
</html>
<!-- Old HTML 4.01 DOCTYPE (don't use) -->
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> -->
<!-- Without DOCTYPE: browser enters QUIRKS MODE -->
<!-- Inconsistent box model, layout bugs -->
<!-- Always put DOCTYPE on line 1, before <html> -->| EMP_ID | EMP_NAME | DEPT_ID | SALARY |
|---|---|---|---|
| 101 | Alice Johnson | 10 | 50,000 |
| 102 | Bob Smith | 20 | 62,000 |
| 103 | Carol White | 10 | 55,000 |
| 104 | Dave Brown | 20 | 70,000 |
All 4 rows returned from employees table
The DOCTYPE declaration tells the browser which version of HTML the document uses, ensuring it renders in standards mode rather than quirks mode.
Meta tags provide metadata about the HTML document.
They go inside the head element and are not displayed on the page.
Common meta tags include charset (character encoding), viewport (mobile scaling), description (SEO page description), keywords (SEO), author, robots (search engine indexing instructions), and Open Graph tags (social media preview).
The viewport meta tag is essential for responsive web design.
<head>
<!-- Character encoding -->
<meta charset="UTF-8">
<!-- Mobile/responsive viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO -->
<meta name="description" content="Oracle APEX interview prep platform">
<meta name="keywords" content="Oracle APEX, PL/SQL, SQL, interview">
<meta name="author" content="Tharun K">
<!-- Prevent search engine indexing (staging) -->
<meta name="robots" content="noindex, nofollow">
<!-- Social media (Open Graph) -->
<meta property="og:title" content="APEX Interview Mastery">
<meta property="og:description" content="Prep for Oracle APEX interviews">
<meta property="og:image" content="/images/preview.png">
<!-- Refresh page every 30 seconds -->
<meta http-equiv="refresh" content="30">
</head>| EMP_ID | EMP_NAME | DEPT_ID | SALARY |
|---|---|---|---|
| 101 | Alice Johnson | 10 | 50,000 |
| 102 | Bob Smith | 20 | 62,000 |
| 103 | Carol White | 10 | 55,000 |
| 104 | Dave Brown | 20 | 70,000 |
All 4 rows returned from employees table
Meta tags provide metadata about the HTML document.
CSS link tags should go in the head so styles are applied before content renders, preventing Flash of Unstyled Content (FOUC).
Script tags should go just before the closing body tag by default, because JavaScript blocks HTML parsing when encountered.
Alternatively, use the async attribute to download script without blocking, or defer to download without blocking and execute after HTML is parsed.
In APEX, Universal Theme loads CSS in head and JS before body closing tag.
<!DOCTYPE html>
<html>
<head>
<!-- CSS: ALWAYS in <head> to prevent FOUC -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.example.com/lib.css">
</head>
<body>
<h1>Content loads styled</h1>
<!-- JS options -->
<!-- 1. Before </body>: safe default -->
<script src="app.js"></script>
<!-- 2. async: downloads in parallel, executes immediately -->
<script src="analytics.js" async></script>
<!-- 3. defer: downloads in parallel, executes after HTML parsed -->
<script src="main.js" defer></script>
</body>
</html>| EMP_ID | EMP_NAME | DEPT_ID | SALARY |
|---|---|---|---|
| 101 | Alice Johnson | 10 | 50,000 |
| 102 | Bob Smith | 20 | 62,000 |
| 103 | Carol White | 10 | 55,000 |
| 104 | Dave Brown | 20 | 70,000 |
All 4 rows returned from employees table
CSS link tags should go in the head so styles are applied before content renders, preventing Flash of Unstyled Content (FOUC).
ARIA (Accessible Rich Internet Applications) attributes extend HTML to improve accessibility for users with disabilities using screen readers and assistive technology.
Key attributes include role (defines element purpose), aria-label (provides accessible name), aria-hidden (hides from screen readers), aria-expanded (toggle state), aria-live (announces dynamic content), and aria-describedby (links description).
APEX Universal Theme generates many ARIA attributes automatically, but custom components need them added manually.
<!-- aria-label: accessible name -->
<button aria-label="Close dialog"><i class="fas fa-times"></i></button>
<!-- aria-expanded: toggle state -->
<button aria-expanded="false" aria-controls="menu">
Menu
</button>
<ul id="menu" hidden>...</ul>
<!-- aria-hidden: hide decorative content -->
<i class="fas fa-star" aria-hidden="true"></i>
<span>4.5 stars</span>
<!-- aria-live: announce dynamic changes -->
<div aria-live="polite" id="status-msg">
<!-- Updated content announced to screen reader -->
</div>
<!-- role: semantic meaning for custom elements -->
<div role="alert" aria-live="assertive">
Error: Please fill in all required fields.
</div>| EMP_ID | EMP_NAME | DEPT_ID | SALARY |
|---|---|---|---|
| 101 | Alice Johnson | 10 | 50,000 |
| 102 | Bob Smith | 20 | 62,000 |
| 103 | Carol White | 10 | 55,000 |
| 104 | Dave Brown | 20 | 70,000 |
All 4 rows returned from employees table
ARIA (Accessible Rich Internet Applications) attributes extend HTML to improve accessibility for users with disabilities using screen readers and assistive technology.
The canvas element provides a resolution-dependent bitmap canvas for rendering 2D graphics, animations, and interactive content using JavaScript.
It is a container — by itself it displays nothing.
You get a 2D rendering context using getContext('2d') and draw using methods like fillRect, arc, drawImage, fillText, and beginPath.
Canvas is used for charts, games, image manipulation, and data visualisations.
It differs from SVG which is vector-based and in the DOM.
<canvas id="myChart" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myChart');
const ctx = canvas.getContext('2d');
// Draw salary bar chart
const data = [50000, 62000, 55000, 70000];
const names = ['Alice','Bob','Carol','Dave'];
const maxSal = Math.max(...data);
const barW = 60;
data.forEach((sal, i) => {
const barH = (sal / maxSal) * 150;
const x = i * 90 + 30;
const y = 180 - barH;
// Draw bar
ctx.fillStyle = '#2d6446';
ctx.fillRect(x, y, barW, barH);
// Draw label
ctx.fillStyle = '#1c1208';
ctx.fillText(names[i], x + 5, 195);
ctx.fillText('$' + (sal/1000) + 'k', x + 5, y - 5);
});
</script>| EMP_ID | EMP_NAME | DEPT_ID | SALARY |
|---|---|---|---|
| 101 | Alice Johnson | 10 | 50,000 |
| 102 | Bob Smith | 20 | 62,000 |
| 103 | Carol White | 10 | 55,000 |
| 104 | Dave Brown | 20 | 70,000 |
All 4 rows returned from employees table
The canvas element provides a resolution-dependent bitmap canvas for rendering 2D graphics, animations, and interactive content using JavaScript.
localStorage stores data with no expiration — it persists until explicitly cleared, is accessible across browser tabs/windows for the same origin, and stores up to 5MB. sessionStorage stores data only for the duration of the browser tab session — closing the tab clears it, not shared between tabs.
Cookies are sent with every HTTP request to the server, have an expiration date, size limit of ~4KB, and can be HttpOnly (JS cannot read) and Secure.
In APEX, session state replaces most need for cookies.
// localStorage: persists across sessions
localStorage.setItem('theme', 'dark');
localStorage.setItem('lang', 'en');
const theme = localStorage.getItem('theme'); // 'dark'
localStorage.removeItem('theme');
localStorage.clear(); // remove all
// sessionStorage: only for this tab/session
sessionStorage.setItem('cart_count', '3');
const count = sessionStorage.getItem('cart_count'); // '3'
// Gone when tab closes
// Cookies: sent with every request
document.cookie = 'user=tharun; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/';
document.cookie = 'pref=dark; SameSite=Strict; Secure; HttpOnly';
// Comparison
// localStorage: 5MB | No expiry | Same origin | Not sent to server
// sessionStorage: 5MB | Tab only | Not shared | Not sent to server
// Cookie: 4KB | Expiry | Sent to server | HttpOnly option| EMP_ID | EMP_NAME | DEPT_ID | SALARY |
|---|---|---|---|
| 101 | Alice Johnson | 10 | 50,000 |
| 102 | Bob Smith | 20 | 62,000 |
| 103 | Carol White | 10 | 55,000 |
| 104 | Dave Brown | 20 | 70,000 |
All 4 rows returned from employees table
localStorage stores data with no expiration — it persists until explicitly cleared, is accessible across browser tabs/windows for the same origin, and stores up to 5MB.