The syntax rules for HTML5 tags
HTML5, as the latest HTML standard, introduces many new tags and syntax rules, making web page structures clearer and more semantic. Understanding these tag syntax rules is crucial for writing high-quality web pages.
HTML5 Document Type Declaration
The HTML5 document type declaration is very simple—just add <!DOCTYPE html> at the beginning of the document. This declaration informs the browser that the current document uses the HTML5 standard.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Document</title>
</head>
<body>
<!-- Page content -->
</body>
</html>
Basic Syntax of HTML5 Tags
HTML5 tags typically consist of an opening tag, content, and a closing tag, with the basic format being <tagname>content</tagname>. Some tags are self-closing and do not require a closing tag.
<p>This is a paragraph</p>
<img src="image.jpg" alt="Example image">
New Structural Tags in HTML5
HTML5 introduces a series of semantic tags to better describe document structure:
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<section>
<p>Article content paragraph...</p>
</section>
</article>
</main>
<footer>
<p>Copyright Information</p>
</footer>
Attribute Syntax of HTML5 Tags
HTML5 tags can include various attributes, which usually appear as name/value pairs in the format name="value". Some attributes are Boolean and only require the attribute name without a value.
<input type="text" required disabled>
<video controls autoplay>
<source src="movie.mp4" type="video/mp4">
</video>
Form-Related Tags in HTML5
HTML5 introduces many new tags and attributes for forms:
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="date">Date:</label>
<input type="date" id="date" name="date">
<label for="range">Range:</label>
<input type="range" id="range" name="range" min="0" max="100">
<button type="submit">Submit</button>
</form>
Multimedia Tags in HTML5
HTML5 natively supports audio and video playback:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
</audio>
Global Attributes in HTML5
HTML5 defines some global attributes that can be used with all elements:
<div id="main" class="container" data-user="123" contenteditable="true">
Editable content
</div>
<p hidden>This paragraph is hidden</p>
Custom Data Attributes in HTML5
HTML5 allows the use of data-* attributes to store custom data:
<div id="user" data-user-id="12345" data-role="admin">
User Information
</div>
<script>
const user = document.getElementById('user');
console.log(user.dataset.userId); // Output: 12345
</script>
Semantic Text Tags in HTML5
HTML5 adds some semantic text tags:
<p>This is a paragraph containing <mark>highlighted</mark> text.</p>
<time datetime="2023-10-15">October 15</time>
<progress value="75" max="100"></progress>
Meta Information Tags in HTML5
The <meta> tag in HTML5 has more uses:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Website description">
Script and Style Tags in HTML5
Syntax for <script> and <style> tags in HTML5:
<style>
body {
font-family: Arial, sans-serif;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
console.log('Document loaded');
});
</script>
Comment Syntax in HTML5
HTML comment syntax remains unchanged:
<!-- This is an HTML comment -->
<div>
<!-- Multi-line comments
can be written like this -->
</div>
Character Entity References in HTML5
HTML5 supports various character entity references:
<p>© 2023 Company Name & Partners</p>
<p>10 > 5 && 5 < 10</p>
Tag Nesting Rules in HTML5
HTML5 has strict tag nesting rules—certain tags cannot contain other specific tags:
<!-- Correct -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<!-- Incorrect -->
<p>
<div>Cannot nest like this</div>
</p>
Boolean Attributes in HTML5
Boolean attributes in HTML5 can be abbreviated:
<input type="checkbox" checked>
<select>
<option selected>Default Option</option>
</select>
<video controls></video>
Tag Case Sensitivity in HTML5
HTML5 is case-insensitive for tag and attribute names, but lowercase is typically used:
<DIV CLASS="container"> <!-- Not recommended -->
<div class="container"> <!-- Recommended -->
Document Structure Integrity in HTML5
HTML5 documents do not require strict closing of all tags like XHTML:
<ul>
<li>Item 1
<li>Item 2
</ul>
Link Relationships in HTML5
The <link> and <a> tags in HTML5 support more relationship attributes:
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
<a href="about.html" rel="author">About the Author</a>
Microdata in HTML5
HTML5 supports microdata formats to add semantics to content:
<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">John Doe</span>
<span itemprop="jobTitle">Web Designer</span>
</div>
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
