<html>:- The root element that wraps the entire HTML content of a webpage.
- Contains two main sections:
<head>and<body>. - Specifies the language of the document using the
langattribute.
<head>:- Contains meta-information about the document, such as title, character encoding, and links to external resources.
- Includes elements like
<title>,<meta>,<link>,<style>,<script>, etc.
<body>:- Contains the visible content of the webpage, including text, images, links, forms, etc.
- Elements inside
<body>are displayed in the browser window.
<h1>to<h6>:- Heading elements used to define headings of different levels.
<h1>being the highest level (most important) and<h6>being the lowest.
<p>:- Represents a paragraph of text.
- Used to structure and organize textual content.
<a>:- Anchor element used to create hyperlinks.
- Requires the
hrefattribute to specify the URL destination.
<img>:- Used to embed images in a webpage.
- Requires the
srcattribute to specify the image file path. - Can include optional attributes like
altfor alternative text,width,height, etc.
<ul>and<ol>:<ul>represents an unordered list (bulleted list).<ol>represents an ordered list (numbered list).- List items are defined using the
<li>element.
<table>:- Used to create tabular data.
- Consists of rows (
<tr>) and cells (<td>for data cells,<th>for header cells).
<form>:- Used to create HTML forms for user input.
- Contains input fields like text fields (
<input type="text">), checkboxes (<input type="checkbox">), radio buttons (<input type="radio">), etc. - Can include buttons (
<button>) for form submission.
<input>:- Used within forms to create various types of input fields.
- Attributes like
type,name,value,placeholder, etc., define the behavior and appearance of the input field.
<textarea>:- Used to create a multiline text input field within a form.
- Allows users to enter multiple lines of text.
<div>and<span>:<div>(division) and<span>are generic container elements used for grouping and styling content.<div>is a block-level element, while<span>is an inline element.
<header>,<nav>,<section>,<article>,<footer>:- HTML5 introduced semantic elements for better structuring of web content.
<header>represents the header of a webpage or a section.<nav>represents a navigation menu.<section>represents a thematic grouping of content.<article>represents an independent piece of content.<footer>represents the footer of a webpage or a section.
These are just some of the fundamental HTML elements used for creating the structure and content of webpages. Understanding how and when to use each element is essential for building well-structured and semantic HTML documents.
Here some more details:->
<html>Element:- The
<html>element is the root element of an HTML document. - It defines the beginning and end of the HTML document.
- All other elements are nested within the
<html>element. - The
langattribute specifies the primary language of the document for accessibility and SEO purposes.
- The
<head>Element:- The
<head>element contains meta-information about the HTML document. - It includes elements like
<title>,<meta>,<link>,<style>,<script>, etc. - The content inside the
<head>element is not displayed directly on the webpage but provides important information to browsers and search engines.
- The
<body>Element:- The
<body>element contains the content of the webpage that is visible to users. - It includes elements like headings, paragraphs, images, links, forms, etc.
- Content inside the
<body>element is rendered in the browser window.
- The
<a>(Anchor) Element:- The
<a>element creates hyperlinks to other web pages, files, or specific locations within the same page. - It requires the
hrefattribute to specify the destination URL. - The
targetattribute can be used to control how the linked resource is displayed (e.g., in a new tab or window).
- The
<img>(Image) Element:- The
<img>element embeds images into the webpage. - It requires the
srcattribute to specify the image file path or URL. - The
altattribute provides alternative text that is displayed if the image cannot be loaded or for accessibility purposes.
- The
<form>Element:- The
<form>element creates a container for form controls like input fields, buttons, and dropdowns. - It uses the
actionattribute to specify the URL where the form data is submitted. - The
methodattribute defines the HTTP method used to send the form data (GET or POST).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Simple Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Simple Webpage</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Us</h2>
<p>This is a simple webpage created using HTML.</p>
<img src="example.jpg" alt="Example Image">
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Fill out the form below to get in touch:</p>
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<button type="submit">Submit</button>
</form>
</section>
<footer>
<p>© 2024 My Simple Webpage</p>
</footer>
</body>
</html>
This example demonstrates the use of HTML elements such as
<header>, <nav>, <section>, <h1>, <h2>, <p>, <img>, <form>, <input>, <textarea>, <button>, and <footer> to create a basic webpage structure with navigation, content sections, and a contact form. CSS styles are also included within the <head> section to provide basic styling for the webpage.
0 Comments