HTML
Structural Tags
<html>: Defines the root of an HTML document.<head>: Contains meta-information about the HTML document.<title>: Defines the title of the document.<body>: Contains the visible content of the document.<header>: Represents introductory content.<footer>: Represents a footer for a document or section.<nav>: Defines navigation links.<main>: Specifies the main content of the document.<section>: Represents a generic section of content.<article>: Represents an independent piece of content.
Text Formatting Tags
<p>: Defines a paragraph.<h1>to<h6>: Heading tags from largest (h1) to smallest (h6).<strong>or<b>: Indicates strong importance.<em>or<i>: Emphasizes text.<u>: Underlines text.<strike>: Strikes through text (deprecated, use CSS instead).<sup>: Superscript text.<sub>: Subscript text.
Lists
<ul>: Defines an unordered list.<ol>: Defines an ordered list.<li>: Defines a list item.
Links and Images
<a>: Defines a hyperlink.<img>: Embeds an image.
Tables
<table>: Defines a table.<tr>: Defines a row in a table.<th>: Defines a header cell in a table.<td>: Defines a standard cell in a table.
Forms
<form>: Defines an HTML form for user input.<input>: Defines an input control.<textarea>: Defines a multiline input control.<button>: Defines a clickable button.<select>: Defines a dropdown list.<option>: Defines an option in a dropdown list.<label>: Defines a label for an input element.
Miscellaneous
<div>: Defines a division or section in an HTML document.<span>: Defines a section in a document for styling purposes.<br>: Inserts a single line break.<hr>: Represents a thematic break between paragraphs.<!-- -->: Defines a comment.
Remember to close tags properly and use them according to their semantic meaning.
Less Known But Useful Tags
<details>: Defines additional details that the user can view or hide.<summary>: Defines a visible heading for the<details>element.<abbr>: Defines an abbreviation or acronym.<time>: Represents a specific period in time.<progress>: Represents the progress of a task.<meter>: Represents a scalar measurement within a known range.<figure>: Specifies self-contained content, like illustrations, diagrams, photos, etc.<figcaption>: Represents a caption or legend for a<figure>element.<cite>: Defines the title of a creative work (e.g., a book, a movie, a song).<code>: Defines a piece of computer code.
HTML Tags for Media Rendering
Here are some HTML tags useful for rendering images, videos, and audio:
Images
<img>: Embeds an image.
Example:<img src="image.jpg" alt="Description"><figure>: Specifies self-contained content, like illustrations, diagrams, photos, etc.
Example:<figure><img src="image.jpg" alt="Description"><figcaption>Caption</figcaption></figure>
Video
<video>: Embeds a video clip into an HTML document.
Example:<video src="video.mp4" controls></video><source>: Defines multiple media resources for media elements like<video>and<audio>.
Example:<video controls><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm"></video>
Audio
<audio>: Embeds audio content into an HTML document.
Example:<audio src="audio.mp3" controls></audio><source>: Defines multiple media resources for media elements like<video>and<audio>.
Example:<audio controls><source src="audio.mp3" type="audio/mpeg"><source src="audio.ogg" type="audio/ogg"></audio>
Remember to provide appropriate attributes like src for specifying the media file, alt for alternative text (for images), and controls for allowing user interaction (for videos and audios).