Français
English
About Us
Comprehensive Guide to PHP Elements
Uncategorized |
2025-02-19 12:49:08
Comprehensive Guide to HTML Elements
HTML (HyperText Markup Language) is the backbone of web development, providing the structure and layout of web pages. Below is a detailed explanation of all major HTML elements, categorized for better understanding.
1. HTML Document Structure
These elements define the essential structure of an HTML document.
<!DOCTYPE html>
- Declares the document type and version of HTML (HTML5 in this case).
- Ensures proper rendering in browsers.
<html>
- The root element of an HTML document.
- Contains all other elements.
- Example:
<!DOCTYPE html> <html lang="en"> </html>
<head>
- Contains metadata about the document, including title, character set, and linked resources.
- Does not display content directly.
<meta>
- Defines metadata such as character encoding, viewport settings, and description.
- Example:
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="A guide to HTML elements">
<title>
- Sets the webpage’s title displayed in the browser tab.
- Example:
<title>My First Webpage</title>
<link>
- Links external resources like stylesheets.
- Example:
<link rel="stylesheet" href="styles.css">
<script>
- Embeds JavaScript code.
- Example:
<script src="script.js"></script>
2. Text and Content Formatting Elements
<body>
- Contains all visible content of a webpage.
- Example:
<body> <h1>Welcome to My Website</h1> </body>
<h1> to <h6> (Headings)
- Define headings from most important (
h1) to least (h6). - Example:
<h1>Main Heading</h1> <h2>Subheading</h2>
<p> (Paragraph)
- Defines a block of text.
- Example:
<p>This is a paragraph of text.</p>
<br> (Line Break)
- Inserts a line break.
- Example:
Line one.<br>Line two.
<hr> (Horizontal Rule)
- Creates a horizontal line separator.
- Example:
<hr>
<strong> & <b>
<strong>: Defines important text (bold, with semantic meaning).<b>: Bold text without semantic importance.- Example:
<strong>Important text</strong> and <b>just bold text</b>.
<em> & <i>
<em>: Emphasized text (italic with semantic meaning).<i>: Italicized text without semantic meaning.- Example:
<em>Emphasized text</em> and <i>just italic text</i>.
<mark>
- Highlights text with a background color.
- Example:
<p>This is <mark>highlighted</mark> text.</p>
<small>
- Displays smaller-sized text.
- Example:
<small>Copyright © 2025</small>
<blockquote>
- Defines a block of quoted text.
- Example:
<blockquote>“This is a famous quote.”</blockquote>
<cite>
- Used to cite the title of a work.
- Example:
<cite>The Great Gatsby</cite>
<code>
- Displays computer code in a monospaced font.
- Example:
<code>print("Hello, World!")</code>
3. Lists and Tables
Ordered List (<ol>)
- A numbered list.
- Example:
<ol> <li>First item</li> <li>Second item</li> </ol>
Unordered List (<ul>)
- A bulleted list.
- Example:
<ul> <li>Item A</li> <li>Item B</li> </ul>
Table (<table>)
- Defines a table.
- Example:
<table border="1"> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Alice</td> <td>25</td> </tr> </table>
4. Forms and Input Elements
<form>
- Wraps input fields and buttons.
- Example:
<form action="/submit" method="post"> <input type="text" name="username"> <button type="submit">Submit</button> </form>
<input>
- Accepts user input.
- Types:
text,password,email,checkbox,radio,submit. - Example:
<input type="email" placeholder="Enter your email">
<textarea>
- Multi-line text input.
- Example:
<textarea rows="4" cols="50"></textarea>
<button>
- Clickable button.
- Example:
<button>Click Me</button>
5. Media Elements
<img>
- Displays an image.
- Example:
<img src="image.jpg" alt="Description">
<audio>
- Embeds an audio file.
- Example:
<audio controls> <source src="sound.mp3" type="audio/mpeg"> </audio>
<video>
- Embeds a video file.
- Example:
<video controls> <source src="video.mp4" type="video/mp4"> </video>
6. Links and Navigation
<a> (Anchor)
- Creates a hyperlink.
- Example:
<a href="https://example.com">Visit Example</a>
<nav>
- Represents a navigation section.
- Example:
<nav> <a href="#home">Home</a> <a href="#about">About</a> </nav>
7. Semantic Elements
<header>
- Defines the introductory section.
<section>
- Groups related content.
<article>
- Represents self-contained content.
<aside>
- Sidebar content.
<footer>
- Defines footer content.
This guide covers the most commonly used HTML elements, ensuring a solid foundation for web development.
Make Money
Product Review
Social Media
Excel
Graphics design
Freelancing/Consulting
E-commerce and Digital Marketing
Business
Self Development
Tips to Success
Video Editing
Photo Editing
Website Promotion
YouTube
Computer
Phone
Music
Spirituality & Faith
School
Tech & Digital
Gaming
News
Creative Arts & Design
Medical
Causes
Networking
