TutorX | HTML Language

TutorX Smart Learning Dashboard

Everything You Need, All in One Place

TutorX Learning Platform

At The TutorX, we believe learning should be clear, focused, and at your fingertips. That’s why we’ve built a smart and user-friendly dashboard to empower every student on their academic journey. From live sessions and homework to performance tracking and resources—everything is seamlessly integrated to help you stay ahead with confidence.

View upcoming sessions and join with a single click.
Track your progress through weekly reports.
Access study materials tailored to your goals.
Get reminders so you never miss a session.
Connect with tutors and ask questions anytime.

Overview
Syllabus

HTML Tutorial | Learn HTML

What is HTML?

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. HTML was created by Tim Berners-Lee in 1991 and is maintained by the World Wide Web Consortium (W3C). HTML is not a programming language — it is a markup language that uses tags to define the structure and meaning of web content. Every webpage you see on the internet is built using HTML at its foundation.

HTML describes the structure of a web page using a series of elements represented by tags. Browsers read HTML documents and render them visually. HTML works together with CSS (for styling) and JavaScript (for behavior) to create complete, interactive web pages. The current and most widely used version is HTML5, released in 2014.

Basic Structure of an HTML Document

<!DOCTYPE html>: Must be the very first line. Tells the browser this is an HTML5 document. Not an HTML tag — it is a declaration.

<html>: The root element — wraps all page content. lang="en" attribute helps search engines and screen readers know the page language.

<head>: Contains metadata — information about the page not shown directly. Includes: <title>, <meta>, <link>, <style>, <script>.

<body>: Contains all visible page content — headings, paragraphs, images, links, tables, forms, etc. Everything users see and interact with.

HTML Tags, Elements and Attributes

Tag: Keywords surrounded by angle brackets < >. Tags usually come in pairs — opening <p> and closing </p>. The closing tag has a forward slash before the tag name.

Element: Everything from the opening tag to the closing tag, including the content in between. <p>Hello</p> is a paragraph element.

Attribute: Extra information added to tags. Always in the opening tag. Written as name="value". Common attributes: id, class, href, src, alt, style, type, name, placeholder, required, disabled.

Global Attributes (work on any element): id (unique identifier), class (CSS class), style (inline CSS), title (tooltip text), lang (language), hidden, tabindex, contenteditable, data-* (custom data attributes).

HTML Headings, Paragraphs and Text

Headings, Paragraphs, Formatting Tags

<p>: Defines a paragraph. Browsers automatically add space before and after paragraphs. <p>This is a paragraph.</p>

<pre>: Preformatted text — preserves spaces and line breaks exactly as written. Used for code blocks and ASCII art.

<blockquote>: Indented block quotation. cite attribute points to source URL. <q> is for inline short quotations.

<abbr>: Abbreviation with tooltip. <abbr title="HyperText Markup Language">HTML</abbr> — hovering shows the full form.

<sup> and <sub>: Superscript (x<sup>2</sup> → x²) and Subscript (H<sub>2</sub>O → H₂O).

HTML Links

What are Hyperlinks in HTML?

Links (hyperlinks) are created using the <a> (anchor) tag. They connect web pages and resources together — they are the fundamental navigation mechanism of the web. The href attribute specifies the destination URL.

download attribute: <a href="report.pdf" download>Download PDF</a> — forces file download instead of opening in browser. Can specify filename: download="my-report.pdf".

Anchor links (jump links): Link to a section on the same page using id. <a href="#contact">Go to Contact</a> jumps to <section id="contact">. href="#" scrolls to top of page.

rel attribute: rel="noopener noreferrer" — security best practice for target="_blank" links. rel="nofollow" tells search engines not to follow the link. rel="canonical" prevents duplicate content issues.

HTML Images

Embedding Images in HTML

Images are embedded using the self-closing <img> tag. It has no closing tag. The src attribute is required (image path) and alt is required for accessibility (describes image to screen readers and shows when image fails to load).

Basic syntax: <img src="photo.jpg" alt="A beautiful sunset" width="400" height="300">

Image attributes: src (path/URL), alt (alternate text — required!), width and height (in pixels or %), loading="lazy" (defers loading until near viewport — improves performance), title (tooltip on hover), srcset (responsive images for different screen sizes).

Image formats: JPEG/JPG — photographs, complex images. PNG — transparency support, logos, icons. GIF — simple animations. SVG — scalable vector graphics, logos. WebP — modern format, smaller file size with better quality than JPEG/PNG. AVIF — newest, best compression.

<figure> and <figcaption>: Semantic way to add a caption to an image. <figure><img src="chart.png" alt="Sales Chart"><figcaption>Q3 Sales Data</figcaption></figure>

Responsive images with <picture>: <picture><source media="(max-width:600px)" srcset="small.jpg"><img src="large.jpg" alt="..."></picture> — serves different images based on screen size.

Image as a link: Wrap <img> inside <a> tag: <a href="page.html"><img src="banner.jpg" alt="Click me"></a>

HTML Lists

Ordered, Unordered and Description Lists

Nested lists: Lists can be nested inside each other. Place a <ul> or <ol> inside an <li> to create a sub-list. Nested lists are indented further automatically by browsers.

Navigation menus: <ul> and <li> are the standard HTML structure for navigation menus. Styled with CSS to appear horizontal or as dropdowns. Always wrap nav links in <nav><ul>...</ul></nav> for semantic HTML.

HTML Tables

Creating Tables in HTML

HTML tables display tabular data in rows and columns. Tables are built using <table>, <tr> (table row), <th> (table header cell), and <td> (table data cell). Tables should only be used for tabular data — not for page layout (use CSS Grid/Flexbox for layout).

Table structure tags: <thead> (header group), <tbody> (body group), <tfoot> (footer group). These semantic tags improve accessibility and allow independent scrolling of table sections. <caption> adds a title to the table.

colspan and rowspan: <td colspan="2"> — cell spans 2 columns. <td rowspan="3"> — cell spans 3 rows. Used to merge cells for complex table layouts.

<colgroup> and <col>: Apply styles to entire columns. <colgroup><col style="background:yellow"><col></colgroup> — styles the first column yellow. More efficient than styling each cell individually.

HTML Forms

Creating Forms in HTML

HTML forms collect user input and send it to a server for processing. Forms are created with the <form> element and contain input elements like text fields, checkboxes, radio buttons, dropdowns, and submit buttons. Forms are essential for login pages, registration, search boxes, contact forms, and any user interaction.

form attributes: action="/url" (where to send data), method="get" (data in URL, bookmark-able) or method="post" (data in body, secure for passwords), enctype="multipart/form-data" (required for file uploads), novalidate (disable HTML5 validation), autocomplete="on/off".

Input validation attributes: required (field must be filled), minlength / maxlength (character limits), min / max (for number/date), pattern="[A-Za-z]{3}" (regex pattern), disabled (field disabled), readonly (cannot edit), checked (pre-checked checkbox/radio).

<label>: Associates text with an input for accessibility. Always link label to input using for="input-id" and id="input-id". Clicking the label focuses the input. Screen readers announce the label when input is focused.

<fieldset> and <legend>: Group related form fields with a visible border. <fieldset><legend>Personal Info</legend>...</fieldset>. Improves form organization and accessibility.

<datalist>: Provides auto-complete suggestions for text input. <input list="browsers"><datalist id="browsers"><option value="Chrome"><option value="Firefox"></datalist>

HTML Semantic Elements

What are Semantic HTML Tags?

Semantic HTML elements clearly describe their meaning to both the browser and the developer. They were introduced in HTML5 to replace meaningless <div> soup. Semantic elements improve SEO (search engines understand page structure better), accessibility (screen readers navigate by landmarks), and code readability.

<header>: Introductory content — logo, site title, navigation. Can appear inside <article> or <section> too (not just the page header).

<nav>: Major navigation links. A page can have multiple <nav> elements (main nav, footer nav, breadcrumbs). Not all links need to be in <nav>.

<main>: The dominant content of the page. Only one <main> per page. Should not be inside <header>, <footer>, <nav>, or <aside>.

<article>: Self-contained, independently distributable content. Blog posts, news articles, forum posts, product cards. Should make sense on its own outside the page context.

<section>: Thematic grouping of content. Each section should have a heading (<h2>–<h6>). Different from <div> — section has semantic meaning, div is purely for styling/scripting.

<aside>: Content tangentially related to the surrounding content. Sidebars, pull quotes, related links, advertisements. Visually often styled as a sidebar.

<footer>: Footer of section or page. Copyright, contact info, links, social media. Can appear inside <article> or <section> as well.

Other semantic elements: <time datetime="2024-01-15">, <address> (contact info), <details> + <summary> (accordion disclosure), <dialog> (modal dialog), <mark> (highlighted text), <progress> (progress bar), <meter> (gauge/measurement).

HTML5 New Features

What's New in HTML5?

HTML5 is the fifth and current major version of HTML. Released in 2014 by W3C, HTML5 introduced powerful new features including semantic elements, multimedia support (audio/video without plugins), Canvas for 2D drawing, SVG, Geolocation API, Web Storage, Web Workers, and many new form input types.

<audio>: Embed audio without plugins. <audio controls><source src="song.mp3" type="audio/mpeg">Your browser does not support audio.</audio>. Attributes: controls, autoplay, loop, muted, preload. Supports MP3, WAV, OGG formats.

<video>: Embed video without Flash. <video width="640" height="360" controls><source src="movie.mp4" type="video/mp4"></video>. Attributes: controls, autoplay, loop, muted, poster (thumbnail image), preload. Supports MP4, WebM, OGG formats.

<canvas>: A drawing surface for 2D graphics via JavaScript. <canvas id="myCanvas" width="500" height="300"></canvas>. Used for charts, games, visualizations, image manipulation. The canvas API provides methods for drawing shapes, text, images, and animations.

<svg>: Scalable Vector Graphics embedded directly in HTML. Vector images that scale without pixelation. Used for logos, icons, charts, animations. Better for simple graphics; Canvas is better for complex pixel manipulation.

Web Storage APIs: localStorage (persists after browser close — no expiry), sessionStorage (cleared when tab closes). Both store key-value string pairs. localStorage.setItem("key", "value"), localStorage.getItem("key"). Better than cookies — more storage (5MB), no server transfer.

Geolocation API: navigator.geolocation.getCurrentPosition(success, error). Gets user's latitude/longitude with permission. Used in maps, weather apps, location-based services. HTTPS required.

Drag and Drop API: draggable="true" attribute on any element. Events: ondragstart, ondragover, ondrop. Enables native drag-and-drop interfaces without JavaScript libraries.

HTML Meta Tags and SEO

What are Meta Tags in HTML?

Meta tags go inside <head> and provide metadata about the HTML document. They are not displayed on the page but are read by browsers, search engines, and social media platforms. Meta tags are crucial for SEO (Search Engine Optimization), social sharing, and mobile responsiveness.

Essential meta tags:
<meta charset="UTF-8"> — character encoding (always first)
<meta name="viewport" content="width=device-width, initial-scale=1.0"> — mobile responsive
<meta name="description" content="Page description (150–160 chars)"> — shown in search results
<meta name="keywords" content="html, tutorial, web"> — keywords (less important now)
<meta name="author" content="John Doe"> — page author
<meta name="robots" content="index, follow"> — search engine instructions

Open Graph meta tags (social media sharing):
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
These control how your page appears when shared on Facebook, LinkedIn, WhatsApp.

Twitter Card tags:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Title">
<meta name="twitter:image" content="image.jpg">

http-equiv meta tags:
<meta http-equiv="refresh" content="5;url=https://example.com"> — redirect after 5 seconds
<meta http-equiv="X-UA-Compatible" content="IE=edge"> — IE compatibility
<meta http-equiv="Content-Security-Policy" content="..."> — security policy

<link> tag in head: rel="stylesheet" (CSS file), rel="icon" (favicon), rel="canonical" (preferred URL), rel="preload" (preload critical resources), rel="alternate" (alternate versions like RSS), rel="manifest" (PWA manifest file).

HTML Interview Questions and Answers

HTML MCQ (Multiple Choice Questions)

HTML MCQs with Answers

Q1. What does HTML stand for?
a) Hyper Text Markup Language b) High Text Machine Language c) Hyperlink Text Markup Language d) Home Tool Markup Language
Answer: a) Hyper Text Markup Language

Q2. Which tag is used to create the largest heading in HTML?
a) <h6> b) <heading> c) <h1> d) <head>
Answer: c) <h1>

Q3. Which HTML attribute is used to define inline styles?
a) class b) font c) styles d) style
Answer: d) style — style="color: red;"

Q4. Which HTML tag is used to insert a line break?
a) <lb> b) <break> c) <br> d) <line>
Answer: c) <br> — self-closing void element

Q5. What is the correct HTML for creating a hyperlink?
a) <a url="http://example.com"> b) <a href="http://example.com"> c) <link href="http://example.com"> d) <a name="http://example.com">
Answer: b) <a href="http://example.com">

Q6. Which HTML element is used to define important text?
a) <b> b) <i> c) <important> d) <strong>
Answer: d) <strong> — semantic importance, not just visual bold

Q7. What is the correct HTML for inserting an image?
a) <img href="img.jpg" alt=""> b) <image src="img.jpg" alt=""> c) <img src="img.jpg" alt=""> d) <img src="img.jpg">
Answer: c) <img src="img.jpg" alt=""> — alt is required for accessibility

Q8. Which doctype is correct for HTML5?
a) <!DOCTYPE HTML PUBLIC ...> b) <!DOCTYPE html> c) <html DOCTYPE="5"> d) <!html5>
Answer: b) <!DOCTYPE html>

Q9. Which input type is used for a calendar date picker?
a) type="calendar" b) type="datetime" c) type="date" d) type="picker"
Answer: c) type="date"

Q10. Which HTML element defines the title of a document (shown in browser tab)?
a) <head> b) <meta> c) <heading> d) <title>
Answer: d) <title> — placed inside <head>

Q11. Which attribute makes an input field mandatory in HTML5?
a) validate b) mandatory c) required d) must
Answer: c) required — <input type="text" required>

Q12. Which element is used to group table header cells?
a) <thead> b) <th> c) <header> d) <tgroup>
Answer: a) <thead> — groups the header rows, while <th> is an individual header cell

Instructor

Administrator

TUTORX ADMIN

Administrator

0 Rating

0 Reviews

93 Students

67 Courses

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

JOIN OUR

HTML Language

Send Us Your Enquiry To Get Started

TutorX Smart Learning Dashboard

TutorX Learning Platform

HTML Tutorial | Learn HTML

What is HTML?

Basic Structure of an HTML Document

HTML Tags, Elements and Attributes

HTML Headings, Paragraphs and Text

Headings, Paragraphs, Formatting Tags

HTML Links

What are Hyperlinks in HTML?

HTML Images

Embedding Images in HTML

HTML Lists

Ordered, Unordered and Description Lists

HTML Tables

Creating Tables in HTML

HTML Forms

Creating Forms in HTML

HTML Semantic Elements

What are Semantic HTML Tags?

HTML5 New Features

What's New in HTML5?

HTML Meta Tags and SEO

What are Meta Tags in HTML?

HTML Interview Questions and Answers

Top HTML Interview Questions

HTML MCQ (Multiple Choice Questions)

HTML MCQs with Answers

Instructor

TUTORX ADMIN

Administrator

Contact TutorX – We're Here to Help You Succeed

Get in touch

Address

Email

Phone

Follow Us

Send Us Message

Company

Learn with TutorX

Contact Us

Test Preparation

Top Locations

Australia

UK

USA

Canada

Select Countries

Shopping Cart

Book a Free Demo Class