Microdata and Metadata

The Project | About Us | Contribute | Donations | License

HOME

In this lesson, we will explore the concepts of microdata and metadata in HTML. These are essential for enhancing the semantics and searchability of your web pages. By the end of this lesson, you will understand how to use microdata to annotate your HTML content and how to include metadata to provide additional information about your web pages.

What is Microdata?

Microdata is a specification that allows you to nest metadata within existing content on your web pages. This helps search engines and other applications better understand the information on your pages, leading to improved search results and richer displays.

Key Concepts of Microdata

Itemscope: Defines the scope of the microdata item.
Itemtype: Specifies the type of item using a URL that points to a vocabulary.
Itemprop: Defines a property of the item.

Example of Microdata

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Microdata Example</title>
</head>
<body>
    <div itemscope itemtype="http://schema.org/Person">
        <h1 itemprop="name">John Doe</h1>
        <p>Job: <span itemprop="jobTitle">Software Engineer</span></p>
        <p>Company: <span itemprop="worksFor" itemscope itemtype="http://schema.org/Organization">
            <span itemprop="name">Tech Solutions Inc.</span>
        </span></p>
        <p>Email: <a href="mailto:[email protected]" itemprop="email">[email protected]</a></p>
    </div>
</body>
</html>

Explanation

itemscope: Indicates that the div element contains microdata.
itemtype: Specifies the type of item, in this case, a Person.
itemprop: Defines properties of the item, such as name, jobTitle, worksFor, and email.

What is Metadata?

Metadata provides information about other data. In the context of HTML, metadata is used to provide information about the web page, such as the author, description, keywords, and more. Metadata is typically included within the <head> section of an HTML document.

Key Metadata Elements

: Defines metadata about an HTML document.
</strong>: Specifies the title of the document.</li> <li><strong><link></strong>: Defines the relationship between the current document and an external resource.</li> </ol> </div><h3>Example of Metadata</h3> <div class='content'></div><div style='position:relative'><a class='copy_button d-none d-md-inline' href='#' onclick='navigator.clipboard.writeText(decodeURIComponent(escape(atob("PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgICA8bWV0YSBjaGFyc2V0PSJVVEYtOCI+CiAgICA8bWV0YSBuYW1lPSJkZXNjcmlwdGlvbiIgY29udGVudD0iQSBjb21wcmVoZW5zaXZlIGd1aWRlIHRvIG1pY3JvZGF0YSBhbmQgbWV0YWRhdGEgaW4gSFRNTC4iPgogICAgPG1ldGEgbmFtZT0ia2V5d29yZHMiIGNvbnRlbnQ9IkhUTUwsIG1pY3JvZGF0YSwgbWV0YWRhdGEsIHdlYiBkZXZlbG9wbWVudCI+CiAgICA8bWV0YSBuYW1lPSJhdXRob3IiIGNvbnRlbnQ9IkphbmUgU21pdGgiPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiPgogICAgPHRpdGxlPk1pY3JvZGF0YSBhbmQgTWV0YWRhdGE8L3RpdGxlPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJzdHlsZXMuY3NzIj4KPC9oZWFkPgo8Ym9keT4KICAgIDxoMT5VbmRlcnN0YW5kaW5nIE1pY3JvZGF0YSBhbmQgTWV0YWRhdGE8L2gxPgogICAgPHA+VGhpcyBwYWdlIHByb3ZpZGVzIGFuIG92ZXJ2aWV3IG9mIG1pY3JvZGF0YSBhbmQgbWV0YWRhdGEgaW4gSFRNTC48L3A+CjwvYm9keT4KPC9odG1sPg=="))));alert("Copied!");return false;'><i class='bi bi-copy'></i></a><pre class='code'><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content="A comprehensive guide to microdata and metadata in HTML."> <meta name="keywords" content="HTML, microdata, metadata, web development"> <meta name="author" content="Jane Smith"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Microdata and Metadata</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Understanding Microdata and Metadata</h1> <p>This page provides an overview of microdata and metadata in HTML.</p> </body> </html></pre></div><div class='content'></div><h3>Explanation</h3> <div class='content'><ul> <li><strong><meta charset="UTF-8"></strong>: Specifies the character encoding for the document.</li> <li><strong><meta name="description" content="..."></strong>: Provides a brief description of the page.</li> <li><strong><meta name="keywords" content="..."></strong>: Lists keywords relevant to the page content.</li> <li><strong><meta name="author" content="..."></strong>: Specifies the author of the document.</li> <li><strong><meta name="viewport" content="..."></strong>: Controls the viewport settings for responsive design.</li> <li><strong><title></strong>: Sets the title of the document, which appears in the browser tab.</li> <li><strong><link rel="stylesheet" href="styles.css"></strong>: Links to an external CSS stylesheet.</li> </ul> </div><h2>Practical Exercise</h2> <div class='content'></div><h3>Task</h3> <div class='content'><p>Create an HTML document that includes both microdata and metadata. The document should describe a book with the following details:</p> <ul> <li>Title: "Learning HTML"</li> <li>Author: "Jane Doe"</li> <li>Publisher: "Web Books Publishing"</li> <li>ISBN: "123-4567890123"</li> <li>Description: "A comprehensive guide to learning HTML."</li> </ul> </div><h3>Solution</h3> <div class='content'></div><div style='position:relative'><a class='copy_button d-none d-md-inline' href='#' onclick='navigator.clipboard.writeText(decodeURIComponent(escape(atob("PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgICA8bWV0YSBjaGFyc2V0PSJVVEYtOCI+CiAgICA8bWV0YSBuYW1lPSJkZXNjcmlwdGlvbiIgY29udGVudD0iQSBjb21wcmVoZW5zaXZlIGd1aWRlIHRvIGxlYXJuaW5nIEhUTUwuIj4KICAgIDxtZXRhIG5hbWU9ImtleXdvcmRzIiBjb250ZW50PSJIVE1MLCBib29rLCBsZWFybmluZywgd2ViIGRldmVsb3BtZW50Ij4KICAgIDxtZXRhIG5hbWU9ImF1dGhvciIgY29udGVudD0iSmFuZSBEb2UiPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiPgogICAgPHRpdGxlPkxlYXJuaW5nIEhUTUw8L3RpdGxlPgo8L2hlYWQ+Cjxib2R5PgogICAgPGRpdiBpdGVtc2NvcGUgaXRlbXR5cGU9Imh0dHA6Ly9zY2hlbWEub3JnL0Jvb2siPgogICAgICAgIDxoMSBpdGVtcHJvcD0ibmFtZSI+TGVhcm5pbmcgSFRNTDwvaDE+CiAgICAgICAgPHA+QXV0aG9yOiA8c3BhbiBpdGVtcHJvcD0iYXV0aG9yIj5KYW5lIERvZTwvc3Bhbj48L3A+CiAgICAgICAgPHA+UHVibGlzaGVyOiA8c3BhbiBpdGVtcHJvcD0icHVibGlzaGVyIj5XZWIgQm9va3MgUHVibGlzaGluZzwvc3Bhbj48L3A+CiAgICAgICAgPHA+SVNCTjogPHNwYW4gaXRlbXByb3A9ImlzYm4iPjEyMy00NTY3ODkwMTIzPC9zcGFuPjwvcD4KICAgICAgICA8cD5EZXNjcmlwdGlvbjogPHNwYW4gaXRlbXByb3A9ImRlc2NyaXB0aW9uIj5BIGNvbXByZWhlbnNpdmUgZ3VpZGUgdG8gbGVhcm5pbmcgSFRNTC48L3NwYW4+PC9wPgogICAgPC9kaXY+CjwvYm9keT4KPC9odG1sPg=="))));alert("Copied!");return false;'><i class='bi bi-copy'></i></a><pre class='code'><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content="A comprehensive guide to learning HTML."> <meta name="keywords" content="HTML, book, learning, web development"> <meta name="author" content="Jane Doe"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Learning HTML</title> </head> <body> <div itemscope itemtype="http://schema.org/Book"> <h1 itemprop="name">Learning HTML</h1> <p>Author: <span itemprop="author">Jane Doe</span></p> <p>Publisher: <span itemprop="publisher">Web Books Publishing</span></p> <p>ISBN: <span itemprop="isbn">123-4567890123</span></p> <p>Description: <span itemprop="description">A comprehensive guide to learning HTML.</span></p> </div> </body> </html></pre></div><div class='content'></div><h3>Explanation</h3> <div class='content'><ul> <li>The metadata in the <code><head></code> section provides information about the document, such as the description, keywords, author, and viewport settings.</li> <li>The microdata in the <code><body></code> section describes a book using the <code>http://schema.org/Book</code> vocabulary, with properties for the book's name, author, publisher, ISBN, and description.</li> </ul> </div><h2>Conclusion</h2> <div class='content'><p>In this lesson, we covered the basics of microdata and metadata in HTML. Microdata allows you to embed structured data within your HTML content, making it easier for search engines to understand and index your pages. Metadata provides additional information about your web pages, improving their searchability and usability. By incorporating both microdata and metadata into your HTML documents, you can enhance the semantics and discoverability of your web content.</p> <p>Next, we will explore how to integrate HTML with CSS to style your web pages effectively.</p> </div><div class='row navigation'> <div class='col-2 d-none d-md-block'> <a href='07-03-data-attributes' title="Data Attributes" class="py-2 px-3 btn btn-primary"> ◄ Previous </a> </div> <div class='col-2 d-md-none'> <a href='07-03-data-attributes' title="Data Attributes" class="py-2 px-3 btn btn-primary"> ◄ </a> </div> <div class='col-8 text-center'> </div> <div class='col-2 text-end d-none d-md-block'> <a href='08-01-linking-css-html' title="Linking CSS to HTML" class="py-2 px-3 btn btn-primary" data-read-mod="html" data-read-unit="7-4"> Next ► </a> </div> <div class='col-2 text-end d-md-none '> <a href='08-01-linking-css-html' title="Linking CSS to HTML" class="py-2 px-3 btn btn-primary" data-read-mod="html" data-read-unit="7-4"> ► </a> </div> </div> </div> </div> <div class="col-12 col-lg-4 publi" id="div_publi"> <div class="container mt-2 d-none d-md-block index"> <h1>HTML Course</h1> <h2>Module 1: Introduction to HTML</h2> <ul> <li><a href="01-01-what-is-html">What is HTML?</a></li> <li><a href="01-02-setting-up-environment">Setting Up Your Environment</a></li> <li><a href="01-03-basic-html-structure">Basic HTML Structure</a></li> <li><a href="01-04-html-tags-elements">HTML Tags and Elements</a></li> <li><a href="01-05-creating-first-html-page">Creating Your First HTML Page</a></li> </ul> <h2>Module 2: HTML Text Formatting</h2> <ul> <li><a href="02-01-headings-paragraphs">Headings and Paragraphs</a></li> <li><a href="02-02-text-formatting-tags">Text Formatting Tags</a></li> <li><a href="02-03-lists-ordered-unordered">Lists: Ordered and Unordered</a></li> <li><a href="02-04-blockquotes-preformatted">Blockquotes and Preformatted Text</a></li> </ul> <h2>Module 3: HTML Links and Media</h2> <ul> <li><a href="03-01-creating-hyperlinks">Creating Hyperlinks</a></li> <li><a href="03-02-adding-images">Adding Images</a></li> <li><a href="03-03-embedding-videos">Embedding Videos</a></li> <li><a href="03-04-using-audio-tags">Using Audio Tags</a></li> </ul> <h2>Module 4: HTML Tables</h2> <ul> <li><a href="04-01-basic-table-structure">Basic Table Structure</a></li> <li><a href="04-02-table-headers-footers">Table Headers and Footers</a></li> <li><a href="04-03-merging-cells">Merging Cells: Colspan and Rowspan</a></li> <li><a href="04-04-styling-tables">Styling Tables</a></li> </ul> <h2>Module 5: HTML Forms</h2> <ul> <li><a href="05-01-creating-basic-form">Creating a Basic Form</a></li> <li><a href="05-02-form-elements">Form Elements: Input, Textarea, and Select</a></li> <li><a href="05-03-form-attributes-validation">Form Attributes and Validation</a></li> <li><a href="05-04-submitting-forms">Submitting Forms</a></li> </ul> <h2>Module 6: HTML5 Semantic Elements</h2> <ul> <li><a href="06-01-introduction-semantic-html">Introduction to Semantic HTML</a></li> <li><a href="06-02-header-nav-footer">Header, Nav, and Footer</a></li> <li><a href="06-03-article-section-aside">Article, Section, and Aside</a></li> <li><a href="06-04-main-figure">Main and Figure</a></li> </ul> <h2>Module 7: Advanced HTML Techniques</h2> <ul> <li><a href="07-01-html-entities">HTML Entities</a></li> <li><a href="07-02-using-iframes">Using Iframes</a></li> <li><a href="07-03-data-attributes">Data Attributes</a></li> <li><a href="07-04-microdata-metadata">Microdata and Metadata</a></li> </ul> <h2>Module 8: HTML and CSS Integration</h2> <ul> <li><a href="08-01-linking-css-html">Linking CSS to HTML</a></li> <li><a href="08-02-inline-internal-external-css">Inline, Internal, and External CSS</a></li> <li><a href="08-03-basic-css-selectors">Basic CSS Selectors</a></li> <li><a href="08-04-styling-html-elements">Styling HTML Elements</a></li> </ul> <h2>Module 9: Responsive Web Design</h2> <ul> <li><a href="09-01-introduction-responsive-design">Introduction to Responsive Design</a></li> <li><a href="09-02-viewport-meta-tag">Viewport Meta Tag</a></li> <li><a href="09-03-media-queries">Media Queries</a></li> <li><a href="09-04-responsive-images-videos">Responsive Images and Videos</a></li> </ul> <h2>Module 10: Best Practices and Accessibility</h2> <ul> <li><a href="10-01-html-best-practices">HTML Best Practices</a></li> <li><a href="10-02-web-accessibility-basics">Web Accessibility Basics</a></li> <li><a href="10-03-using-aria-roles">Using ARIA Roles</a></li> <li><a href="10-04-testing-accessibility">Testing for Accessibility</a></li> </ul> <h2>Module 11: Project: Building a Complete Website</h2> <ul> <li><a href="11-01-planning-website">Planning Your Website</a></li> <li><a href="11-02-creating-layout">Creating the Layout</a></li> <li><a href="11-03-adding-content-media">Adding Content and Media</a></li> <li><a href="11-04-testing-deployment">Testing and Deployment</a></li> </ul> </div> </div> </div> </div> <div class="container-xxl d-block d-md-none"> <div class="row"> <div class="col-12 p-2 p-md-0 m-0 text-end"> <a href="/objective" rel="nofollow">The Project</a> | <a href="/about" rel="nofollow">About Us</a> | <a href="/contribute" rel="nofollow">Contribute</a> | <a href="/donate" rel="nofollow">Donations</a> | <a href="/license" rel="nofollow">License</a> </div> </div> </div> <div class="container-xxl my-3"> <div class="row"> <div class="col"> <footer>© Copyright 2024. All rights reserved</footer> </div> </div> </div> <div id="cookies_adv" style="display:none;"> We use cookies to improve your user experience and offer content tailored to your interests. <a href="#" id="btn_accept_cookies" class="button">Accept</a> <a href="/cookies">More Information</a> </div> <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="loginModalLabel">User not authenticated</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div id="modal-body-main"></div> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> </body> </html> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>