( Section 1 Section 2 Section 4 Section 5)

HTML attributes

HTML attributes are special words used within the opening tag of an HTML element to provide additional information about that element. They configure and adjust the element's behavior, appearance, or functionality.

All HTML elements can have attributes

Attributes provide additional information about elements

Attributes are always specified in the start tag

Attributes usually come in name/value pairs like: name="value"

Key characteristics of HTML attributes:

Location:

Attributes are always specified within the opening tag of an HTML element.

Syntax:

They typically come in name/value pairs, formatted as name="value". The value is enclosed in quotation marks.

Syntax of HTML Attributes:

Attributes generally follow a name-value pair structure, separated by an equals sign (=), and the value is enclosed in quotation marks (either single or double quotes).

Code

<element attribute-name="attribute-value">Content</element>

Key Components:

element: The name of the HTML element (tag) (e.g., img, a, div, p).

attribute-name: The specific name of the attribute (e.g., src, href, class, id, style). These names are predefined by the HTML specification.

attribute-value: The data or setting associated with the attribute. This value provides the specific information or configuration for that attribute.

Examples:

<h1 title="First program">SGRCM COLLEGE</h1>

<p title=" A computer science portal for students">sayadasite </p>

src attribute for <img>: Specifies the source URL of an image.

Purpose:

Attributes modify the default functionality of an element or provide essential information for its proper rendering or interaction.

Scope:

Some attributes are specific to certain HTML elements (e.g., src for <img>, href for <a>), while others are global attributes that can be applied to most HTML elements (e.g., id, class, style).

Optionality:

While many attributes are optional, some are crucial for an element to function as intended (e.g., src for <img> to display an image).

Based on their function and scope, HTML attributes are categorized into several types

1. Global Attributes

2. Event Attributes

3. Boolean Attributes

4. Specific Attributes

Global Attributes:

These attributes can be applied to almost any HTML element. They provide core functionality or information that is generally applicable across the document.

id: Specifies a unique identifier for an element.

class: Assigns one or more class names to an element, used for styling or scripting both design and functionality.

style: Applies inline CSS styles directly to an element.

lang: Specifies the language of the element's content.

title: Provides advisory information about the element, often displayed as a tooltip.

data-*: Allows for custom data attributes to store private data for the page or application.

HTML id Attribute

The HTML id attribute is used to specify a unique id for an HTML element.

You cannot have more than one element with the same id in an HTML document.

The id Attribute

The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.

The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.

The syntax for id is:

Write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.

#myHeader {}

<h1 id="myHeader">My Header</h1>

In the following example we have an <h1> element that point to the id name "myHeader". This <h1> element will be styled according to the #myHeader style definition in the head section:

Example

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
<h1 id="main-heading">Welcome to My Page</h1>
<p id="introduction-paragraph">This is a paragraph with a unique ID.</p>
<div id="section-one">
<h2>Section One</h2>
<p>Content for section one.</p>
</body>
</html>

Output

Note: The id name is case sensitive!

Note: The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.).

Class attribute in HTML

The class attribute is used to assign one or more class names to an HTML element. This attribute serves as a powerful mechanism for grouping or classifying elements, enabling consistent styling and behavior across multiple elements on a webpage.

Key characteristics and uses of the class attribute:

Grouping Elements:

It allows you to group different HTML elements together under a common class name, regardless of their element type (e.g., div, p, span, h1).

Difference between Class and ID

A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:

Syntax

.city{}

<h2 class="city">London</h2>

Example

Output

My Cities

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

Difference between Class and ID

A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:

Class Attribute

Syntax

.country{}

<h2 class="country">CHINA</h2>

Examples of HTML Class Attribute

Here is a basic example of an HTML Class Attribute

1. Using the Same Class in Multiple HTML Tags

The HTML class attribute can be applied to various tags, allowing multiple elements to share a common classification. This enables consistent styling or functionality across different types of elements, enhancing design cohesion and simplifying maintenance.

Example: This example shows the use of the classes in HTML.

<!DOCTYPE html>

<html>

<head>

<style>

.country {

background-color: black;

color: white;

padding: 8px;

}

</style>

</head>

<body>

<h2 class="country">CHINA</h2>

<p>

China has the largest population

in the world.

</p>

<h2 class="country">INDIA</h2>

<p>

India has the second largest

population in the world.

</p>

<h2 class="country">UNITED STATES</h2>

<p>

United States has the third largest

population in the world.

</p>

</body>

</html>

Output:

Same Class in Multiple HTML Tags

Explanation:

In the above example each heading (<h2>) is assigned the class "country" using the class attribute.

The CSS selector .country targets multiple elements with the class "country" to apply styling.

Styling defined for the "country" class is applied uniformly to all headings tagged with it.

Using class attributes ensures consistent styling across headings, simplifying design management.

2. Using Multiple Classes on a Single Element

HTML allows an element to have multiple classes by separating class names with spaces. This enables a more modular and flexible approach to styling, where an element can share common styles but also have unique styles.

Example: In this example, we will use more than one class.

<!DOCTYPE html>

<html>

<head>

<style>

.country {

color: white;

padding: 10px;

}

.china {

background-color: black;

}

.india {

background-color: blue;

}

.usa {

background-color: red;

}

center {

padding: 20px;

}

</style>

</head>

<body>

<h2 class="country china">CHINA</h2>

<h2 class="country india">INDIA</h2>

<h2 class="country usa">UNITED STATES</h2>

</center>

</body>

</html>

Output:

Program to show using a <div> section in a document that is styled with CSS:

<!DOCTYPE html>

<html>

<head>

<style>

.myDiv {

border: 5px outset red;

background-color: lightblue;

text-align: center;

}

</style>

</head>

<body>

<h1>The div element</h1>

<h2>This is a heading in a div element</h2>

<p>This is some text in a div element.</p>

</div>

<p>This is some text outside the div element.</p>

</body>

</html>

Output

The style attribute in HTML

Style attribute is used to apply inline CSS styles directly to an individual HTML element. This allows for specific styling rules to be applied without using external stylesheets or internal <style> tags.

Syntax:

<tagname style="property:value; property:value;">Content</tagname>

<h1 style="color: blue; text-align: center;">This is a blue, centered heading.</h1>

Example:

<!DOCTYPE html>
<html>
<head>
<title>HTML Style Attribute Example</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">This is a blue, centered heading.</h1>
<p style="font-size: 18px; background-color: lightgreen; padding: 10px;">
This paragraph has a larger font, a light green background, and padding.
</p>
<div style="border: 2px solid purple; margin: 20px;">
This div has a purple border and a margin around it.
</div>
</body>
</html>

Output

The <h1> element's text color is set to blue and aligned to the center.

The <p> element's font size is increased, its background color is set to light green, and it has internal padding.

The <div> element has a 2-pixel solid purple border and a 20-pixel margin around its external edges.

Difference between style tag and style attribute

The style tag and the style attribute in HTML both serve to apply CSS styles to a web page, but they differ in their scope and implementation:

1. style Tag:

Location:

The <style> tag is typically placed within the <head> section of an HTML document.

Scope:

It defines internal CSS, meaning the styles declared within it apply to multiple elements on the entire HTML page based on selectors (e.g., h1, .my-class, #my-id).

Syntax:

It contains CSS rules, including selectors and property-value pairs within curly braces.

<head>
<style>
    h1 {
      color: blue;
      font-size: 24px;
    }
    .highlight {
      background-color: yellow;
    }
</style>
</head>

2. style Attribute:

Location:

The style attribute is added directly to the opening tag of a specific HTML element.

Scope:

It defines inline CSS, meaning the styles declared within it apply only to the individual element where the attribute is present.

Syntax:

It contains a list of CSS property-value pairs separated by semicolons, without selectors or curly braces.

<p style="color: green; font-weight: bold;">This text is styled inline.</p>

Key Differences Summarized:

Scope:

The style tag offers page-wide styling, while the style attribute provides element-specific styling.

Specificity:

Inline styles (from the style attribute) generally have higher specificity than internal styles (from the style tag), meaning they will override conflicting styles unless the !important keyword is used in the style tag or an external stylesheet.

Reusability:

Styles defined in the style tag can be reused across multiple elements using selectors, while inline styles are not easily reusable.

Maintainability:

For larger projects, using external stylesheets (linked with <link> tag) or the style tag is generally preferred for better organization and maintainability compared to extensive use of inline style attributes.

Lang attributes

The lang attribute in HTML specifies the primary language of the content within an element. It is a global attribute, meaning it can be applied to any HTML element.

Syntax

<p lang="fr">Ce paragraphe est écrit en français.</p>

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Language Example</title>
</head>
<body>
    <p>This paragraph is written in English.</p>
    <p lang="fr">Ce paragraphe est écrit en français.</p>
    <div lang="es">

<p>Este es un ejemplo de contenido en español.</p>
</div>

<p>Say hello in Korean: <span lang="ko">안녕하세요</span>.</p>
</body>
</html>

Output

Explanation of the example:

<html lang="en">:

This line declares that the primary language of the entire HTML document is English. This is important for accessibility tools, search engines, and browsers for proper rendering and interpretation.

<p>This paragraph is written in English.</p>:

This paragraph inherits the lang="en" attribute from the <html> tag, so its language is implicitly English.

<p lang="fr">Ce paragraphe est écrit en français.</p>:

This paragraph explicitly overrides the document's default language by setting its lang attribute to fr (French).

<div lang="es">...</div>:

This div element and all its child elements (like the h2 and p inside it) are declared to be in Spanish (es).

<span lang="ko">안녕하세요</span>:

Within an English paragraph, a specific word or phrase is marked as Korean (ko) using the <span> tag with the lang attribute.

Key points about the lang attribute:

It uses ISO language codes (e.g., en for English, fr for French, es for Spanish, ko for Korean, de for German).

Country codes can also be added for more specific language variations (e.g., en-US for American English, en-GB for British English).

It improves accessibility for screen readers and other assistive technologies.

It assists search engines in understanding the content's language, which can be beneficial for SEO.

It can influence how browsers render text, especially for languages with complex typography.

Title attributes

The title attribute specifies extra information about an element.

The information is most often shown as a tooltip text when the mouse moves over the element.

The title attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful).

Syntax

<element_name title="Your tooltip text here">
Content of the element
</element_name>

<h2 title="I'm a header">The title Attribute</h2>

Program to show title attribute

<!DOCTYPE html>

<html>

<body>

<h2 title="I'm a header">The title Attribute</h2>

<p title="I'm a tooltip">Mouse over this paragraph, to display the title attribute as a tooltip.</p>

</body>

</html>

Output

The title Attribute

Mouse over this paragraph, to display the title attribute as a tooltip.

Program to show title tag

<!DOCTYPE html>
    <html>
    <head>
        <title>This is the Title of My Page</title>
    </head>
    <body>
        
    </body>
    </html>

Output

Data attributes

The data-* attribute is used to store custom data private to the page or application.

The data-* attribute gives us the ability to embed custom data attributes on all HTML elements.

The stored (custom) data can then be used in the page's JavaScript to create a more engaging user experience (without any Ajax calls or server-side database queries).

The data-* attribute consist of two parts:

The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-"

The attribute value can be any string

Syntax

Example

<ul>
  <li data-animal-type="bird">Owl</li>
  <li data-animal-type="fish">Salmon</li>
  <li data-animal-type="spider">Tarantula</li>
</ul>

Program to show data attribute

<!DOCTYPE html>

<html>

<head>

function showDetails(animal) {

let animalType = animal.getAttribute("data-animal-type");

alert("The " + animal.innerHTML + " is a " + animalType + ".");

}

</script>

</head>

<body>

<h1>Species</h1>

<p>Click on a species to see what type it is:</p>

<ul>

<li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>

<li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>

</ul>

</body>

</html>

Output

Sayadasite

Multiple Ads

Search

Menu Bar

Introduction to web technology Section 3

My Cities

London

Paris

Tokyo

The title Attribute

No comments: