348 views
HTML5 Tags
HTML5 introduced a variety of new elements and attributes that enhance the structure and semantics of web documents. Here are some of the important HTML5 tags and elements:
- : HTML5 documents start with the
<!DOCTYPE html>declaration, which specifies the document type and version. <html>: The root element of an HTML document that encapsulates all the content.<head>: Contains metadata about the document, such as the document title, character encoding, and linked stylesheets and scripts.<title>: Specifies the title of the document, which is displayed in the browser’s title bar or tab.<meta>: Provides metadata about the document, including character encoding, author, and description.<link>: Used to link external resources like stylesheets or icon files.<style>: Contains CSS code for styling the document.<script>: Includes JavaScript code that can be inline or reference an external script file.<base>: Specifies the base URL for relative URLs within the document.<body>: Contains the visible content of the document.<h1>,<h2>,<h3>,<h4>,<h5>,<h6>: Heading elements from highest (h1) to lowest (h6) indicating the hierarchy of headings.<p>: Represents a paragraph of text.<a>: Creates hyperlinks to other web pages or resources.<img>: Embeds images in the document.<ul>,<ol>,<li>: Elements for creating unordered and ordered lists, as well as list items.<table>,<tr>,<td>,<th>,<caption>: Tags for creating tables, table rows, table data cells, table header cells, and captions.<div>: A generic container for grouping and styling content.<span>: A generic inline container for styling content.<section>: Represents a section of a document, often used for grouping related content.<article>: Represents a self-contained composition within a document, like a news article or blog post.<header>and<footer>: Elements for defining the header and footer of a section or document.<nav>: Defines navigation menus.<aside>: Represents content that is tangentially related to the content around it, such as sidebars or advertising.<figure>and<figcaption>: Used for grouping media content (e.g., images) and their captions.<audio>and<video>: Tags for embedding audio and video content.<canvas>: Provides a drawing surface for JavaScript to create graphics.<svg>: Allows for the creation of scalable vector graphics.<form>and form elements: Used to create interactive forms for user input, including input fields, buttons, and labels.<label>: Associates a label with a form control for better user experience and accessibility.<input>: Provides various input types for forms, such as text, password, radio buttons, checkboxes, and more.<textarea>: Creates a multi-line text input area.<button>: Represents a clickable button.<select>and<option>: Elements for creating dropdown select menus.<details>and<summary>: Used to create disclosure widgets that reveal or hide content.<time>: Represents a specific period in time or a range of time.<progress>: Displays the completion progress of a task.<meter>: Represents a scalar measurement within a known range.<mark>: Highlights text within the document.<datalist>: Provides a list of predefined options for an<input>element.<output>: Represents the result of a calculation or user action.
These are just a selection of the many HTML5 tags and elements that you can use to structure and enrich your web documents. HTML5’s focus on semantics and enhanced multimedia support makes it a powerful tool for modern web development.