Differentiate between and , and between and .

All four are container elements, and on screen the pairs usually look identical: and are both normally shown in bold, and and are both normally shown in italics. The difference is one of purpose. is a physical or visual tag. It says only "display this text in bold" and carries no meaning. is a logical or semantic tag. It says "this text is of strong importance" and leaves the appearance to the browser. is a physical tag meaning "display this text in italics". is a logical tag meaning "this text is emphasised". Because the logical tags carry meaning, software that reads a page aloud can treat them differently, and modern practice prefers and when importance or emphasis is intended.

Differentiate between the and tags.

Effect: moves the following text to the next line without leaving a blank line, whereas starts a new paragraph with a blank line above and below it. Type: is an empty element and has no closing tag, whereas is a container element written as ... . Example: 12, Station Road New Delhi 110001 Here the two address lines appear one under the other with no gap, and the whole address is separated from the surrounding text by blank lines.

Class 10Computer ScienceFull chapter

HTML: Getting Started

Q: Define HTML. Why is it called a markup language and not a programming language?

HTML stands for HyperText Markup Language . It is the language used to create the pages of the World Wide Web. HyperText means text that contains links to other text or pages, and Markup means marking ordinary text with labels, called tags, that tell the browser what each part of the text is. It is called a markup language because its whole job is to describe the structure and appearance of a document: this text is a heading, this is a paragraph, break the line here, make this word bold. It is not a programming language because it cannot do the things a programming language does. HTML has no variables, so it cannot store data; it has no conditional statements, so it cannot take decisions; it has no loops, so it cannot repeat instructions; and it cannot perform calculations. A language such as Python can do all four. HTML files are also not compiled — the browser simply reads the plain text and renders it.

Q: Explain the basic structure of an HTML document with a suitable example.

Sunrise Public School Welcome to our school website. — the document type declaration. It is the first line and tells the browser which version of HTML is being used. It is a declaration, not an element, so it has no closing tag. ... — the root element. The entire document is written inside it. ... — holds information about the document. Its contents are not displayed in the page area. ... — gives the document its title, which is shown on the browser tab or title bar. It is written inside the head. ... — contains everything the visitor sees: headings, paragraphs, lines, images and links. The head and the body are written one after the other inside ; the body is never placed inside the head.

Q: Differentiate between a tag, an element and an attribute, with one example of each.

Tag: a keyword written inside angle brackets that marks the beginning or the end of a piece of content. is an opening tag and is the matching closing tag. Element: the opening tag, the content and the closing tag taken together. For example, Namaste is a complete paragraph element, whereas by itself is only a tag. Attribute: extra information written inside the opening tag that changes how the element looks or behaves. It is written as a name and value pair with the value in double quotes. In , the attribute name is bgcolor and its value is lightyellow . In short: a tag is a boundary marker, an element is the complete unit including the content, and an attribute is additional information placed inside the opening tag only — never inside the closing tag.

Q: What are container elements and empty elements? Give two examples of each.

A container element , also called a paired element, has both an opening tag and a closing tag, and encloses content between them. Examples: ... and ... . Others include , , , , and . An empty element , also called a void or singular element, has no content to enclose and therefore no closing tag. It performs its action at the exact point where it is written. Examples: , which starts a new line, and , which draws a horizontal line. Others include and . Empty elements are sometimes written with a slash before the closing bracket, as . This style comes from XHTML and browsers accept both forms. A quick test: if the tag needs text between an opening and a closing tag, it is a container; if it does not, it is empty.

Q: Write the steps to create, save and open an HTML file using Notepad on a Windows computer.

Click Start and open Notepad . Type the HTML code, beginning with . Click File and then Save As . In the Save as type box, change "Text Documents (*.txt)" to All Files . Type the file name with its extension, for example index.html . Choose the folder in which to save it, keep the encoding as UTF-8 if that option is shown, and click Save . Open the folder and double-click the file, or right-click it and choose Open with, then a browser. The page is displayed. Note: if step 4 is skipped, Notepad saves the file as index.html.txt and the browser shows the code as plain text instead of a rendered page. After any later change, save the file again and press F5 in the browser to see the update.

Q: What is a comment in HTML? Write its syntax and state two uses.

A comment is a note written inside an HTML file for a human reader. The browser ignores it completely, so it is never displayed on the page. Syntax: A comment begins with , and it may run over several lines. Two uses: To explain what a section of code does, so that the author or anyone else can understand the file later. To temporarily switch off a piece of code during testing without deleting it, by enclosing it in a comment. Two points to remember: one comment cannot be written inside another, and although a comment is not shown on the page, anyone can read it using the browser's View Page Source option — so private information must never be written in a comment.

Q: What are character entities? Why are they needed? Give any four with their meanings.

A character entity is a code used to display a character that cannot simply be typed into an HTML file. Every entity begins with an ampersand and ends with a semicolon. They are needed for two reasons. First, some characters have a special meaning in HTML: if you type a less-than sign, the browser assumes a tag is starting. Second, the browser collapses a run of ordinary spaces into a single space, so extra spacing must be requested with an entity. — a non-breaking space; it forces a space and keeps the words on either side on the same line. — the greater-than sign. & — the ampersand itself. Others in common use are " for a double quotation mark, © for the copyright symbol and ₹ for the rupee sign. Forgetting the closing semicolon is the usual mistake and stops the entity from working.

Q: Name the tag used to draw a horizontal line across a web page. State whether it is a container element or an empty element.

The tag draws a horizontal line across the page. It is an empty (void) element , because it encloses no content and therefore has no closing tag.

Every web page you have ever opened is written in HTML — and HTML is markup, not programming. This chapter covers the document structure, the tags CBSE actually tests, and the exact wording that earns full marks.

In this chapter

What HTML Is and How a Browser Renders It Creating, Saving and Opening a .html File The Structure of an HTML Document Tags, Elements, Attributes and Empty Elements Headings, Paragraphs, Breaks, Rules and Comments Formatting Tags, Body Attributes and Character Entities

What HTML Is and How a Browser Renders It

Quick answer The full form of HTML, why it is a markup language and not a programming language, and the steps by which a browser turns a text file into a page on the screen.

HTML stands for HyperText Markup Language. It is the language in which the pages of the World Wide Web are written. Both halves of the name carry meaning. HyperText is text that contains links to other text: clicking a link on your school website opens another page, something a printed book cannot do. Markup means that you take ordinary text and mark it up with labels that tell the browser what each piece of text is — this part is a heading, this part is a paragraph, break the line here.

HTML is a markup language, not a programming language. This distinction is asked directly, so learn both halves of the answer. A programming language such as Python can take decisions with if, repeat work in a loop, and calculate results. HTML has no variables, no conditions, no loops and no arithmetic; it only describes the structure and appearance of a document. A full-mark answer says what markup does and also what HTML cannot do.

HTML was developed by Tim Berners-Lee and is maintained as an open public standard, so that every browser agrees on what each tag means. Nobody has to buy it, and no special software is needed to write it.

How a browser renders a page. A browser is the software that reads an HTML file and displays it — Google Chrome, Mozilla Firefox, Microsoft Edge, Safari and Opera are all browsers. The steps are:

You type a URL (Uniform Resource Locator), which is the address of a page — for example the address of the IRCTC railway booking site — or you simply open a file stored on your own computer.
If the page is on the internet, the browser asks the web server for it using HTTP (HyperText Transfer Protocol), or its secure version HTTPS.
The server sends the HTML file back. It is ordinary text, nothing more.
The browser parses the file — reads it and works out what each tag means — and then renders it, that is, draws the finished page on the screen.

The most important consequence of this is that the tags themselves are never shown on the page. If the file contains Welcome, the visitor sees only the word Welcome. Tags are instructions to the browser, not content.

Browsers do not all render identically. HTML is a standard, but the default size of a heading, the default space around a paragraph, the thickness of a horizontal line and the treatment of very old tags can differ from one browser to another, and even between versions of the same browser. So describe such behaviour as what a browser usually does, rather than claiming that one product's screen is the rule, and check your page in more than one browser when you can.

A web page does not need the internet at all. An HTML file on your own disk opens perfectly well, and in a school computer lab a page can be shared over a LAN (Local Area Network) with no internet connection. That is why the whole of this chapter's practical work can be completed offline.

One more rule is worth memorising early: HTML is not case sensitive. <BODY>, <Body> and <body> all mean the same thing. Even so, the accepted convention is to write tags in lowercase, and you should follow it — lowercase is easier to read and is what current standards expect.

Full form HTML HyperText Markup Language — the language of web pages.

Address of a page URL Uniform Resource Locator, for example the address of a school website.

Transfer protocol HTTP / HTTPS HyperText Transfer Protocol; HTTPS is its secure form.

Case rule <BODY> = <body> HTML is not case sensitive; lowercase is the convention.

Remember

HTML = HyperText Markup Language; HyperText means linked text, Markup means labels that describe the text.
It is a markup language: no variables, conditions, loops or calculations — it only structures a document.
The browser fetches a page from a server using HTTP with the page's URL, parses the tags, then renders the page.
Tags are instructions to the browser and are never displayed on the page itself.
HTML is not case sensitive, but lowercase tags are the accepted convention.
Default appearance varies between browsers, so state such behaviour as 'usually', not as a fixed rule.

Creating, Saving and Opening a .html File

Quick answer An HTML file is plain text. This section gives the exact steps for writing one in a text editor, the extension to use, the classic saving mistake, and how to view the result.

An HTML file is a plain text file. That single fact explains every rule in this section. You need only two pieces of software: a text editor to write the file, and a browser to view it.

Choosing an editor. Notepad is present on every Windows computer and is enough for this entire chapter. Linux labs generally provide gedit or a program simply called Text Editor; on macOS, TextEdit works but must first be switched to plain text mode. Editors such as Notepad++ or Visual Studio Code add colouring and line numbers, which help, but nothing here depends on them — describe whichever editor your school actually uses.

Never use a word processor such as MS Word or LibreOffice Writer to write HTML. A word processor stores fonts, margins and formatting inside the file along with your text. The browser would then see all that extra material instead of clean markup and would fail to render the page properly.

Steps to create and save the file. Write them in this order when the question asks:

Open the text editor — on Windows, click Start and open Notepad.
Type the HTML code.
Choose File, then Save As.
In the Save as type box, change "Text Documents (*.txt)" to All Files.
Type the file name together with its extension, for example index.html.
Select the folder, leave the encoding as UTF-8 if that box is offered, and click Save.

The commonest mistake in the practical examination is leaving "Save as type" on Text Documents. The editor then quietly saves the file as index.html.txt. When you open it, the browser displays your code as ordinary text instead of a rendered page. Recognise that symptom: seeing your own tags on screen almost always means the file was saved as plain text, not as HTML. Fix it by saving again with All Files selected, or by renaming the file.

.html or .htm? Both extensions work and browsers treat them the same way. .htm survives from older systems that allowed only three letters in an extension. Prefer .html. It is also worth knowing that the home page of a website is conventionally named index.html, because a web server usually serves that file when a visitor asks for a folder without naming a page.

Naming the file sensibly. Avoid spaces — write school-notice.html rather than school notice.html, because spaces are awkward inside a URL. Keep names in lowercase: many web servers treat Notice.html and notice.html as two different files even though Windows does not, and a page that works on your computer can then break once it is uploaded.

Opening the page. Any of these methods works: double-click the file; right-click it and choose Open with, then a browser; or, in most browsers, press Ctrl+O inside the browser and select the file. The address bar then shows a local path beginning file:/// rather than http://, which tells you the page came from your own disk and not from a server.

The edit, save, refresh cycle. Keep the editor and the browser open at the same time. After every change: save in the editor, switch to the browser, and reload the page with F5 or Ctrl+R. Forgetting to save is the usual reason a student complains that nothing changed on the screen.

Finally, you can read anybody's HTML. Most browsers offer a View Page Source option — often Ctrl+U — although the menu wording and the shortcut vary from browser to browser. It is a good way to see how a real page has been built.

Extension .html or .htm Both are valid; .html is preferred.

Save as type All Files If left on Text Documents, Notepad appends .txt to the name.

Home page name index.html The file a server usually serves for a folder.

Local address file:/// Shown when a page is opened from your own disk instead of a server.

Refresh F5 Reloads the page after you have saved the file.

Remember

An HTML file is plain text: a text editor and a browser are the only tools needed.
In Notepad, set 'Save as type' to All Files, otherwise the file is saved as name.html.txt.
If the browser shows your tags as text, the file was almost certainly saved as plain text.
.html and .htm both work; index.html is the conventional name for a home page.
Avoid spaces and capitals in file names, since many servers treat capitals as different files.
Save in the editor first, then refresh the browser with F5 — the browser does not reload on its own.

The Structure of an HTML Document

Quick answer The DOCTYPE declaration and the html, head, title and body elements — the skeleton you must be able to write from memory, plus the nesting rule.

Every HTML document follows the same skeleton. Learn to write it from memory, because a question that asks for "the basic structure of an HTML document" expects exactly this, with each part explained.

<!DOCTYPE html>
<html>
  <head>
    <title>Sunrise Public School</title>
  </head>
  <body>
    <p>Welcome to our school website.</p>
  </body>
</html>

<!DOCTYPE html> is the document type declaration. It is the very first line of the file and it tells the browser which version of HTML the page is written in. Two points are worth stating in an answer: it is a declaration, not an element, so it has no closing tag; and if it is left out, browsers fall back to a compatibility mode meant for very old pages, in which spacing and sizing may come out differently. Exactly how each browser behaves without a DOCTYPE varies, which is reason enough to always include it.

<html> ... </html> is the root element. Everything else in the document sits inside it. It marks where the HTML content begins and ends.

<head> ... </head> is the head section. It holds information about the page rather than the content of the page, and nothing placed here appears in the page area. It contains the title, and may also contain <meta> information such as the character set of the document.

<title> ... </title> gives the document its title. That text appears on the browser tab or title bar, it is the name suggested when a visitor bookmarks the page, and search engines display it in their results. There is one title per document, and it must sit inside the head.

<body> ... </body> contains everything the visitor actually sees: headings, paragraphs, lines, images, tables and links. If some text is not appearing on your page, the first thing to check is whether you typed it outside the body.

Title versus heading is asked very often. The text inside <title> appears on the browser tab; the text inside <h1> appears on the page itself. They may say the same words, but they are not interchangeable — one lives in the head and the other in the body.

head and body are siblings. Both sit directly inside <html>, one after the other. The body is never written inside the head.

The nesting rule. Tags must be closed in the reverse order in which they were opened, exactly like brackets in mathematics. This is correct:

<b><i>Priodemy</i></b>

and this is wrong, because the inner tag is closed after the outer one:

<b><i>Priodemy</b></i>

Browsers try to repair such mistakes, and different browsers repair them in different ways — one more reason to nest correctly rather than trusting the browser to guess.

Indentation and blank lines. The spaces used above to push <head> and <body> inwards have no effect at all on the output; the browser ignores them. They exist only so that a human can see which tag belongs inside which. Use them anyway. Indented code makes a missing closing tag much easier to spot, and a neatly written answer is easier for an examiner to follow.

Some very short pages will still display even if you leave out <html> or <head>, because browsers are forgiving and quietly supply what is missing. Do not treat that as permission. In an examination answer, always write the complete skeleton.

Declaration <!DOCTYPE html> First line; states the HTML version; no closing tag.

Root element <html> ... </html> Contains the whole document.

Head section <head> ... </head> Information about the page; not displayed in the page area.

Title <title> ... </title> Shown on the browser tab; sits inside the head.

Body section <body> ... </body> Everything the visitor sees on the page.

Remember

Order: <!DOCTYPE html>, then <html>, containing <head> and then <body>.
<!DOCTYPE html> is a declaration, not an element, and has no closing tag.
<head> holds information about the page; nothing in it appears in the page area.
<title> text appears on the browser tab, while <h1> text appears on the page.
Tags must be closed in the reverse order of opening — text.
Indentation and extra blank lines are ignored by the browser but make code readable.

Tags, Elements, Attributes and Empty Elements

Quick answer The precise difference between a tag, an element and an attribute, the container versus empty element classification, and the white-space rule that explains several later tags.

Three words are used loosely in conversation but tested precisely in the examination: tag, element and attribute. Define them apart from one another.

Tag. A tag is a keyword enclosed in angle brackets. Most tags come in pairs. The opening tag, also called the start tag, is written ; the closing tag, or end tag, repeats the same name with a forward slash in front of it, . It is the forward slash that makes it a closing tag — a backslash is wrong and the browser will not understand it.

Element. An element is the opening tag, the content and the closing tag taken together. In

<p>Namaste, and welcome to our website.</p>

the whole line is a paragraph element, whereas  on its own is only a tag. A crisp one-line answer: a tag marks a boundary; an element is the complete unit including everything between the boundaries.

Attribute. An attribute is extra information written inside the opening tag that changes how the element behaves or looks. It is written as a name and value pair:

<body bgcolor="lightyellow">

Here bgcolor is the attribute name and lightyellow is its value. Remember three rules. Attributes go only in the opening tag, never in the closing tag. The value should be enclosed in double quotation marks. And several attributes may appear in one tag, separated by spaces, as in <hr width="50%" size="3" align="center">.

Container elements versus empty elements. This is the classification your syllabus asks for by name.

A container element, also called a paired element, has both an opening and a closing tag and encloses content between them. <html>, <head>, <title>, <body>, , <h1> to <h6>, , , ,  and  are all container elements.

An empty element — also called a void, singular or standalone element — has no content to enclose, so it has no closing tag. It simply performs an action at the point where it is written.  , <hr>, <img> and <meta> are empty elements. You will also see them written with a slash before the closing bracket, as  . That style comes from XHTML; browsers accept both forms and either is acceptable in an answer.

A quick test for the examination: ask whether the tag needs something between an opening and a closing tag. A paragraph needs text between them, so  is a container. A line break needs nothing at all, so   is empty.

How the browser treats your spacing. One rule here explains several tags that follow. The browser collapses white space: any run of spaces, tabs and Enter presses in your file is displayed as a single space. So this code

<p>Fees:      Rs. 2,500

per   year</p>

is displayed as Fees: Rs. 2,500 per year, all on one line. If you genuinely want a new line you must ask for one with  , and if you want extra spaces you must use the character entity  . Pressing the space bar more times does not help.

Finally, tag names and attribute names are not case sensitive, so   works — but attribute values can be, for example a file name used in a link. Write everything in lowercase and the question never arises.

Opening and closing tag ... The closing tag repeats the name after a forward slash.

Attribute align="center" A name and value pair placed inside the opening tag only.

Container element Text Opening tag, content and closing tag taken together.

Empty element No content, no closing tag; may also be written .

White space rule many spaces = one space Use for a new line and &nbsp; for extra spaces.

Remember

A tag is a keyword in angle brackets; an element is the opening tag, content and closing tag together.
An attribute is written inside the opening tag as name="value", never in the closing tag.
Container (paired) elements have a closing tag: , <h1>, , <title>, <body>.
Empty (void) elements have no content and no closing tag: , <hr>, <img>, <meta>.
is the XHTML style of writing an empty element; browsers accept it too.
The browser collapses many spaces and Enter presses into a single space.

Headings, Paragraphs, Breaks, Rules and Comments

Quick answer The tags that put text on the page — h1 to h6, p, br and hr — the classic br versus p distinction, and how to write comments.

These are the tags that put actual text on the page. Together with the skeleton, they are enough to write a complete web page.

Heading tags, <h1> to <h6>. HTML provides six levels of heading. <h1> is the largest and most prominent and <h6> the smallest. All six are container elements and all six are displayed in bold by default. They are block-level, which means each heading starts on a new line and the browser leaves some space above and below it, so you do not need a   around a heading. The exact sizes are the browser's own defaults and differ a little between browsers; what is guaranteed is the order — h1 is larger than h2, and so on down to h6.

<h1>Sunrise Public School</h1>
<h2>Admissions</h2>
<h3>Class X</h3>

Use headings for their meaning — a main title, then the sections under it — not merely as a way of making text look big.

The paragraph tag . A container element that marks a paragraph of text. The browser leaves a blank line above and below it, and that is exactly how it differs from a plain line break. Browsers will still display a paragraph if you forget , but always write the closing tag in an examination answer.

The align attribute. Headings and paragraphs accept align, whose values are left, center, right and justify. Note the American spelling center — that is how the value is written in code, even though we spell the word centre. For example <h1 align="center">. Your textbook teaches this attribute, so use it when a question asks for it; be aware that current HTML standards mark it obsolete and expect alignment to be done with CSS.

The line break . An empty element that moves the text after it to the next line without leaving a blank line. It is the right tag for an address, a poem, or any block of short lines.

 versus is a favourite question. The answer has two halves. First, appearance:   simply starts a new line, whereas  starts a new paragraph with blank space above and below it. Second, type:   is an empty element with no closing tag, whereas  is a container element that takes . Give both halves.

The horizontal rule <hr>. An empty element that draws a horizontal line across the page, used to separate one section from another. The older attributes taught in school books are width (in pixels or as a percentage), size (thickness in pixels), align and noshade. How thick the default line looks, and whether it appears shaded, depends on the browser — so do not memorise one screen's appearance as a fact.

Comments. A comment is a note for a human reader that the browser ignores completely. It is written between  and may run over several lines.

<!-- School address section -->
<!-- The line below is hidden for now
<p>Fee structure coming soon.</p>
-->

There are two standard uses: to explain what a piece of code does, and to switch code off temporarily without deleting it. There are also two cautions: one comment cannot be placed inside another, and although a comment is not displayed on the page, anyone can read it through View Page Source — so never write anything private inside one.

Putting the whole section together:

<body>
<h1 align="center">Sunrise Public School</h1>
<hr>
<!-- Postal address -->
<p>12, Station Road<br>
New Delhi 110001</p>
<p>Annual fee: Rs. 2,500</p>
</body>

Read that code the way the browser will: a centred bold heading, a rule drawn across the page, then two lines of address one directly under the other with no gap between them, then a blank line, then the fee on its own line.

Headings <h1> ... <h6> Six levels; containers; bold and block-level by default.

Paragraph ... Container; blank line above and below.

Line break Empty element; next line with no blank line.

Horizontal rule <hr> Empty element; attributes width, size, align, noshade.

Comment  Ignored by the browser but visible in View Page Source.

Remember

There are six heading tags, <h1> to <h6>; h1 is the largest, h6 the smallest, all bold and block-level.
is a container that leaves a blank line above and below; is empty and only starts a new line.
<hr> is an empty element that draws a horizontal line; width, size, align and noshade are its old attributes.
align="left", "center", "right" or "justify" works on headings and paragraphs but is obsolete in modern HTML.
Comments are written as , are ignored by the browser and cannot be nested.
Comments are visible through View Page Source, so never put private information in them.

Formatting Tags, Body Attributes and Character Entities

Quick answer Bold, italic and underline against strong and em, superscript and subscript, the deprecated big and small, the bgcolor and text attributes, and the entities that let you type special characters.

Physical, or visual, formatting tags say how the text should look. All of them are container elements.

 makes text bold.
 makes text italic.
 underlines text.

Logical, or semantic, formatting tags say what the text means and leave the appearance to the browser.

 marks text of strong importance. Browsers normally display it in bold.
 marks emphasised text. Browsers normally display it in italics.

So  and  usually look identical on screen, and so do  and . The difference is in meaning, not in looks:  is an instruction about appearance, while  is a statement about importance. Software that reads a page aloud can make use of that meaning. When a question asks you to differentiate them, say "same usual appearance, different purpose" and then give the purpose of each.

Superscript and subscript.  raises text above the line and  lowers it below the line. Both are containers, and both print slightly smaller than the surrounding text.

<p>The formula of water is H<sub>2</sub>O.</p>
<p>Area of a square = a<sup>2</sup></p>
<p>(a + b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup></p>

The browser displays these as H₂O and a².

<big> and . <big> displayed text one size larger, and  one size smaller, than the surrounding text. Note this carefully: <big> has been removed from the HTML standard and is obsolete, and although many browsers still render it so that old pages keep working, it should not be used in a new page.  is still part of the standard, but its meaning has changed — it now marks fine print or a side comment, such as a copyright line or a disclaimer, rather than simply meaning "smaller". Two other tags your textbook may show,  and <center>, are likewise obsolete; their work is now done by CSS.

Nesting formatting tags. They may be combined freely, provided you close them in reverse order: Result declared.

Body attributes. The <body> tag accepts attributes that set the appearance of the whole page. The two your syllabus names are bgcolor, the background colour of the page, and text, the colour of ordinary text on the page.

<body bgcolor="#FFFFCC" text="#003366">

A colour may be written as a name, such as "yellow" or "navy", or as a hexadecimal code of six digits after a hash sign: two digits for red, two for green and two for blue, each running from 00 to FF. So #FF0000 is pure red and #FFFFFF is white. Older textbooks also list link, vlink and alink for link colours and background for a background image.

The modern note. bgcolor and text are presentational attributes and are obsolete in current HTML. Browsers still honour them so that old pages continue to work, but a page written today sets colours with CSS instead — for example body { background-color: #FFFFCC; color: #003366; } — which keeps appearance separate from structure and lets one rule style an entire website. Answer with the attribute when the question asks for it, and add the one-line remark that modern practice uses CSS.

Character entities. Some characters cannot simply be typed into an HTML file, either because the browser would mistake them for code or because it would collapse them. A character entity is a short code that stands for such a character. Every entity begins with & and ends with a semicolon, and leaving out that semicolon is the usual mistake.

  is a non-breaking space. Use it to force extra spaces, since the browser collapses ordinary ones, and to keep two words on the same line.
< is the less-than sign, needed because a typed < makes the browser think a tag is starting.
> is the greater-than sign.
& is the ampersand, which would otherwise look like the start of another entity.
" is a double quotation mark.
© gives the copyright symbol, and ₹ gives the rupee sign.

So to make the text  appear on a page — as this chapter has had to do on every line — you type .

Visual formatting Bold, italic and underline — appearance only.

Logical formatting Importance and emphasis; usually shown bold and italic.

Superscript and subscript Used for a2 and H2O.

Body attributes bgcolor="#FFFFCC" text="#003366" Page background and text colour; obsolete, CSS is the modern way.

Entities &nbsp; &lt; &gt; &amp; Begin with & and end with a semicolon.

Remember

, and describe appearance; and describe importance and emphasis.
and usually look the same on screen — the difference is purpose, not appearance.
raises text (a2) and lowers it (H2O).
<big> is obsolete and removed from the standard; survives but now means fine print.
bgcolor and text are <body> attributes taking a colour name or a #RRGGBB hexadecimal code; modern pages use CSS.
Every character entity starts with & and ends with a semicolon: &nbsp;, &lt;, &gt;, &amp;, &quot;.

Quick reference

Every term, tag and rule from this chapter in one place — screenshot it before your exam.

HTML

Full form

URL

Address of a page

HTTP / HTTPS

Transfer protocol

Case rule

.html or .htm

Extension

All Files

Save as type

index.html

Home page name

file:///

Local address

Refresh

<!DOCTYPE html>

Declaration

Root element

Head section

Title

Body section

...

Opening and closing tag

align="center"

Attribute

Text

Container element

Empty element

many spaces = one space

White space rule

Headings

...

Paragraph

Line break

<hr>

Horizontal rule

Comment

Visual formatting

Logical formatting

Superscript and subscript

bgcolor="#FFFFCC" text="#003366"

Body attributes

&nbsp; &lt; &gt; &amp;

Entities

Test yourself

Tap an answer to check it instantly — you'll see why it's right, and what to revise if it isn't.

0 correct · 0/12 answered

Q1 Nature of HTML easy

What does HTML stand for?

Q2 Markup versus programming medium

Which statement about HTML is correct?

Q3 Document structure medium

Where is <!DOCTYPE html> written and what does it do?

Q4 Container and empty elements easy

Which of the following is an empty (void) element?

Q5 Document structure easy

The text written inside the <title> tag appears

Q6 Heading tags easy

Which tag produces the smallest heading by default?

Q7 Creating and saving a file medium

A student types HTML code in Notepad and saves it as page.html, but leaves 'Save as type' set to Text Documents. What is most likely to happen?

Q8 Nesting rule hard

Which line of code is correctly nested?

Q9 Character entities medium

The character entity &nbsp; is used to

Q10 Character entities hard

To make the text appear on the web page itself, what should you type in the HTML file?

Q11 Formatting tags medium

Which statement best describes the difference between and ?

Q12 Body attributes medium

bgcolor and text are attributes of which tag, and what is the modern practice?

NCERT solutions & previous-year questions

Step-by-step model answers — tap a question to reveal the full solution.

NCERT questions 8

1 Define HTML. Why is it called a markup language and not a programming language?Nature of HTML

HTML stands for HyperText Markup Language. It is the language used to create the pages of the World Wide Web. HyperText means text that contains links to other text or pages, and Markup means marking ordinary text with labels, called tags, that tell the browser what each part of the text is.

It is called a markup language because its whole job is to describe the structure and appearance of a document: this text is a heading, this is a paragraph, break the line here, make this word bold.

It is not a programming language because it cannot do the things a programming language does. HTML has no variables, so it cannot store data; it has no conditional statements, so it cannot take decisions; it has no loops, so it cannot repeat instructions; and it cannot perform calculations. A language such as Python can do all four. HTML files are also not compiled — the browser simply reads the plain text and renders it.

2 Explain the basic structure of an HTML document with a suitable example.Document structure

<!DOCTYPE html>
<html>
  <head>
    <title>Sunrise Public School</title>
  </head>
  <body>
    <p>Welcome to our school website.</p>
  </body>
</html>

<!DOCTYPE html> — the document type declaration. It is the first line and tells the browser which version of HTML is being used. It is a declaration, not an element, so it has no closing tag.
<html> ... </html> — the root element. The entire document is written inside it.
<head> ... </head> — holds information about the document. Its contents are not displayed in the page area.
<title> ... </title> — gives the document its title, which is shown on the browser tab or title bar. It is written inside the head.
<body> ... </body> — contains everything the visitor sees: headings, paragraphs, lines, images and links.

The head and the body are written one after the other inside <html>; the body is never placed inside the head.

3 Differentiate between a tag, an element and an attribute, with one example of each.Tags, elements and attributes

Tag: a keyword written inside angle brackets that marks the beginning or the end of a piece of content.  is an opening tag and  is the matching closing tag.

Element: the opening tag, the content and the closing tag taken together. For example, Namaste is a complete paragraph element, whereas  by itself is only a tag.

Attribute: extra information written inside the opening tag that changes how the element looks or behaves. It is written as a name and value pair with the value in double quotes. In <body bgcolor="lightyellow">, the attribute name is bgcolor and its value is lightyellow.

In short: a tag is a boundary marker, an element is the complete unit including the content, and an attribute is additional information placed inside the opening tag only — never inside the closing tag.

4 What are container elements and empty elements? Give two examples of each.Container and empty elements

A container element, also called a paired element, has both an opening tag and a closing tag, and encloses content between them. Examples:  ...  and <h1> ... </h1>. Others include <html>, <head>, <title>, <body>,  and .

An empty element, also called a void or singular element, has no content to enclose and therefore no closing tag. It performs its action at the exact point where it is written. Examples:  , which starts a new line, and <hr>, which draws a horizontal line. Others include <img> and <meta>.

Empty elements are sometimes written with a slash before the closing bracket, as  . This style comes from XHTML and browsers accept both forms.

A quick test: if the tag needs text between an opening and a closing tag, it is a container; if it does not, it is empty.

5 Write the steps to create, save and open an HTML file using Notepad on a Windows computer.Creating and saving a file

Click Start and open Notepad.
Type the HTML code, beginning with <!DOCTYPE html>.
Click File and then Save As.
In the Save as type box, change "Text Documents (*.txt)" to All Files.
Type the file name with its extension, for example index.html.
Choose the folder in which to save it, keep the encoding as UTF-8 if that option is shown, and click Save.
Open the folder and double-click the file, or right-click it and choose Open with, then a browser. The page is displayed.

Note: if step 4 is skipped, Notepad saves the file as index.html.txt and the browser shows the code as plain text instead of a rendered page. After any later change, save the file again and press F5 in the browser to see the update.

6 What is a comment in HTML? Write its syntax and state two uses.Comments

A comment is a note written inside an HTML file for a human reader. The browser ignores it completely, so it is never displayed on the page.

Syntax:

<!-- This is a comment -->

A comment begins with , and it may run over several lines.

Two uses:

To explain what a section of code does, so that the author or anyone else can understand the file later.
To temporarily switch off a piece of code during testing without deleting it, by enclosing it in a comment.

Two points to remember: one comment cannot be written inside another, and although a comment is not shown on the page, anyone can read it using the browser's View Page Source option — so private information must never be written in a comment.

7 What are character entities? Why are they needed? Give any four with their meanings.Character entities

A character entity is a code used to display a character that cannot simply be typed into an HTML file. Every entity begins with an ampersand and ends with a semicolon.

They are needed for two reasons. First, some characters have a special meaning in HTML: if you type a less-than sign, the browser assumes a tag is starting. Second, the browser collapses a run of ordinary spaces into a single space, so extra spacing must be requested with an entity.

  — a non-breaking space; it forces a space and keeps the words on either side on the same line.
< — the less-than sign.
> — the greater-than sign.
& — the ampersand itself.

Others in common use are " for a double quotation mark, © for the copyright symbol and ₹ for the rupee sign. Forgetting the closing semicolon is the usual mistake and stops the entity from working.

8 Differentiate between and , and between and .Formatting tags

All four are container elements, and on screen the pairs usually look identical:  and  are both normally shown in bold, and  and  are both normally shown in italics. The difference is one of purpose.

 is a physical or visual tag. It says only "display this text in bold" and carries no meaning.
 is a logical or semantic tag. It says "this text is of strong importance" and leaves the appearance to the browser.
 is a physical tag meaning "display this text in italics".
 is a logical tag meaning "this text is emphasised".

Because the logical tags carry meaning, software that reads a page aloud can treat them differently, and modern practice prefers  and  when importance or emphasis is intended.

Previous-year board questions 5

Q1 Name the tag used to draw a horizontal line across a web page. State whether it is a container element or an empty element. 1 mark

The <hr> tag draws a horizontal line across the page. It is an empty (void) element, because it encloses no content and therefore has no closing tag.

Q2 Differentiate between the and tags. 2 marks

Effect:   moves the following text to the next line without leaving a blank line, whereas  starts a new paragraph with a blank line above and below it.
Type:   is an empty element and has no closing tag, whereas  is a container element written as  ... .

Example:

<p>12, Station Road<br>
New Delhi 110001</p>

Here the two address lines appear one under the other with no gap, and the whole address is separated from the surrounding text by blank lines.

Q3 Write the HTML statement that sets the background colour of a web page to yellow and the colour of its text to blue. What is the modern way of achieving the same result? 2 marks

<body bgcolor="yellow" text="blue">

The same colours may be written as hexadecimal codes:

<body bgcolor="#FFFF00" text="#0000FF">

A hexadecimal colour code has six digits after a hash sign — two for red, two for green and two for blue, each from 00 to FF.

Modern practice: bgcolor and text are presentational attributes and are obsolete in current HTML, although browsers still honour them so that old pages keep working. A page written today sets the same colours with CSS, for example body { background-color: yellow; color: blue; }, which keeps appearance separate from structure.

Q4 Write the HTML code to display the heading 'Priodemy Science Club' in the largest heading size and centred, followed by a horizontal line, and then a paragraph reading 'The formula of water is H2O' with the 2 written as a subscript. 3 marks

<h1 align="center">Priodemy Science Club</h1>
<hr>
<p>The formula of water is H<sub>2</sub>O.</p>

<h1> gives the largest heading and align="center" centres it — note that the value is spelt center in code. <hr> is an empty element that draws the line.  is a container element that lowers the 2 below the line, giving H₂O.

Q5 Write a complete HTML document for a school notice page. The browser tab must show 'School Notice'. The page must have a centred main heading, a horizontal line, the school address on two lines, one notice in bold, one phrase in italics, the examination fee written using the rupee sign, a background colour and a text colour, and at least one comment. 5 marks

<!DOCTYPE html>
<html>
<head>
<title>School Notice</title>
</head>
<body bgcolor="#FFFFCC" text="#003366">
<!-- Notice for the students of Class X -->
<h1 align="center">Sunrise Public School</h1>
<hr>
<p>12, Station Road<br>
New Delhi 110001</p>
<p><b>The Computer Applications practical examination will be held next month.</b></p>
<p>Bring your <i>admit card</i> without fail.</p>
<p>Examination fee: &#8377;250</p>
</body>
</html>

How the marks are earned. The document has the full skeleton — DOCTYPE, html, head with title, and body. The tab shows the title text. bgcolor and text set the page colours. The comment is ignored by the browser. <h1 align="center"> gives the centred main heading and <hr> the line below it.   splits the address into two lines inside a single paragraph.  makes the notice bold and  italicises the two words. ₹ is the character entity for the rupee sign. Writing  in place of  and  in place of  is equally acceptable.

Stuck? Ask about this chapter. Type your question in your own words — it searches straight through HTML: Getting Started for the answer. The Ask AI button (bottom-right) stays scoped to this chapter while you're here, too.

Part of Priodemy for School

Interactive Maths & Science — free with every school on Priodemy EduSuite. Explore more chapters and labs on the Priodemy for School hub.