Html – Element
An HTML element is everything from the opening tag to the closing tag, including any content in between. Elements define the structure and content of the web page. In basic terms, an HTML element is a part of a web page, such as a paragraph, a link, an image, or a section. Each element is represented by a tag in the HTML code, which tells the browser how to display the content.
Components of an HTML Element
- Tags: HTML elements are usually made up of an opening tag and a closing tag. Tags are written within angle brackets, like <p>. The closing tag has a forward slash before the tag name, like </p>. Some elements are self-closing and don’t need a closing tag, such as <br>.
- Content: The content is placed between the opening and closing tags. For example, in the element <p>Hello, world!</p>, “Hello, world!” is the content.
- Attributes: Tags can also have attributes that provide additional information about the element. Attributes are written within the opening tag and usually come in name-value pairs, like style=”color:red” For example, <p style=”color:red”> “Hello, world!” </p> is a paragraph element with a inline style attribute.
Example:
This Example defines a paragraph element with the text “Hello, world!” and styles the text to be red.
Common HTML Elements
Here’s a table listing some of the common HTML elements
| Element | Description | Example |
|---|---|---|
| <html> | The root element of an HTML document. | <html>..</html> |
| <head> | Contains meta-information about the document. | <head>…</head> |
| <title> | Sets the title of the document (shown in the browser tab). | <title>Page Title</title> |
| <body> | Contains the content of the document. | <body>…</body> |
| <h1> to <h6> | Headings, <h1> is the highest (largest), <h6> the lowest (smallest). | <h1>Main Heading</h1> |
| <p> | Defines a paragraph. | <p>This is a paragraph.</p> |
| <a> | Defines a hyperlink. | <a href=”https://example.com”>Link text</a> |
| <img> | Embeds an image. | <img src=”image.jpg” alt=”An image”> |
| <ul> | Defines an unordered (bulleted) list. | <ul>…</ul> |
| <ol> | Defines an ordered | <ol>…</ol> |
| <li> | Defines a list item. | <ul><li>Item 1</li><li>Item 2</li></ul> |
| <div> | Defines a division or section. | <div>Content here</div> |
| <span> | Defines a section in a document for inline elements. | <span>Text here</span> |
| <form> | Defines an HTML form for user input. | <form>…</form> |
| <input> | Defines an input control. | <input type=”text”> |
| <button> | Defines a clickable button. | <button>Click me</button> |
| <table> | Defines a table | <table>…</table> |
| <tr> | Defines a row in a table. | <tr>…</tr> |
| <td> | Defines a cell in a table. | <tr><td>Data</td></tr> |
| <th> | Defines a header cell in a table. | <tr><th>Header</th></tr> |
Example of Common HTML Elements
This is an example HTML document containing various HTML elements, such as headings, paragraphs, links, images, lists, and a form, each serving different purposes like providing content, navigation, and user interaction.
Example
Output
In this example:
- The <!DOCTYPE html> tells the browser that the document is an HTML5 document.
- The <html> element wraps all the content on the page.
- The <head> element contains meta-information about the document, like the title.
- The <title> element sets the page title, which appears in the browser tab.
- The <body> element contains all the content displayed on the web page.
- The <h1> element defines a top-level heading.
- The <p> element defines a paragraph.
- The <a> element defines a hyperlink. The href attribute specifies the URL of the link.
- The <ol> element defines an ordered (numbered) list, and <li> elements define list items.
- The <form> element defines a form for user input.
- The <label> elements provide labels for the input fields.
- The <input> elements define input fields, type=”text” specifies a text input field, and type=”email” specifies an email input field.
- The <button> element defines a button that can be clicked to submit the form.
Nested HTML Elements
HTML elements can also contain other HTML elements. This is known as nesting.
<div>
<h1>Welcome</h1>
<p>This is a paragraph inside a div element.</p>
</div>
In this example:
- The <div> element contains both the <h1> and <p> elements.
- The <h1> element contains the text “Welcome”.
- The <p> element contains the text “This is a paragraph inside a div element.”
Course Video
YouTube Reference :
Practice Scenarios
Scenario 1: Adding Images
Objective: Add an image to a web page with a caption.
Expected Output:
- A heading saying “My Favorite Image”.
- An image displayed with the specified URL (” https://iqratechnology.com/wp-content/uploads/2024/05/image.jpg) and dimensions of 200 pixels wide and 150 pixels tall.
- A caption below the image saying “This is a beautiful scenery”.
<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
</head>
<body>
<h1>My Favorite Image</h1>
<img src=” https://iqratechnology.com/wp-content/uploads/2024/05/image.jpg “>
<p>This is a beautiful scenery.</p>
</body>
</html>
Output:
Scenario 2: Creating Nested Elements
Objective: Nest elements within a <div> container
Expected Output:
- A heading saying “My Nested Elements”.
- A <div> containing a subheading and a paragraph.
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>My Nested Elements</h1>
<div style=”border: 1px solid black; padding: 10px;”>
<h2>Subheading within Div</h2>
<p>This paragraph is inside a div element.</p>
</div>
</body>
</html>
Output:
Scenario 3: Creating a Form
Objective: Create a form with input fields for name and email, and a submit button.
Expected Output:
- Heading: Contact Us
- Form:
- Name: [Input Field]
- Email: [Input Field]
- Submit Button]
<!DOCTYPE html>
<html>
<head>
<title>Contact Form</title>
</head>
<body>
<h2>Contact Us</h2>
<form>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name”><br>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email”><br>
<button type=”submit”>Submit</button>
</form>
</body>
</html>
Output:
Scenario 4: Combined Practice Scenarios Document
Objective: Create a web page that includes an image with a caption, nested elements within a <div>, and a form with input fields and a submit button.
Expected Output:
- A heading saying “My Favorite Image”, and An image displayed with the specified URL and dimensions of 200 pixels wide and 150 pixels tall.
- A caption below the image saying “This is a beautiful scenery”.
- A heading saying “My Nested Elements”, and A <div> containing a subheading and a paragraph, styled with a border and padding.
- A heading saying “Contact Us”, A form with input fields for name and email, and a submit button.
Output:
