HTML Elements & Attributes

Understanding HTML Elements

HTML elements are the building blocks of HTML pages. An HTML element is defined by a start tag, some content, and an end tag. Elements can be nested (placed within other elements) to create structured documents.

<tagname>Content goes here...</tagname>

The HTML element includes everything from the start tag to the end tag:

Start tag: Opens the element (e.g., <p>)
Content: The element's content
End tag: Closes the element (e.g., </p>)

Some elements have no content and are called empty elements or self-closing elements, like the <img> tag.

Common HTML Elements

Element	Description	Example
`<h1> to <h6>`	Headings (h1 is most important, h6 is least important)	`<h1>Main Heading</h1>`
`<p>`	Paragraph	`<p>This is a paragraph.</p>`
`<a>`	Anchor (hyperlink)	`<a href="https://example.com">Link text</a>`
`<img>`	Image (self-closing)	`<img src="image.jpg" alt="Description">`
`<div>`	Division (generic container)	`<div>Content here</div>`
`<span>`	Inline container	`Text with <span style="color:red">highlighted</span> word`
`<ul>, <ol>, <li>`	Unordered list, ordered list, list item	`<ul><li>Item 1</li></ul>`

HTML Attributes

HTML attributes provide additional information about HTML elements. Attributes are always specified in the start tag and usually come in name/value pairs like: name="value".

<tagname attribute="value">Content goes here...</tagname>

Common HTML Attributes

Attribute	Description	Example
`id`	Unique identifier for an element	`<div id="header">Header content</div>`
`class`	Specifies one or more class names for styling	`<p class="intro highlight">Text here</p>`
`style`	Inline CSS styling	`<p style="color:blue;">Blue text</p>`
`href`	Specifies URL for links	`<a href="https://example.com">Link</a>`
`src`	Specifies source for media elements	`<img src="image.jpg">`
`alt`	Alternative text for images	`<img src="image.jpg" alt="Description">`
`title`	Additional information (tooltip)	`<p title="More info">Hover over me</p>`

Global Attributes

Global attributes are attributes that can be used with any HTML element. Here are some important global attributes:

id - Specifies a unique id for an element
class - Specifies one or more classnames for an element
style - Specifies an inline CSS style for an element
title - Specifies extra information about an element (displayed as a tooltip)
lang - Specifies the language of the element's content
data-* - Used to store custom data private to the page or application
hidden - Specifies that an element is not yet, or is no longer, relevant
tabindex - Specifies the tabbing order of an element
contenteditable - Specifies whether the content of an element is editable or not

Boolean Attributes

Some attributes don't need a value. These are called boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

<input type="text" disabled>

Common boolean attributes include:

disabled - Disables an input element
checked - Pre-selects a checkbox or radio button
readonly - Makes an input field read-only
required - Makes an input field required
hidden - Hides an element
selected - Pre-selects an option in a dropdown

Best Practices

Always use lowercase for element names and attributes
Always quote attribute values using double quotes
Always close all HTML elements, even empty ones
Use semantic elements when appropriate
Avoid using too many div elements when semantic elements would be more appropriate
Use the id attribute sparingly and ensure values are unique
Use the class attribute for styling multiple elements
Always include the alt attribute for images
Validate your HTML using tools like the W3C Validator