Introduction to HTML

Social Network Metadata

Facebook uses a set of specific metadata tags that can be included in an HTML document to provide information about the page.

og:title specifies the title of the page;
og:type specifies the type of content on the page;
og:image specifies the URL of an image that represents the page;
og:url specifies the URL of the page;
og:description provides a brief description of the page.

Including these tags in an HTML document allows Facebook to correctly display a link to the page when it is shared on the platform.

Here is an example of HTML code that includes Facebook-specific metadata tags:

index.html

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<meta property="og:title" content="Page Title" />

<meta property="og:type" content="website" />

<meta property="og:url" content="https://www.example.com/page" />

<meta property="og:image" content="https://www.example.com/image.jpg" />

<meta property="og:description" content="A brief description of the page." />

</head>

<body></body>

</html>

Twitter uses a different set of metadata tags than Facebook.

twitter:card specifies the type of card that will be used to display the link on Twitter;
twitter:title identifies the page's title;
twitter:image tag, which identifies the URL of an image that represents the page.

All the other platforms may have their specific metatags.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<meta name="twitter:card" content="summary" />

<meta name="twitter:title" content="Page Title" />

<meta name="twitter:image" content="https://www.example.com/image.jpg" />

</head>

<body></body>

</html>

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 3. Capítulo 2

Pergunte à IA

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

We use cookies to make your experience better!

some-alt

Introduction to HTML

0%

1. Basics Introduction

The main goal of HTML is to make webpages traversable like a tree where every piece of content is wrapped in its meaningful container.

Nesting Elements and Comments

Anatomy of an HTML Document

2. Basic Elements

Now that we have gone over the basic understanding of HTML documents, the mandatory structure they should have, and how tags and attributes work. We will move on to some important elements used in a typical HTML page.

Emphasis and Bold

3. Metadata and the Head Element

Now that we have gone over the basics of HTML about commonly used elements and how the attributes are used. We will now move on to another important part of an HTML document that isn't mostly displayed on the web page but is a metadata container, which is the head tag.

Social Network Metadata

CSS and Javascript

4. Advanced Text Formatting Elements

By the end of this section, participants will have a solid understanding of these HTML concepts and be able to apply them to create well-structured and formatted web pages.

Code Markup in HTML

Miscellaneous Elements

Non-Semantic Wrappers

5. Advanced Concepts

So now that we have a good grip on most of the basic topics of HTML along with familiarity with basic text elements, now, we will move on to somewhat advanced topics which cover things necessary for developing any starter web page, be it a portfolio or a full-fledged e-commerce store.

ID and Class Attribute

Responsive Images