Elements in HTML | HTML5 for Web Development - Software Development PDF Download

Introduction

HTML (Hypertext Markup Language) is the standard markup language used for creating web pages. It consists of a set of elements, or tags, that define the structure and content of a web page. In this article, we will explore some of the commonly used HTML elements and learn how to use them effectively.

Heading Elements

Heading elements are used to define headings and subheadings on a web page. They are represented by '<h1>' to '<h6>' tags, where '<h1>' represents the highest level heading and '<h6>' represents the lowest level heading.

<h1>This is a Heading Level 1</h1>

<h2>This is a Heading Level 2</h2>

<h3>This is a Heading Level 3</h3>

Paragraph Element

The '<p>' element is used to define a paragraph of text. It is commonly used to separate blocks of text and provide structure to the content.

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

Anchor Element

The '<a>' element is used to create hyperlinks. It is commonly used to link to other web pages, files, or specific sections within a page.

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

Image Element

The '<img>' element is used to insert images into a web page. It requires a 'src' attribute that specifies the path to the image file.

<img src="https://edurev.gumlet.io/mage.jpg" alt="Description of the image">

List Elements

HTML provides two types of lists: ordered lists ('<ol>') and unordered lists ('<ul>'). The list items are defined using the '<li>' element.
Ordered List:

<ol>

  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>

</ol>

Unordered List:

<ul>

  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>

</ul>

Table Element

The '<table>' element is used to create tables on a web page. Tables are structured using rows ('<tr>') and columns ('<td>').

<table>

  <tr>

    <td>Row 1, Column 1</td>

    <td>Row 1, Column 2</td>

  </tr>

  <tr>

    <td>Row 2, Column 1</td>

    <td>Row 2, Column 2</td>

  </tr>

</table>

Form Element

The '<form>' element is used to create interactive forms on a web page. It contains various form elements like input fields, checkboxes, radio buttons, and buttons.

<form>

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

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


  <input type="submit" value="Submit">

</form>

Sample Problems

Problem 1: Create a web page with a heading that says "Welcome to My Website."

<!DOCTYPE html>

<html>

<head>

  <title>My Website</title>

</head>

<body>

  <h1>Welcome to My Website</h1>

</body>

</html>

Problem 2: Create a list of your favorite fruits using an unordered list.

<ul>

  <li>Apple</li>

  <li>Orange</li>

  <li>Banana</li>

</ul>

Problem 3:  Insert an image of a cat named "Fluffy.jpg" into your web page.

<img src="https://edurev.gumlet.io/luffy.jpg" alt="Picture of a cat named Fluffy">

The document Elements in HTML | HTML5 for Web Development - Software Development is a part of the Software Development Course HTML5 for Web Development.
All you need of Software Development at this link: Software Development
20 videos|15 docs|2 tests

Top Courses for Software Development

20 videos|15 docs|2 tests
Download as PDF
Explore Courses for Software Development exam

Top Courses for Software Development

Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
10M+ students study on EduRev
Related Searches

Elements in HTML | HTML5 for Web Development - Software Development

,

Viva Questions

,

study material

,

Free

,

Extra Questions

,

Elements in HTML | HTML5 for Web Development - Software Development

,

MCQs

,

shortcuts and tricks

,

Elements in HTML | HTML5 for Web Development - Software Development

,

mock tests for examination

,

pdf

,

Sample Paper

,

practice quizzes

,

Important questions

,

Summary

,

video lectures

,

ppt

,

Exam

,

Objective type Questions

,

Previous Year Questions with Solutions

,

past year papers

,

Semester Notes

;