leumas-private-shared
Version:
Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains
963 lines • 105 kB
JSX
const htmlSyntax = {
"tags": [
{
"name": "a",
"description": "Defines a hyperlink.",
"example": "<a href='https://www.example.com'>Visit Example</a>",
"details": {
"how_it_works": "The <a> tag creates a hyperlink to web pages, files, email addresses, locations on the same page, or anything else a URL can address.",
"use_cases": ["Creating navigation links", "Linking to external websites", "Linking to downloadable files"],
"additional_examples": [
"<a href='mailto:someone@example.com'>Send Email</a>",
"<a href='#section1'>Go to Section 1</a>"
]
},
"meta": {
"title": "HTML a Tag - Hyperlink",
"description": "Learn how to create hyperlinks using the HTML <a> tag, including examples and use cases.",
"keywords": "html, a, hyperlink, tutorial"
}
},
{
"name": "abbr",
"description": "Defines an abbreviation or an acronym.",
"example": "<abbr title='Hypertext Markup Language'>HTML</abbr>",
"details": {
"how_it_works": "The <abbr> tag is used to define an abbreviation or an acronym, which can provide the full description when hovered over.",
"use_cases": ["Providing full form of abbreviations", "Improving accessibility", "Enhancing understanding of acronyms"],
"additional_examples": [
"<abbr title='Cascading Style Sheets'>CSS</abbr>",
"<abbr title='JavaScript Object Notation'>JSON</abbr>"
]
},
"meta": {
"title": "HTML abbr Tag - Abbreviation",
"description": "Learn how to define abbreviations using the HTML <abbr> tag, including examples and use cases.",
"keywords": "html, abbr, abbreviation, tutorial"
}
},
{
"name": "address",
"description": "Defines contact information for the author/owner of a document.",
"example": "<address>1234 Street Name, City, Country</address>",
"details": {
"how_it_works": "The <address> tag is used to define contact information, typically presented in a specific style such as italics.",
"use_cases": ["Providing contact details on a webpage", "Listing author or owner information", "Displaying address information"],
"additional_examples": [
"<address>Contact us at: support@example.com</address>",
"<address>Visit us at: 1234 Street Name, City, Country</address>"
]
},
"meta": {
"title": "HTML address Tag - Contact Information",
"description": "Learn how to define contact information using the HTML <address> tag, including examples and use cases.",
"keywords": "html, address, contact, tutorial"
}
},
{
"name": "article",
"description": "Defines an article.",
"example": "<article><h2>Article Title</h2><p>Article content...</p></article>",
"details": {
"how_it_works": "The <article> tag specifies independent, self-contained content that can be independently distributed or reused.",
"use_cases": ["Creating blog posts", "Writing news articles", "Defining magazine articles"],
"additional_examples": [
"<article><h2>News</h2><p>Latest updates...</p></article>",
"<article><h2>Blog</h2><p>Blog content...</p></article>"
]
},
"meta": {
"title": "HTML article Tag - Article",
"description": "Learn how to define articles using the HTML <article> tag, including examples and use cases.",
"keywords": "html, article, content, tutorial"
}
},
{
"name": "aside",
"description": "Defines content aside from the page content.",
"example": "<aside><p>Related content...</p></aside>",
"details": {
"how_it_works": "The <aside> tag defines some content aside from the content it is placed in (like a sidebar).",
"use_cases": ["Creating sidebars", "Adding related content", "Displaying advertisements"],
"additional_examples": [
"<aside><p>Sidebar content...</p></aside>",
"<aside><p>Additional information...</p></aside>"
]
},
"meta": {
"title": "HTML aside Tag - Aside Content",
"description": "Learn how to define aside content using the HTML <aside> tag, including examples and use cases.",
"keywords": "html, aside, content, tutorial"
}
},
{
"name": "audio",
"description": "Defines embedded sound content.",
"example": "<audio controls><source src='audio.mp3' type='audio/mpeg'>Your browser does not support the audio element.</audio>",
"details": {
"how_it_works": "The <audio> tag is used to embed sound content in documents.",
"use_cases": ["Embedding audio files", "Adding music or sound effects", "Including podcasts"],
"additional_examples": [
"<audio controls><source src='song.mp3' type='audio/mpeg'>Your browser does not support the audio element.</audio>",
"<audio controls><source src='audio.ogg' type='audio/ogg'>Your browser does not support the audio element.</audio>"
]
},
"meta": {
"title": "HTML audio Tag - Audio Content",
"description": "Learn how to embed audio content using the HTML <audio> tag, including examples and use cases.",
"keywords": "html, audio, embed, tutorial"
}
},
{
"name": "b",
"description": "Defines bold text.",
"example": "<b>Bold Text</b>",
"details": {
"how_it_works": "The <b> tag is used to draw attention to text by making it bold, but it doesn't imply any added importance.",
"use_cases": ["Highlighting text", "Emphasizing content", "Making text bold for stylistic reasons"],
"additional_examples": [
"<b>Important</b> information.",
"This is <b>bold</b> text."
]
},
"meta": {
"title": "HTML b Tag - Bold Text",
"description": "Learn how to make text bold using the HTML <b> tag, including examples and use cases.",
"keywords": "html, b, bold, text, tutorial"
}
},
{
"name": "base",
"description": "Specifies the base URL/target for all relative URLs in a document.",
"example": "<base href='https://www.example.com/'>",
"details": {
"how_it_works": "The <base> tag specifies a base URL for all relative URLs in a document, affecting links, images, and other URL-based elements.",
"use_cases": ["Setting a base URL for a document", "Ensuring relative URLs work correctly", "Changing the target of links and images"],
"additional_examples": [
"<base href='https://www.example.com/' target='_blank'>",
"<base href='https://cdn.example.com/'>"
]
},
"meta": {
"title": "HTML base Tag - Base URL",
"description": "Learn how to set a base URL using the HTML <base> tag, including examples and use cases.",
"keywords": "html, base, url, tutorial"
}
},
{
"name": "bdi",
"description": "Isolates a part of text that might be formatted in a different direction from other text outside it.",
"example": "<bdi>isolate</bdi>",
"details": {
"how_it_works": "The <bdi> tag isolates a part of text that might be formatted in a different direction from other text outside it, useful for embedding fragments in bidirectional text.",
"use_cases": ["Isolating bidirectional text", "Handling text direction changes", "Embedding text fragments"],
"additional_examples": [
"<bdi>abc 123</bdi>",
"<bdi>משה</bdi>"
]
},
"meta": {
"title": "HTML bdi Tag - Bidirectional Isolation",
"description": "Learn how to isolate bidirectional text using the HTML <bdi> tag, including examples and use cases.",
"keywords": "html, bdi, bidirectional, text, tutorial"
}
},
{
"name": "bdo",
"description": "Overrides the current text direction.",
"example": "<bdo dir='rtl'>This text will be right-to-left.</bdo>",
"details": {
"how_it_works": "The <bdo> tag overrides the current text direction, allowing you to specify a different direction for its content.",
"use_cases": ["Changing text direction", "Handling bidirectional text", "Overriding default text direction"],
"additional_examples": [
"<bdo dir='ltr'>Left to right</bdo>",
"<bdo dir='rtl'>Right to left</bdo>"
]
},
"meta": {
"title": "HTML bdo Tag - Bidirectional Override",
"description": "Learn how to override text direction using the HTML <bdo> tag, including examples and use cases.",
"keywords": "html, bdo, text direction, tutorial"
}
},
{
"name": "blockquote",
"description": "Defines a section that is quoted from another source.",
"example": "<blockquote cite='https://www.example.com'>Quote content here.</blockquote>",
"details": {
"how_it_works": "The <blockquote> tag is used for longer quotations from another source, often displayed as an indented block.",
"use_cases": ["Quoting external content", "Highlighting long quotes", "Providing context for quotations"],
"additional_examples": [
"<blockquote cite='https://www.example.com'>This is a blockquote.</blockquote>",
"<blockquote>This is a simple blockquote.</blockquote>"
]
},
"meta": {
"title": "HTML blockquote Tag - Block Quote",
"description": "Learn how to define block quotations using the HTML <blockquote> tag, including examples and use cases.",
"keywords": "html, blockquote, quote, tutorial"
}
},
{
"name": "body",
"description": "Defines the document's body.",
"example": "<body><h1>Page Title</h1><p>Page content...</p></body>",
"details": {
"how_it_works": "The <body> tag contains all the contents of an HTML document, such as text, images, links, and other elements.",
"use_cases": ["Structuring the main content of a web page", "Enclosing all visible content", "Defining the document body"],
"additional_examples": [
"<body><h1>Welcome</h1><p>This is the body content.</p></body>",
"<body><nav>Navigation</nav><main>Main Content</main></body>"
]
},
"meta": {
"title": "HTML body Tag - Document Body",
"description": "Learn how to define the body of a document using the HTML <body> tag, including examples and use cases.",
"keywords": "html, body, content, tutorial"
}
},
{
"name": "br",
"description": "Defines a single line break.",
"example": "Line 1<br>Line 2",
"details": {
"how_it_works": "The <br> tag inserts a single line break, useful for writing addresses or poems.",
"use_cases": ["Inserting line breaks", "Formatting text", "Breaking lines within text"],
"additional_examples": [
"Address:<br>1234 Street Name<br>City, Country",
"Roses are red<br>Violets are blue"
]
},
"meta": {
"title": "HTML br Tag - Line Break",
"description": "Learn how to insert line breaks using the HTML <br> tag, including examples and use cases.",
"keywords": "html, br, line break, tutorial"
}
},
{
"name": "button",
"description": "Defines a clickable button.",
"example": "<button type='button'>Click Me</button>",
"details": {
"how_it_works": "The <button> tag creates a clickable button, which can be used to submit forms or trigger events.",
"use_cases": ["Creating form buttons", "Triggering JavaScript functions", "Interactive elements"],
"additional_examples": [
"<button type='submit'>Submit</button>",
"<button type='reset'>Reset</button>"
]
},
"meta": {
"title": "HTML button Tag - Clickable Button",
"description": "Learn how to create clickable buttons using the HTML <button> tag, including examples and use cases.",
"keywords": "html, button, click, tutorial"
}
},
{
"name": "canvas",
"description": "Used to draw graphics, on the fly, via scripting (usually JavaScript).",
"example": "<canvas id='myCanvas' width='200' height='100'></canvas>",
"details": {
"how_it_works": "The <canvas> tag is used to draw graphics via JavaScript. It provides a rectangular area where you can control every pixel.",
"use_cases": ["Creating dynamic graphics", "Rendering game graphics", "Drawing graphs and charts"],
"additional_examples": [
"<canvas id='myCanvas' width='500' height='400'></canvas>",
"<canvas id='gameCanvas' width='800' height='600'></canvas>"
]
},
"meta": {
"title": "HTML canvas Tag - Drawing Graphics",
"description": "Learn how to draw graphics using the HTML <canvas> tag, including examples and use cases.",
"keywords": "html, canvas, graphics, tutorial"
}
},
{
"name": "caption",
"description": "Defines a table caption.",
"example": "<table><caption>Table Title</caption></table>",
"details": {
"how_it_works": "The <caption> tag is used to specify a caption for a <table> element. It must be inserted immediately after the <table> tag.",
"use_cases": ["Adding titles to tables", "Describing table content", "Improving table accessibility"],
"additional_examples": [
"<table><caption>Monthly Sales</caption><tr><th>Month</th><th>Sales</th></tr></table>",
"<table><caption>Student Scores</caption><tr><th>Name</th><th>Score</th></tr></table>"
]
},
"meta": {
"title": "HTML caption Tag - Table Caption",
"description": "Learn how to define table captions using the HTML <caption> tag, including examples and use cases.",
"keywords": "html, caption, table, tutorial"
}
},
{
"name": "cite",
"description": "Defines the title of a work.",
"example": "<cite>The Great Gatsby</cite>",
"details": {
"how_it_works": "The <cite> tag is used to define the title of a creative work (e.g., a book, a poem, a song). It usually renders text in italic.",
"use_cases": ["Citing books", "Quoting titles", "Referencing works"],
"additional_examples": [
"<cite>To Kill a Mockingbird</cite>",
"<cite>Romeo and Juliet</cite>"
]
},
"meta": {
"title": "HTML cite Tag - Citation",
"description": "Learn how to cite works using the HTML <cite> tag, including examples and use cases.",
"keywords": "html, cite, citation, tutorial"
}
},
{
"name": "code",
"description": "Defines a piece of computer code.",
"example": "<code>console.log('Hello, World!');</code>",
"details": {
"how_it_works": "The <code> tag is used to define a piece of computer code. It usually renders text in a monospace font.",
"use_cases": ["Displaying code snippets", "Highlighting programming code", "Embedding code examples"],
"additional_examples": [
"<code>alert('Hello!');</code>",
"<code>document.getElementById('myElement').innerHTML = 'Content';</code>"
]
},
"meta": {
"title": "HTML code Tag - Computer Code",
"description": "Learn how to define computer code using the HTML <code> tag, including examples and use cases.",
"keywords": "html, code, programming, tutorial"
}
},
{
"name": "col",
"description": "Specifies column properties for each column within a <colgroup> element.",
"example": "<colgroup><col style='background-color:yellow'><col style='background-color:green'></colgroup>",
"details": {
"how_it_works": "The <col> tag specifies column properties for each column within a <colgroup> element, allowing you to style individual columns.",
"use_cases": ["Styling table columns", "Setting column properties", "Defining column-specific styles"],
"additional_examples": [
"<colgroup><col style='width:50%'><col style='width:50%'></colgroup>",
"<colgroup><col style='border:1px solid black'><col style='border:1px solid black'></colgroup>"
]
},
"meta": {
"title": "HTML col Tag - Table Column",
"description": "Learn how to specify column properties using the HTML <col> tag, including examples and use cases.",
"keywords": "html, col, column, table, tutorial"
}
},
{
"name": "colgroup",
"description": "Specifies a group of one or more columns in a table for formatting.",
"example": "<table><colgroup><col style='background-color:yellow'><col style='background-color:green'></colgroup></table>",
"details": {
"how_it_works": "The <colgroup> tag is used to group one or more columns in a table for formatting purposes.",
"use_cases": ["Grouping table columns", "Applying styles to column groups", "Defining column group properties"],
"additional_examples": [
"<table><colgroup><col span='2' style='background-color:yellow'><col style='background-color:green'></colgroup></table>",
"<table><colgroup><col style='width:50%'><col style='width:50%'></colgroup></table>"
]
},
"meta": {
"title": "HTML colgroup Tag - Column Group",
"description": "Learn how to group table columns using the HTML <colgroup> tag, including examples and use cases.",
"keywords": "html, colgroup, column, table, tutorial"
}
},
{
"name": "data",
"description": "Adds a machine-readable translation of a given content.",
"example": "<data value='12345'>Product Number</data>",
"details": {
"how_it_works": "The <data> tag links content with a machine-readable value, useful for semantic data and structured information.",
"use_cases": ["Storing machine-readable data", "Linking content with values", "Embedding semantic information"],
"additional_examples": [
"<data value='abc123'>Order ID</data>",
"<data value='50'>50 items</data>"
]
},
"meta": {
"title": "HTML data Tag - Machine-readable Content",
"description": "Learn how to add machine-readable content using the HTML <data> tag, including examples and use cases.",
"keywords": "html, data, machine-readable, tutorial"
}
},
{
"name": "datalist",
"description": "Specifies a list of pre-defined options for input controls.",
"example": "<input list='browsers'><datalist id='browsers'><option value='Chrome'><option value='Firefox'><option value='Safari'><option value='Edge'></datalist>",
"details": {
"how_it_works": "The <datalist> tag contains a set of <option> elements that represent the permissible or suggested options available to users.",
"use_cases": ["Creating input suggestions", "Providing a list of options", "Enhancing user input"],
"additional_examples": [
"<input list='colors'><datalist id='colors'><option value='Red'><option value='Green'><option value='Blue'></datalist>",
"<input list='countries'><datalist id='countries'><option value='USA'><option value='Canada'><option value='Mexico'></datalist>"
]
},
"meta": {
"title": "HTML datalist Tag - Predefined Options",
"description": "Learn how to specify predefined options for input controls using the HTML <datalist> tag, including examples and use cases.",
"keywords": "html, datalist, input, options, tutorial"
}
},
{
"name": "dd",
"description": "Defines a description/value of a term in a description list.",
"example": "<dl><dt>HTML</dt><dd>Hypertext Markup Language</dd></dl>",
"details": {
"how_it_works": "The <dd> tag is used to describe a term/name in a description list, usually alongside <dt> tags.",
"use_cases": ["Defining terms", "Creating description lists", "Providing detailed descriptions"],
"additional_examples": [
"<dl><dt>CSS</dt><dd>Cascading Style Sheets</dd></dl>",
"<dl><dt>JavaScript</dt><dd>A high-level, dynamic programming language</dd></dl>"
]
},
"meta": {
"title": "HTML dd Tag - Description List",
"description": "Learn how to define descriptions in a description list using the HTML <dd> tag, including examples and use cases.",
"keywords": "html, dd, description, list, tutorial"
}
},
{
"name": "del",
"description": "Defines text that has been deleted from a document.",
"example": "<del>Old text</del>",
"details": {
"how_it_works": "The <del> tag is used to represent text that has been deleted from a document, often displayed with a strikethrough.",
"use_cases": ["Indicating removed content", "Highlighting changes", "Showing deletions"],
"additional_examples": [
"<p>This is <del>incorrect</del> correct.</p>",
"<del>Outdated information</del>"
]
},
"meta": {
"title": "HTML del Tag - Deleted Text",
"description": "Learn how to represent deleted text using the HTML <del> tag, including examples and use cases.",
"keywords": "html, del, deleted, text, tutorial"
}
},
{
"name": "details",
"description": "Defines additional details that the user can view or hide.",
"example": "<details><summary>More info</summary><p>Details go here...</p></details>",
"details": {
"how_it_works": "The <details> tag is used to create an interactive widget that the user can open and close to reveal additional information.",
"use_cases": ["Creating expandable sections", "Hiding/showing content", "Providing more information on demand"],
"additional_examples": [
"<details><summary>Click to expand</summary><p>Hidden details...</p></details>",
"<details><summary>Read more</summary><p>Additional information...</p></details>"
]
},
"meta": {
"title": "HTML details Tag - Expandable Details",
"description": "Learn how to create expandable sections using the HTML <details> tag, including examples and use cases.",
"keywords": "html, details, expandable, tutorial"
}
},
{
"name": "dfn",
"description": "Specifies a term that is going to be defined within the content.",
"example": "<p><dfn>HTML</dfn> stands for Hypertext Markup Language.</p>",
"details": {
"how_it_works": "The <dfn> tag is used to highlight a term that is being defined within the content.",
"use_cases": ["Defining terms", "Providing explanations", "Highlighting definitions"],
"additional_examples": [
"<p><dfn>CSS</dfn> stands for Cascading Style Sheets.</p>",
"<p>The <dfn>JavaScript</dfn> programming language...</p>"
]
},
"meta": {
"title": "HTML dfn Tag - Definition Term",
"description": "Learn how to specify a term that is being defined using the HTML <dfn> tag, including examples and use cases.",
"keywords": "html, dfn, definition, term, tutorial"
}
},
{
"name": "dialog",
"description": "Defines a dialog box or window.",
"example": "<dialog open>This is an open dialog</dialog>",
"details": {
"how_it_works": "The <dialog> tag defines a dialog box or window, which can be used to create interactive pop-ups.",
"use_cases": ["Creating modal dialogs", "Displaying pop-up messages", "Implementing interactive forms"],
"additional_examples": [
"<dialog open><p>This is a dialog</p><button>Close</button></dialog>",
"<dialog><p>Another dialog</p><button>Close</button></dialog>"
]
},
"meta": {
"title": "HTML dialog Tag - Dialog Box",
"description": "Learn how to define dialog boxes using the HTML <dialog> tag, including examples and use cases.",
"keywords": "html, dialog, box, window, tutorial"
}
},
{
"name": "div",
"description": "Defines a section in a document.",
"example": "<div>This is a section</div>",
"details": {
"how_it_works": "The <div> tag is used to define a division or section in an HTML document. It is a block-level element.",
"use_cases": ["Grouping content", "Creating layout sections", "Applying styles to sections"],
"additional_examples": [
"<div><h1>Title</h1><p>Paragraph</p></div>",
"<div class='container'><div class='row'>Row content</div></div>"
]
},
"meta": {
"title": "HTML div Tag - Section",
"description": "Learn how to define sections using the HTML <div> tag, including examples and use cases.",
"keywords": "html, div, section, tutorial"
}
},
{
"name": "dl",
"description": "Defines a description list.",
"example": "<dl><dt>HTML</dt><dd>Hypertext Markup Language</dd></dl>",
"details": {
"how_it_works": "The <dl> tag defines a description list. It contains <dt> elements (terms) and <dd> elements (descriptions).",
"use_cases": ["Creating glossary lists", "Defining terms", "Listing descriptions"],
"additional_examples": [
"<dl><dt>CSS</dt><dd>Cascading Style Sheets</dd></dl>",
"<dl><dt>JavaScript</dt><dd>A high-level programming language</dd></dl>"
]
},
"meta": {
"title": "HTML dl Tag - Description List",
"description": "Learn how to define description lists using the HTML <dl> tag, including examples and use cases.",
"keywords": "html, dl, description, list, tutorial"
}
},
{
"name": "dt",
"description": "Defines a term/name in a description list.",
"example": "<dl><dt>HTML</dt><dd>Hypertext Markup Language</dd></dl>",
"details": {
"how_it_works": "The <dt> tag is used to define a term/name in a description list. It is used together with <dd> tags.",
"use_cases": ["Defining terms", "Creating glossary entries", "Listing names"],
"additional_examples": [
"<dl><dt>CSS</dt><dd>Cascading Style Sheets</dd></dl>",
"<dl><dt>JavaScript</dt><dd>A high-level programming language</dd></dl>"
]
},
"meta": {
"title": "HTML dt Tag - Description Term",
"description": "Learn how to define terms in a description list using the HTML <dt> tag, including examples and use cases.",
"keywords": "html, dt, term, description, tutorial"
}
},
{
"name": "em",
"description": "Defines emphasized text.",
"example": "<em>Emphasized text</em>",
"details": {
"how_it_works": "The <em> tag is used to emphasize text, typically rendering it in italic.",
"use_cases": ["Emphasizing important words", "Highlighting key phrases", "Creating italic text"],
"additional_examples": [
"<p>This is <em>very</em> important.</p>",
"<em>Emphasis</em> on this word."
]
},
"meta": {
"title": "HTML em Tag - Emphasized Text",
"description": "Learn how to emphasize text using the HTML <em> tag, including examples and use cases.",
"keywords": "html, em, emphasized, text, tutorial"
}
},
{
"name": "embed",
"description": "Defines a container for an external application.",
"example": "<embed src='video.mp4' width='300' height='200'>",
"details": {
"how_it_works": "The <embed> tag is used to embed an external application or interactive content, such as a video or a plugin.",
"use_cases": ["Embedding videos", "Including interactive content", "Adding external applications"],
"additional_examples": [
"<embed src='movie.swf' width='400' height='300'>",
"<embed src='audio.mp3' width='300' height='32'>"
]
},
"meta": {
"title": "HTML embed Tag - External Application",
"description": "Learn how to embed external applications using the HTML <embed> tag, including examples and use cases.",
"keywords": "html, embed, external, application, tutorial"
}
},
{
"name": "fieldset",
"description": "Groups related elements in a form.",
"example": "<fieldset><legend>Personal Information</legend><label>Name:</label><input type='text'></fieldset>",
"details": {
"how_it_works": "The <fieldset> tag is used to group related elements in a form, and the <legend> tag is used to define a caption for the <fieldset>.",
"use_cases": ["Grouping form fields", "Organizing form content", "Adding captions to form sections"],
"additional_examples": [
"<fieldset><legend>Account Details</legend><label>Username:</label><input type='text'></fieldset>",
"<fieldset><legend>Preferences</legend><label>Subscribe:</label><input type='checkbox'></fieldset>"
]
},
"meta": {
"title": "HTML fieldset Tag - Form Group",
"description": "Learn how to group form elements using the HTML <fieldset> tag, including examples and use cases.",
"keywords": "html, fieldset, form, group, tutorial"
}
},
{
"name": "figcaption",
"description": "Defines a caption for a <figure> element.",
"example": "<figure><img src='image.jpg' alt='Image'><figcaption>Image caption</figcaption></figure>",
"details": {
"how_it_works": "The <figcaption> tag is used to add a caption or legend to a <figure> element.",
"use_cases": ["Adding captions to images", "Providing context for figures", "Describing multimedia content"],
"additional_examples": [
"<figure><img src='photo.jpg' alt='Photo'><figcaption>Photo caption</figcaption></figure>",
"<figure><video src='movie.mp4'></video><figcaption>Video caption</figcaption></figure>"
]
},
"meta": {
"title": "HTML figcaption Tag - Figure Caption",
"description": "Learn how to add captions to figures using the HTML <figcaption> tag, including examples and use cases.",
"keywords": "html, figcaption, figure, caption, tutorial"
}
},
{
"name": "figure",
"description": "Specifies self-contained content.",
"example": "<figure><img src='image.jpg' alt='Image'><figcaption>Image caption</figcaption></figure>",
"details": {
"how_it_works": "The <figure> tag is used to specify self-contained content, such as illustrations, diagrams, photos, code listings, etc.",
"use_cases": ["Grouping multimedia content", "Creating self-contained sections", "Adding figures to articles"],
"additional_examples": [
"<figure><img src='graphic.png' alt='Graphic'><figcaption>Graphic caption</figcaption></figure>",
"<figure><audio src='audio.mp3'></audio><figcaption>Audio caption</figcaption></figure>"
]
},
"meta": {
"title": "HTML figure Tag - Self-contained Content",
"description": "Learn how to specify self-contained content using the HTML <figure> tag, including examples and use cases.",
"keywords": "html, figure, content, multimedia, tutorial"
}
},
{
"name": "footer",
"description": "Defines a footer for a document or section.",
"example": "<footer><p>Footer content here</p></footer>",
"details": {
"how_it_works": "The <footer> tag is used to define a footer for a document or section, typically containing metadata or navigational links.",
"use_cases": ["Creating footers", "Adding metadata", "Including navigational links"],
"additional_examples": [
"<footer><p>© 2024 MyWebsite</p></footer>",
"<footer><nav><a href='#'>Home</a> | <a href='#'>Contact</a></nav></footer>"
]
},
"meta": {
"title": "HTML footer Tag - Document Footer",
"description": "Learn how to define footers using the HTML <footer> tag, including examples and use cases.",
"keywords": "html, footer, document, section, tutorial"
}
},
{
"name": "form",
"description": "Defines an HTML form for user input.",
"example": "<form action='/submit' method='post'><label>Name:</label><input type='text' name='name'><input type='submit' value='Submit'></form>",
"details": {
"how_it_works": "The <form> tag is used to create an HTML form for user input, containing form elements like input fields, checkboxes, radio buttons, submit buttons, etc.",
"use_cases": ["Creating user input forms", "Submitting data to a server", "Building interactive web forms"],
"additional_examples": [
"<form action='/search' method='get'><input type='text' name='query'><input type='submit' value='Search'></form>",
"<form action='/signup' method='post'><label>Email:</label><input type='email' name='email'><input type='submit' value='Sign Up'></form>"
]
},
"meta": {
"title": "HTML form Tag - User Input Form",
"description": "Learn how to create user input forms using the HTML <form> tag, including examples and use cases.",
"keywords": "html, form, user input, tutorial"
}
},
{
"name": "h1",
"description": "Defines HTML heading level 1.",
"example": "<h1>Main Heading</h1>",
"details": {
"how_it_works": "The <h1> tag defines the highest level heading in an HTML document, usually the main title.",
"use_cases": ["Creating main headings", "Defining page titles", "Organizing content structure"],
"additional_examples": [
"<h1>Welcome to My Website</h1>",
"<h1>Chapter 1: Introduction</h1>"
]
},
"meta": {
"title": "HTML h1 Tag - Heading Level 1",
"description": "Learn how to define main headings using the HTML <h1> tag, including examples and use cases.",
"keywords": "html, h1, heading, title, tutorial"
}
},
{
"name": "h2",
"description": "Defines HTML heading level 2.",
"example": "<h2>Subheading</h2>",
"details": {
"how_it_works": "The <h2> tag defines the second highest level heading in an HTML document, usually a subheading.",
"use_cases": ["Creating subheadings", "Organizing content sections", "Structuring document hierarchy"],
"additional_examples": [
"<h2>Features</h2>",
"<h2>Chapter 2: Getting Started</h2>"
]
},
"meta": {
"title": "HTML h2 Tag - Heading Level 2",
"description": "Learn how to define subheadings using the HTML <h2> tag, including examples and use cases.",
"keywords": "html, h2, subheading, tutorial"
}
},
{
"name": "h3",
"description": "Defines HTML heading level 3.",
"example": "<h3>Sub-subheading</h3>",
"details": {
"how_it_works": "The <h3> tag defines the third highest level heading in an HTML document.",
"use_cases": ["Creating sub-subheadings", "Organizing content subsections", "Further structuring document hierarchy"],
"additional_examples": [
"<h3>Installation</h3>",
"<h3>Chapter 3: Advanced Topics</h3>"
]
},
"meta": {
"title": "HTML h3 Tag - Heading Level 3",
"description": "Learn how to define sub-subheadings using the HTML <h3> tag, including examples and use cases.",
"keywords": "html, h3, subheading, tutorial"
}
},
{
"name": "h4",
"description": "Defines HTML heading level 4.",
"example": "<h4>Section Heading</h4>",
"details": {
"how_it_works": "The <h4> tag defines the fourth highest level heading in an HTML document.",
"use_cases": ["Creating section headings", "Organizing content subsections", "Structuring document hierarchy"],
"additional_examples": [
"<h4>Configuration</h4>",
"<h4>Appendix A: Resources</h4>"
]
},
"meta": {
"title": "HTML h4 Tag - Heading Level 4",
"description": "Learn how to define section headings using the HTML <h4> tag, including examples and use cases.",
"keywords": "html, h4, heading, tutorial"
}
},
{
"name": "h5",
"description": "Defines HTML heading level 5.",
"example": "<h5>Subsection Heading</h5>",
"details": {
"how_it_works": "The <h5> tag defines the fifth highest level heading in an HTML document.",
"use_cases": ["Creating subsection headings", "Organizing content", "Further structuring document hierarchy"],
"additional_examples": [
"<h5>Details</h5>",
"<h5>Part 1: Overview</h5>"
]
},
"meta": {
"title": "HTML h5 Tag - Heading Level 5",
"description": "Learn how to define subsection headings using the HTML <h5> tag, including examples and use cases.",
"keywords": "html, h5, heading, tutorial"
}
},
{
"name": "h6",
"description": "Defines HTML heading level 6.",
"example": "<h6>Minor Heading</h6>",
"details": {
"how_it_works": "The <h6> tag defines the sixth highest level heading in an HTML document.",
"use_cases": ["Creating minor headings", "Organizing content", "Further structuring document hierarchy"],
"additional_examples": [
"<h6>Notes</h6>",
"<h6>Part 2: In-depth Analysis</h6>"
]
},
"meta": {
"title": "HTML h6 Tag - Heading Level 6",
"description": "Learn how to define minor headings using the HTML <h6> tag, including examples and use cases.",
"keywords": "html, h6, heading, tutorial"
}
},
{
"name": "head",
"description": "Contains metadata/information for the document.",
"example": "<head><title>Document Title</title><meta charset='UTF-8'></head>",
"details": {
"how_it_works": "The <head> tag is a container for metadata, which includes <title>, <meta>, <link>, <style>, <script>, and <base> tags.",
"use_cases": ["Defining document metadata", "Including links to external resources", "Setting the document title"],
"additional_examples": [
"<head><meta name='description' content='A great website'><link rel='stylesheet' href='styles.css'></head>",
"<head><title>My Website</title><meta name='viewport' content='width=device-width, initial-scale=1'></head>"
]
},
"meta": {
"title": "HTML head Tag - Document Metadata",
"description": "Learn how to define document metadata using the HTML <head> tag, including examples and use cases.",
"keywords": "html, head, metadata, tutorial"
}
},
{
"name": "header",
"description": "Defines a header for a document or section.",
"example": "<header><h1>Header</h1><nav><a href='#'>Home</a><a href='#'>Contact</a></nav></header>",
"details": {
"how_it_works": "The <header> tag defines a header for a document or section, which typically contains introductory content or navigational links.",
"use_cases": ["Creating headers", "Adding navigation menus", "Including introductory content"],
"additional_examples": [
"<header><h1>Welcome</h1><p>This is the header section</p></header>",
"<header><nav><a href='#'>About</a><a href='#'>Services</a></nav></header>"
]
},
"meta": {
"title": "HTML header Tag - Document Header",
"description": "Learn how to define headers using the HTML <header> tag, including examples and use cases.",
"keywords": "html, header, document, section, tutorial"
}
},
{
"name": "hr",
"description": "Defines a thematic change in the content.",
"example": "<hr>",
"details": {
"how_it_works": "The <hr> tag creates a horizontal rule, which is used to separate content or indicate a thematic break.",
"use_cases": ["Separating sections", "Indicating breaks", "Adding horizontal lines"],
"additional_examples": [
"<p>First section</p><hr><p>Second section</p>",
"<h2>Chapter 1</h2><p>Content...</p><hr><h2>Chapter 2</h2><p>Content...</p>"
]
},
"meta": {
"title": "HTML hr Tag - Horizontal Rule",
"description": "Learn how to define thematic breaks using the HTML <hr> tag, including examples and use cases.",
"keywords": "html, hr, horizontal, rule, tutorial"
}
},
{
"name": "html",
"description": "Defines the root of an HTML document.",
"example": "<html><head><title>Title</title></head><body>Content</body></html>",
"details": {
"how_it_works": "The <html> tag represents the root of an HTML document, enclosing all other elements.",
"use_cases": ["Defining the document root", "Structuring HTML documents", "Enclosing all HTML content"],
"additional_examples": [
"<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><title>My Website</title></head><body>Welcome</body></html>",
"<html><head><title>Example</title></head><body><h1>Hello World</h1></body></html>"
]
},
"meta": {
"title": "HTML html Tag - Document Root",
"description": "Learn how to define the root of an HTML document using the HTML <html> tag, including examples and use cases.",
"keywords": "html, document, root, tutorial"
}
},
{
"name": "i",
"description": "Defines a part of text in an alternate voice or mood.",
"example": "<i>Italic text</i>",
"details": {
"how_it_works": "The <i> tag is used to define a part of text in an alternate voice or mood, usually rendered in italic.",
"use_cases": ["Emphasizing text", "Highlighting foreign words", "Creating italic text"],
"additional_examples": [
"<p>This is <i>italic</i> text.</p>",
"<i>Latin phrase</i> meaning..."
]
},
"meta": {
"title": "HTML i Tag - Italic Text",
"description": "Learn how to define italic text using the HTML <i> tag, including examples and use cases.",
"keywords": "html, i, italic, text, tutorial"
}
},
{
"name": "iframe",
"description": "Defines an inline frame.",
"example": "<iframe src='https://www.example.com' width='300' height='200'></iframe>",
"details": {
"how_it_works": "The <iframe> tag is used to embed another HTML page within the current page.",
"use_cases": ["Embedding external content", "Including videos or maps", "Creating nested browsing contexts"],
"additional_examples": [
"<iframe src='https://www.google.com' width='600' height='400'></iframe>",
"<iframe src='video.mp4' width='300' height='200'></iframe>"
]
},
"meta": {
"title": "HTML iframe Tag - Inline Frame",
"description": "Learn how to define inline frames using the HTML <iframe> tag, including examples and use cases.",
"keywords": "html, iframe, inline, frame, tutorial"
}
},
{
"name": "img",
"description": "Defines an image.",
"example": "<img src='image.jpg' alt='Image description'>",
"details": {
"how_it_works": "The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image.",
"use_cases": ["Embedding images", "Adding graphics", "Displaying photos"],
"additional_examples": [
"<img src='photo.jpg' alt='A beautiful scenery'>",
"<img src='logo.png' alt='Company logo'>"
]
},
"meta": {
"title": "HTML img Tag - Image",
"description": "Learn how to define images using the HTML <img> tag, including examples and use cases.",
"keywords": "html, img, image, tutorial"
}
},
{
"name": "input",
"description": "Defines an input control.",
"example": "<input type='text' name='username'>",
"details": {
"how_it_works": "The <input> tag is used to create interactive controls for web-based forms in order to accept data from the user.",
"use_cases": ["Creating text fields", "Adding checkboxes", "Including radio buttons"],
"additional_examples": [
"<input type='checkbox' name='subscribe'>",
"<input type='radio' name='gender' value='male'>",
"<input type='password' name='password'>"
]
},
"meta": {
"title": "HTML input Tag - Input Control",
"description": "Learn how to define input controls using the HTML <input> tag, including examples and use cases.",
"keywords": "html, input, form, control, tutorial"
}
},
{
"name": "ins",
"description": "Defines a text that has been inserted into a document.",
"example": "<ins>New text</ins>",
"details": {
"how_it_works": "The <ins> tag is used to represent text that has been inserted into a document, often displayed with an underline.",
"use_cases": ["Indicating added content", "Highlighting insertions", "Showing changes"],
"additional_examples": [
"<p>This is <ins>new</ins> text.</p>",
"<ins>Added information</ins>"
]
},
"meta": {
"title": "HTML ins Tag - Inserted Text",
"description": "Learn how to represent inserted text using the HTML <ins> tag, including examples and use cases.",
"keywords": "html, ins, inserted, text, tutorial"
}
},
{
"name": "kbd",
"description": "Defines keyboard input.",
"example": "<kbd>Ctrl + C</kbd>",
"details": {
"how_it_works": "The <kbd> tag is used to define keyboard input, typically rendering text in a monospace font.",
"use_cases": ["Displaying keyboard shortcuts", "Showing keypresses", "Highlighting keyboard input"],
"additional_examples": [
"<p>Press <kbd>Enter</kbd> to continue.</p>",
"<kbd>Ctrl + V</kbd> to paste."
]
},
"meta": {
"title": "HTML kbd Tag - Keyboard Input",
"description": "Learn how to define keyboard input using the HTML <kbd> tag, including examples and use cases.",
"keywords": "html, kbd, keyboard, input, tutorial"
}
},
{
"name": "label",
"description": "Defines a label for an <input> element.",
"example": "<label for='name'>Name:</label><input type='text' id='name' name='name'>",
"details": {
"how_it_works": "