Class 9 | HTML Elements | Website Design Notes

Class 9 | HTML Elements | Website Design Notes

HTML Elements, Lists, Multimedia, Tables and Forms

Introduction to HTML Elements

An HTML element is a component of an HTML document that tells the web browser how a particular part of a webpage should be structured or interpreted.

Most HTML elements are created using:

  1. Opening Tag
  2. Content
  3. Closing Tag

For example:

<p>This is a paragraph.</p>

Here:

  • <p> is the opening tag.
  • This is a paragraph. is the content.
  • </p> is the closing tag.

However, some HTML elements such as <br>, <hr>, <img>, and <input> do not require a separate closing tag.

HTML Heading Tags

HTML headings are used to display titles and subtitles on a webpage.

HTML provides six levels of headings:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<h1> represents the highest-level heading, while <h6> represents the lowest-level heading.

Example of Heading Tags

<!DOCTYPE html>
<html>
<head>
    <title>Heading Tags</title>
</head>

<body>

    <h1>Hello World</h1>
    <h2>Hello World</h2>
    <h3>Hello World</h3>
    <h4>Hello World</h4>
    <h5>Hello World</h5>
    <h6>Hello World</h6>

</body>
</html>

Important Points About Headings

  • HTML has six heading levels.
  • <h1> is normally used for the main heading.
  • <h2> to <h6> are used for subheadings of different levels.
  • All heading elements require closing tags.
  • Heading tags help organize webpage content.

HTML Lists

HTML lists are used to arrange related items in an organized form.

There are three major types of lists:

  1. Unordered List
  2. Ordered List
  3. Description List

1. Unordered List

An unordered list displays items using bullet points.

The <ul> element creates the unordered list.

The <li> element defines each list item.

Syntax

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Example of Unordered List

<!DOCTYPE html>
<html>
<head>
    <title>Unordered List</title>
</head>

<body>

    <ul>
        <li>Harry</li>
        <li>Roshan</li>
        <li>Joseph</li>
    </ul>

</body>
</html>

2. Ordered List

An ordered list displays list items in a particular order using numbers, letters, or other numbering styles.

The <ol> element creates an ordered list.

Each item is defined using <li>.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Ordered List</title>
</head>

<body>

    <p>Computer Engineering subjects are:</p>

    <ol>
        <li>Electrical Engineering</li>
        <li>C Programming</li>
        <li>Computer Fundamentals</li>
        <li>Webpage Design</li>
    </ol>

</body>
</html>

Ordered List type Attribute

The type attribute can change the numbering style.

Example:

<ol type="a">
    <li>C Programming</li>
    <li>Computer Fundamentals</li>
    <li>Webpage Design</li>
</ol>

Possible values include:

ValueList Style
11, 2, 3
AA, B, C
aa, b, c
II, II, III
ii, ii, iii

3. Description List

A description list displays a list of terms along with their descriptions.

Three tags are mainly used:

  • <dl> – defines the description list
  • <dt> – defines the term
  • <dd> – defines the description

Example of Description List

<!DOCTYPE html>
<html>
<head>
    <title>Description List</title>
</head>

<body>

    <dl>

        <dt>Mathematics</dt>
        <dd>Mathematics is an important subject.</dd>

        <dt>HTML</dt>
        <dd>HTML is used to structure webpages.</dd>

    </dl>

</body>
</html>

Difference Between HTML Lists

Unordered ListOrdered ListDescription List
Uses bullet points.Uses numbers or letters.Uses terms and descriptions.
Uses <ul>.Uses <ol>.Uses <dl>.
Items use <li>.Items use <li>.Uses <dt> and <dd>.

HTML Paragraph

The <p> element defines a paragraph.

Example

<p>
    I am going to provide you a tutorial on HTML.
</p>

Another example:

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

Whitespace in HTML

Web browsers normally collapse multiple spaces and line breaks in ordinary HTML text.

For example:

<p>
    Hello          Everyone
</p>

will generally display with normal spacing rather than all the extra spaces.

Line Break <br>

The <br> element inserts a line break.

It does not require a closing tag.

Example:

Nepal<br>
India<br>
Bhutan<br>
South Korea

Output:

Nepal
India
Bhutan
South Korea

Horizontal Rule <hr>

The <hr> element creates a thematic break, usually displayed as a horizontal line.

Example:

<p>First Section</p>

<hr>

<p>Second Section</p>

<hr> is a void element and does not require a closing tag.

HTML Text Formatting

HTML provides several elements for formatting or emphasizing text.

Important formatting elements include:

  • <b>
  • <strong>
  • <i>
  • <em>
  • <u>
  • <s>
  • <del>
  • <sub>
  • <sup>

Bold Text

The <b> element visually displays text in bold.

<b>This text is bold.</b>

The <strong> element indicates strong importance and is also normally displayed in bold.

<strong>This text has strong importance.</strong>

Italic Text

The <i> element normally displays text in italic style.

<i>This text is italic.</i>

The <em> element represents emphasized text.

<em>This text is emphasized.</em>

Underline

The <u> element displays text with an underline.

<u>This text is underlined.</u>

Strikethrough

The <s> element displays text with a line through it.

<s>This text is no longer accurate.</s>

The <del> element represents deleted content.

<del>This text was deleted.</del>

Subscript

The <sub> element displays text below the normal text line.

Example:

H<sub>2</sub>O

Output:

H₂O

Superscript

The <sup> element displays text above the normal text line.

Example:

E = mc<sup>2</sup>

Output:

E = mc²

Summary of Text Formatting Tags

TagPurpose
<b>Bold text
<strong>Strong importance
<i>Italic text
<em>Emphasized text
<u>Underlined text
<s>Strikethrough
<del>Deleted text
<sub>Subscript
<sup>Superscript

Multimedia in HTML

HTML can display several types of multimedia content.

Important multimedia elements include:

  1. Image
  2. Audio
  3. Video

HTML Image

The <img> element is used to display an image on a webpage.

It is a void element and does not require a closing tag.

Basic Syntax

<img src="image.jpg" alt="Description of image">

Important Image Attributes

Important attributes include:

  • src
  • alt
  • width
  • height

src Attribute

The src attribute specifies the location of the image.

Example:

<img src="images/photo.jpg" alt="A beautiful landscape">

The source may be:

  • A relative file path
  • An absolute URL

alt Attribute

The alt attribute provides alternative text for an image.

Example:

<img src="student.jpg" alt="Student using a computer">

Alternative text is useful for:

  • Accessibility
  • Screen Readers
  • Situations where the image cannot load
  • Helping describe image content

width Attribute

The width attribute specifies the image width.

Example:

<img src="photo.jpg" alt="Photo" width="500">

height Attribute

The height attribute specifies the image height.

Example:

<img src="photo.jpg" alt="Photo" height="300">

When setting both width and height, incorrect proportions may stretch or distort the image.

HTML Audio

The <audio> element is used to embed audio files on a webpage.

Example:

<audio controls>

    <source src="audio.ogg" type="audio/ogg">
    <source src="audio.mp3" type="audio/mpeg">

    Your browser does not support the audio element.

</audio>

controls Attribute in Audio

The controls attribute displays audio controls such as:

  • Play
  • Pause
  • Volume

Example:

<audio controls src="music.mp3"></audio>

Multiple Audio Sources

Multiple <source> elements can be provided so that browsers can use a supported format.

<audio controls>

    <source src="music.ogg" type="audio/ogg">
    <source src="music.mp3" type="audio/mpeg">

</audio>

HTML Video

The <video> element is used to display video on a webpage.

Example:

<video width="320" height="240" controls>

    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">

    Your browser does not support the video element.

</video>

Video Controls

The controls attribute provides controls such as:

  • Play
  • Pause
  • Volume
  • Seek Bar
  • Full-Screen Control

Autoplay Video

The autoplay attribute requests that video start automatically.

Modern browsers often restrict autoplay, especially when sound is enabled.

A common form is:

<video width="320" height="240" autoplay muted controls>

    <source src="movie.mp4" type="video/mp4">

</video>

Hyperlinks in HTML

A hyperlink connects one webpage or resource to another.

HTML hyperlinks are created using the anchor element:

<a>

The href attribute specifies the destination.

Basic Hyperlink Syntax

<a href="URL">Link Text</a>

Example:

<a href="https://example.com">Visit Website</a>

Linking to Another HTML Page

<a href="about.html">About Us</a>

Linking to an Image

<a href="photo.jpg">View Image</a>

Email Link

A hyperlink can also open the user’s email application.

<a href="mailto:example@example.com">Send Email</a>

Telephone Link

<a href="tel:+9779800000000">Call Us</a>

Complete Hyperlink Example

<!DOCTYPE html>
<html>
<head>
    <title>Hyperlink Example</title>
</head>

<body>

    <a href="https://example.com">
        Visit Example Website
    </a>

</body>
</html>

HTML Tables

An HTML table is used to organize information into rows and columns.

The main table elements are:

  • <table>
  • <tr>
  • <th>
  • <td>
  • <caption>

Table Elements

<table>

Defines the complete table.

<tr>

Defines a table row.

<th>

Defines a table heading cell.

<td>

Defines a table data cell.

<caption>

Defines a table caption or title.

Basic Table Example

<table>

    <tr>
        <th>Name</th>
        <th>City</th>
    </tr>

    <tr>
        <td>Ram</td>
        <td>Kathmandu</td>
    </tr>

    <tr>
        <td>Sita</td>
        <td>Pokhara</td>
    </tr>

</table>

Complete Table Example

<!DOCTYPE html>
<html>
<head>

    <title>Club Details</title>

</head>

<body>

    <h1>Details of the Clubs</h1>

    <table border="1">

        <tr>
            <th>S.N.</th>
            <th>Name</th>
            <th>City</th>
        </tr>

        <tr>
            <td>1</td>
            <td>Raja and Rani Corner Team Club</td>
            <td>Kathmandu</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Three Star Football Club</td>
            <td>Lalitpur</td>
        </tr>

        <tr>
            <td>3</td>
            <td>Sahara Football Club</td>
            <td>Pokhara</td>
        </tr>

    </table>

</body>
</html>

Table Attributes

Older HTML commonly used table attributes such as:

  • border
  • cellspacing
  • cellpadding
  • width
  • height
  • bgcolor

Modern HTML generally uses CSS for table appearance instead.

Two important HTML attributes that are still useful for table structure are:

  • colspan
  • rowspan

colspan

The colspan attribute allows one table cell to span multiple columns.

Example:

<table border="1">

    <tr>
        <th colspan="2">Student Information</th>
    </tr>

    <tr>
        <td>Name</td>
        <td>Ram</td>
    </tr>

</table>

rowspan

The rowspan attribute allows one cell to span multiple rows.

Example:

<table border="1">

    <tr>
        <th rowspan="2">Class 9</th>
        <td>Computer</td>
    </tr>

    <tr>
        <td>Science</td>
    </tr>

</table>

Frames in HTML

Older versions of HTML used <frame> and <frameset> elements to divide the browser window into separate areas that could display different HTML documents.

Example of the old syntax:

<frame src="page.html">

However, the old <frame> and <frameset> elements are obsolete in HTML5 and should not be used for modern website development.

Modern Alternative to Frames

When another webpage needs to be embedded inside a webpage, modern HTML can use the <iframe> element.

Example:

<iframe
    src="https://example.com"
    width="600"
    height="400">
</iframe>

HTML Forms

An HTML form is a section of a webpage that allows users to enter or submit information.

Forms are created using the:

<form>

element.

Forms may contain:

  • Text Boxes
  • Password Fields
  • Radio Buttons
  • Checkboxes
  • Drop-Down Lists
  • Text Areas
  • Buttons

Basic Form Syntax

<form>

    <!-- Form elements go here -->

</form>

Common HTML Form Elements

Important form elements include:

  • <input>
  • <textarea>
  • <button>
  • <select>
  • <option>

The <input> Element

The <input> element can create several types of form controls.

Examples include:

  • Text Field
  • Password Field
  • Radio Button
  • Checkbox

The type is controlled using the type attribute.

Text Box

A text box allows the user to enter a single line of text.

Example:

<input type="text" size="20" maxlength="30">

Text Input with Label

<label for="name">Name:</label>

<input
    type="text"
    id="name"
    name="name">

Password Box

A password field hides the characters entered by the user.

Example:

<input
    type="password"
    name="password"
    size="10"
    maxlength="20">

Radio Button

A radio button allows the user to select one option from a group.

Example:

<input
    type="radio"
    id="married"
    name="status"
    value="married">

<label for="married">Married</label>

<input
    type="radio"
    id="unmarried"
    name="status"
    value="unmarried">

<label for="unmarried">Unmarried</label>

Radio buttons that belong to the same group use the same name.

Checkbox

A checkbox allows users to select one or more options.

Example:

<input
    type="checkbox"
    id="movie"
    name="interest"
    value="movie">

<label for="movie">Movie</label>

<input
    type="checkbox"
    id="music"
    name="interest"
    value="music">

<label for="music">Music</label>

<input
    type="checkbox"
    id="travel"
    name="interest"
    value="travel">

<label for="travel">Travel</label>

Difference Between Radio Button and Checkbox

Radio ButtonCheckbox
Usually allows one choice from a group.Allows one or multiple choices.
Uses type="radio".Uses type="checkbox".
Same name groups the options.Multiple boxes may be selected independently.

The <select> Element

The <select> element creates a drop-down list.

The <option> element defines each available choice.

Example:

<label for="country">Country:</label>

<select id="country" name="country">

    <option value="nepal">Nepal</option>
    <option value="bhutan">Bhutan</option>
    <option value="india">India</option>

</select>

The <textarea> Element

The <textarea> element allows users to enter multiple lines of text.

Example:

<label for="comments">Comments:</label>

<textarea
    id="comments"
    name="comments"
    rows="3"
    cols="20">
</textarea>

Important attributes include:

  • rows
  • cols

The <button> Element

The <button> element creates a clickable button.

Example:

<button type="button">
    Click
</button>

A form submit button can be written as:

<button type="submit">
    Submit
</button>

Complete HTML Form Example

<!DOCTYPE html>
<html>

<head>

    <title>Student Form</title>

</head>

<body>

    <h2>Student Information Form</h2>

    <form>

        <label for="name">Name:</label>

        <input
            type="text"
            id="name"
            name="name">

        <br><br>

        <label for="password">Password:</label>

        <input
            type="password"
            id="password"
            name="password">

        <br><br>

        Gender:

        <input
            type="radio"
            id="male"
            name="gender"
            value="male">

        <label for="male">Male</label>

        <input
            type="radio"
            id="female"
            name="gender"
            value="female">

        <label for="female">Female</label>

        <br><br>

        Interests:

        <input
            type="checkbox"
            id="music"
            name="interest"
            value="music">

        <label for="music">Music</label>

        <input
            type="checkbox"
            id="travel"
            name="interest"
            value="travel">

        <label for="travel">Travel</label>

        <br><br>

        <label for="country">Country:</label>

        <select id="country" name="country">

            <option value="nepal">Nepal</option>
            <option value="india">India</option>
            <option value="bhutan">Bhutan</option>

        </select>

        <br><br>

        <label for="comments">Comments:</label>

        <textarea
            id="comments"
            name="comments"
            rows="4"
            cols="30">
        </textarea>

        <br><br>

        <button type="submit">
            Submit
        </button>

    </form>

</body>
</html>

Quick Revision

HTML Element

An HTML element defines a part of a webpage.

Example:

<p>Hello</p>

Heading Tags

<h1>Largest-Level Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Smallest-Level Heading</h6>

Lists

Unordered List

<ul>
    <li>Item</li>
</ul>

Ordered List

<ol>
    <li>Item</li>
</ol>

Description List

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
</dl>

Paragraph

<p>This is a paragraph.</p>

Line Break

<br>

Horizontal Rule

<hr>

Image

<img src="image.jpg" alt="Image description">

Audio

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

Video

<video controls>
    <source src="video.mp4" type="video/mp4">
</video>

Hyperlink

<a href="https://example.com">
    Visit Website
</a>

Table

<table>

    <tr>
        <th>Name</th>
    </tr>

    <tr>
        <td>Ram</td>
    </tr>

</table>

Form

<form>

    <input type="text">

    <button type="submit">
        Submit
    </button>

</form>

Important HTML Tags

TagPurpose
<h1>–<h6>Headings
<p>Paragraph
<br>Line break
<hr>Thematic break
<ul>Unordered list
<ol>Ordered list
<li>List item
<dl>Description list
<dt>Description term
<dd>Description details
<b>Bold text
<strong>Strong importance
<i>Italic text
<em>Emphasized text
<u>Underlined text
<sub>Subscript
<sup>Superscript
<img>Image
<audio>Audio
<video>Video
<a>Hyperlink
<table>Table
<tr>Table row
<th>Table heading
<td>Table data
<form>Form
<input>Input control
<select>Drop-down list
<option>Drop-down option
<textarea>Multi-line input
<button>Button
<iframe>Embedded webpage

Important Exam Points

  • An HTML element is a component of an HTML document.
  • HTML has six heading levels from <h1> to <h6>.
  • <h1> represents the highest heading level.
  • HTML supports unordered, ordered, and description lists.
  • <ul> creates an unordered list.
  • <ol> creates an ordered list.
  • <li> creates a list item.
  • <dl>, <dt>, and <dd> are used for description lists.
  • <p> defines a paragraph.
  • <br> inserts a line break.
  • <hr> creates a thematic break.
  • <b> and <strong> can display bold text.
  • <i> and <em> are used with italic/emphasized text.
  • <sub> creates subscript.
  • <sup> creates superscript.
  • <img> is used to display images.
  • src specifies the image source.
  • alt provides alternative text.
  • <audio> embeds audio.
  • <video> embeds video.
  • The controls attribute displays playback controls.
  • <a> defines a hyperlink.
  • href defines the hyperlink destination.
  • <table> creates a table.
  • <tr> creates a table row.
  • <th> creates a table heading cell.
  • <td> creates a table data cell.
  • colspan allows a cell to span columns.
  • rowspan allows a cell to span rows.
  • The old <frame> element is obsolete in HTML5.
  • <iframe> can embed another webpage in modern HTML.
  • <form> creates an HTML form.
  • <input> creates different input controls.
  • Radio buttons normally allow one selection from a group.
  • Checkboxes allow multiple selections.
  • <select> creates a drop-down list.
  • <option> defines choices in a drop-down list.
  • <textarea> provides multi-line text input.
  • <button> creates a clickable button.
KEEP LEARNING View All Posts

Discussion

Share a helpful question, idea, or explanation with other students.

Leave a Comment

Write a clear question, answer, or helpful explanation.
Your email will not be published.

Download Our Offline App

Study class-wise notes even when internet is not available. Get the app from Play Store.

Nepal eNotes offline app preview
Get it on Google Play