The difference between tags, elements, and attributes
Basic Concepts of Tags, Elements, and Attributes
Tags are the most fundamental components of an HTML document, typically consisting of keywords enclosed in angle brackets. Tags come in two forms: opening tags and closing tags. For example, <p> is an opening tag, and </p> is a closing tag. Some tags are self-closing, such as <img> and <br>, which do not require closing tags.
An element is a complete structure composed of an opening tag, content, and a closing tag. For example, <p>This is a paragraph</p> is a complete paragraph element. Elements can contain text content or nest other elements.
Attributes are additional information that appears in opening tags, providing extra features or configurations for elements. Attributes usually come in name/value pairs, such as the href in <a href="https://example.com">Link</a>.
Specific Manifestations of Tags
HTML tags follow clear syntax rules:
- Opening tag:
<tagname> - Closing tag:
</tagname> - Self-closing tag:
<tagname />or<tagname>
<!-- Example of a regular tag -->
<div>This is a div element</div>
<!-- Example of a self-closing tag -->
<img src="image.jpg" alt="Example image">
<input type="text">
Common HTML tags include:
- Structural tags:
<html>,<head>,<body>,<div>,<span> - Text tags:
<p>,<h1>-<h6>,<strong>,<em> - List tags:
<ul>,<ol>,<li> - Form tags:
<form>,<input>,<button>,<select>
Complete Structure of an Element
A complete HTML element consists of the following parts:
- Opening tag
- Element content (can be text or other elements)
- Closing tag (for non-self-closing elements)
<!-- Element with text content -->
<p class="intro">This is a paragraph element</p>
<!-- Element containing other elements -->
<div id="container">
<h1>Title</h1>
<p>Paragraph content</p>
</div>
Elements can form nested structures, which constitute the DOM tree of an HTML document. For example:
<ul>
<li>First item
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Second item</li>
</ul>
Purpose and Types of Attributes
Attributes provide additional information or configuration options for elements and always appear in opening tags. Attributes typically consist of a name and a value in the format name="value".
Common types of attributes include:
- Global attributes: Apply to all HTML elements, such as
id,class,style,title - Element-specific attributes: Only apply to specific elements, such as
srcfor<img>andhreffor<a> - Event attributes: Used to bind JavaScript events, such as
onclick,onmouseover
<!-- Example of global attributes -->
<div id="main" class="container" title="Main content area"></div>
<!-- Example of element-specific attributes -->
<a href="page.html" target="_blank">Open new page</a>
<img src="photo.jpg" alt="Photo description" width="200" height="150">
<!-- Example of boolean attributes -->
<input type="checkbox" checked disabled>
<video controls autoplay loop></video>
Relationship and Differences Between the Three
Tags are the syntactic markers that define elements, elements are the complete structural units defined by tags, and attributes are the configuration options for elements. Their relationship can be illustrated with the following example:
<!-- This is a complete a element -->
<a href="https://example.com" target="_blank" rel="noopener">Visit example website</a>
<!-- Breakdown:
- Tags: <a> and </a>
- Element: The entire structure from <a> to </a>
- Attributes: href, target, and rel
-->
Key differences:
- Tags are merely syntactic markers, while elements are complete structural units.
- Attributes can only appear in opening tags.
- Elements can contain content and other elements, whereas tags and attributes cannot.
- Elements are represented as nodes in the DOM, while tags and attributes are just the syntax that defines elements.
Practical Considerations
When writing HTML, pay attention to the following practical points:
- Correct tag closure:
<!-- Correct -->
<p>Paragraph content</p>
<br>
<!-- Incorrect -->
<p>Paragraph content
<br></br>
- Use of quotation marks for attributes:
<!-- Recommended to use double quotes -->
<input type="text" value="Default value">
<!-- Single quotes are acceptable but not recommended -->
<input type='text' value='Default value'>
<!-- No quotes are acceptable in some cases but not recommended -->
<input type=text value=Default value>
- Shorthand for boolean attributes:
<!-- The following two notations are equivalent -->
<input disabled>
<input disabled="disabled">
- Use of custom data attributes:
<div data-user-id="12345" data-role="admin"></div>
Common Confusion Scenarios
Beginners often confuse the following concepts:
- Misuse of self-closing tags:
<!-- Correct -->
<img src="image.png" alt="Image">
<input type="text">
<!-- Incorrect -->
<img src="image.png" alt="Image"></img>
<input type="text"></input>
- Confusion between attributes and content:
<!-- value is an attribute -->
<input type="text" value="Input content">
<!-- Here is element content -->
<textarea>Text area content</textarea>
- Misunderstanding of global and specific attributes:
<!-- class is a global attribute and can be used on all elements -->
<div class="box"></div>
<p class="text"></p>
<!-- href is specific to <a> and cannot be used on other elements -->
<a href="page.html"></a>
<!-- Incorrect: <div href="page.html"></div> -->
Advanced Use Cases
- Use of ARIA attributes:
<button aria-label="Close" aria-hidden="true">×</button>
<div role="navigation" aria-labelledby="main-nav">
<h2 id="main-nav">Main navigation</h2>
<!-- Navigation content -->
</div>
- Microdata attributes:
<div itemscope itemtype="https://schema.org/Person">
<span itemprop="name">John Doe</span>
<span itemprop="jobTitle">Web Developer</span>
</div>
- Custom elements and attributes:
<x-gallery slides="5" autoplay>
<x-slide src="slide1.jpg"></x-slide>
<x-slide src="slide2.jpg"></x-slide>
</x-gallery>
Browser Parsing and DOM Representation
When a browser parses HTML, it converts tags, attributes, and content into DOM nodes:
<!-- HTML source -->
<div id="content" class="main">
<p data-info="important">Paragraph content</p>
</div>
Corresponding DOM structure:
- div element node
- id attribute node (value: "content")
- class attribute node (value: "main")
- p child element node
- data-info attribute node (value: "important")
- text node (value: "Paragraph content")
Validation and Best Practices
To write standards-compliant HTML, note the following:
- Use lowercase for tag and attribute names:
<!-- Recommended -->
<div class="container"></div>
<!-- Not recommended -->
<DIV CLASS="container"></DIV>
- Consistency in attribute value quotation:
<!-- Recommended -->
<meta charset="utf-8">
<!-- Not recommended -->
<meta charset=utf-8>
<meta charset='utf-8'>
- Avoid duplicate attributes:
<!-- Incorrect -->
<input type="text" type="password">
<!-- The browser will use the last definition -->
- Appropriate attribute order (though not mandatory, consistency improves readability):
<!-- Example order -->
<a id="link1" class="external" href="page.html" target="_blank" rel="noopener">Link</a>
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
上一篇：HTML文档的基本结构
下一篇：HTML文档类型声明
