HTML Attributes & Meta

HTML Attributes and Meta Tags

Global attributes work on any element:

id — unique identifier (only one per page)
class — CSS class names (space-separated)
data-* — custom data attributes
style — inline CSS

<div id="main" class="container dark" data-theme="night">
  Content
</div>

Meta tags go inside <head> and provide metadata about the page:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Page description for search engines">
  <title>Page Title</title>
</head>

charset="UTF-8" — character encoding (always include this)
viewport — makes the page responsive on mobile

Loading scripts: When including JavaScript with <script>, use defer or async to avoid blocking page rendering:

<script src="app.js" defer></script>   <!-- runs after HTML is parsed -->
<script src="analytics.js" async></script> <!-- runs as soon as downloaded -->

defer preserves script order and waits for the DOM to be ready — use it for most scripts. async is best for independent scripts like analytics that don't depend on the DOM.

Your Task

Write a complete HTML document with <meta charset>, <meta name="viewport">, and a <div> using id, class, and data-* attributes.

← Previous Next →

HTML preview loading...

Click "Run" to execute your code.