checkmark

HTML

Introduction to Web and HTML

How the Web Works What is HTML Why Learn HTML

HTML Basics

HTML Structure and Syntax HTML Tags HTML Elements HTML Attributes Anatomy of an HTML Document Creating Your First HTML Page

HTML Document Structure

Document Type Declaration (<!DOCTYPE>) The `<html>` Element The `<head>` Section The `<meta>` Element The `<title>` Element The `<body>` Element HTML Comments

Text Formatting

Headings (<h1> to <h6>) Paragraphs (`<p>`) Line Breaks (`<br>`) Text Formatting Tags Preformatted Text (`<pre>`)

Lists

Unordered Lists (<ul> and <li>) Ordered Lists (<ol> and <li>) Definition Lists (<dl>, <dt>, and <dd>)

Links

Anchor Tags (<a>) Internal Links in html External Links in html Links to Email Addresses Linking to Other Resources Link Target Attributes Image Links

Images

Inserting Images (<img>) Image Attributes Image Formats (JPEG, PNG, GIF) Image Size and Alignment Image Maps

HTML Forms

HTML Form Structure Text Fields and Textareas Radio Buttons and Checkboxes Dropdowns / Select Box Text, Password, and Email Inputs in HTML Forms Date and Time Inputs in HTML Forms Submit and Reset Buttons Form Elements Attributes Form Validation Grouping Form Elements File Uploads Creating a Contact Form

Tables

Table Structure Table Rows and Columns Table Headers Table Data Table Captions Table Borders and Styling Spanning Rows and Columns

Multimedia

Embedding Audio (<audio>) Embedding Video (<video>) Video Formats (MP4, WebM, Ogg) Multimedia Attributes

HTML5 Sematic Elements

HTML5 Structural Elements Role of Semantic Elements Accessibility and SEO

HTML Entities

Special Characters and Symbols Common HTML Entities
menu Back to Edkool

HTML Attributes

HTML Attributes

HTML attributes provide additional information about HTML elements and modify their behavior or appearance. They are defined within the opening tag of an element and consist of a name and a value, separated by an equals sign. Attributes enhance the functionality and styling of HTML elements. Let's explore some common HTML attributes:

1. class

The class attribute is used to assign one or more class names to an element, enabling CSS styling and JavaScript manipulation. Multiple elements with the same class can be styled consistently.

<p class="highlight">This is a highlighted paragraph.</p>

2. id

The id attribute assigns a unique identifier to an element. It's used for scripting and styling purposes and must be unique within a page.

<div id="header">This is the page header.</div>

3. src

The src attribute specifies the source URL for elements like images, audio, and video. It indicates where the browser should fetch the content.

<img src="image.jpg" alt="A sample image">

4. href

The href attribute is used in anchor (<a>) elements to define the destination URL of a hyperlink.

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

5. alt

The alt attribute provides alternative text for images, which is displayed if the image cannot be loaded or by assistive technologies for accessibility.

<img src="image.jpg" alt="A sample image">

6. title

The title attribute offers additional information about an element when the user hovers over it, such as a tooltip.

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

7. style

The style attribute allows you to apply inline CSS styles directly to an element. While it's useful for quick styling, it's often better to use external or internal stylesheets for consistency.

<p style="color: red; font-size: 16px;">This is styled using the style attribute.</p>

8. disabled

The disabled attribute is commonly used with form elements like buttons and inputs to disable or make them non-interactive.

<input type="text" disabled>
<button disabled>Click me (disabled)</button>

9. target

The target attribute in anchor (<a>) elements specifies where the linked content should open. Common values include _blank to open in a new tab or window and _self to open in the same window.

<a href="https://www.example.com" target="_blank">Visit Example.com in a new tab</a>

10. data-*

Custom data-* attributes allow you to store custom data within an HTML element. These attributes are often used by JavaScript for dynamic content.

<div data-product-id="123" data-price="19.99">Product details</div>

These are just a few examples of HTML attributes. HTML offers a wide range of attributes that cater to various elements and their specific needs. By understanding and using attributes effectively, you can create dynamic, interactive, and visually appealing web pages.

Previous HTML Elements
Next Anatomy of an HTML Document