สมมติว่าคุณมีหน้าที่ส่งตั๋ว Google I/O 2013 ให้ผู้เข้าร่วม และต้องการใช้ข้อมูลเชิงความหมายของมาร์กอัปในอีเมลเหล่านี้ อย่างน้อยที่สุด อีเมลยืนยันการจองตั๋วจะมี HTML ดังต่อไปนี้
<html>
<body>
<p>
Dear John, thanks for booking your Google I/O ticket with us.
</p>
<p>
BOOKING DETAILS<br/>
Order for: John Smith<br/>
Event: Google I/O 2013<br/>
When: May 15th 2013 8:30am PST<br/>
Venue: Moscone Center, 800 Howard St., San Francisco, CA 94103<br/>
Reservation number: IO12345<br/>
</p>
</body>
</html>
การมาร์กอัปอีเมลนี้ทำได้ง่ายมาก คุณเพิ่มข้อมูลที่เกี่ยวข้องในเนื้อหาของอีเมลได้ทุกที่ภายใน body ของ HTML ของอีเมลในรูปแบบที่มีโครงสร้างซึ่งสอดคล้องกับรูปแบบที่รองรับรูปแบบใดรูปแบบหนึ่ง บล็อกโค้ดต่อไปนี้แสดงลักษณะของอีเมลที่มาร์กอัป
[null,null,["อัปเดตล่าสุด 2025-08-29 UTC"],[],[],null,["# Get Started\n\nEmail markup uses structured data in emails to work. Gmail supports both [JSON-LD](/workspace/gmail/markup/reference/formats/json-ld) and [Microdata](/workspace/gmail/markup/reference/formats/microdata) and you can use either of them to markup information in email. This lets Google understand the fields and provide the user with relevant search results, actions, and cards. For example, if the email is about an event reservation, you might want to annotate the start time, venue, number of tickets, and all other information that defines the reservation.\n\nYour first markup\n-----------------\n\nLet's say you are responsible for sending out Google I/O 2013 tickets to participants and you want to use markup semantic information in these emails. At the very least, your ticket confirmation email will contain HTML like the following: \n\n \u003chtml\u003e\n \u003cbody\u003e\n \u003cp\u003e\n Dear John, thanks for booking your Google I/O ticket with us.\n \u003c/p\u003e\n \u003cp\u003e\n BOOKING DETAILS\u003cbr/\u003e\n Order for: John Smith\u003cbr/\u003e\n Event: Google I/O 2013\u003cbr/\u003e\n When: May 15th 2013 8:30am PST\u003cbr/\u003e\n Venue: Moscone Center, 800 Howard St., San Francisco, CA 94103\u003cbr/\u003e\n Reservation number: IO12345\u003cbr/\u003e\n \u003c/p\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n\nMarking up this email is very easy. Relevant pieces of information in the email body can be added anywhere inside the `body` of the email's HTML in a structured form corresponding to one of the supported formats. The following code block shows what the marked-up email looks like: \n\n### JSON-LD\n\n \u003chtml\u003e\n \u003cbody\u003e\n \u003cscript type=\"application/ld+json\"\u003e\n {\n \"@context\": \"http://schema.org\",\n \"@type\": \"EventReservation\",\n \"reservationNumber\": \"IO12345\",\n \"underName\": {\n \"@type\": \"Person\",\n \"name\": \"John Smith\"\n },\n \"reservationFor\": {\n \"@type\": \"Event\",\n \"name\": \"Google I/O 2013\",\n \"startDate\": \"2013-05-15T08:30:00-08:00\",\n \"location\": {\n \"@type\": \"Place\",\n \"name\": \"Moscone Center\",\n \"address\": {\n \"@type\": \"PostalAddress\",\n \"streetAddress\": \"800 Howard St.\",\n \"addressLocality\": \"San Francisco\",\n \"addressRegion\": \"CA\",\n \"postalCode\": \"94103\",\n \"addressCountry\": \"US\"\n }\n }\n }\n }\n \u003c/script\u003e\n \u003cp\u003e\n Dear John, thanks for booking your Google I/O ticket with us.\n \u003c/p\u003e\n \u003cp\u003e\n BOOKING DETAILS\u003cbr/\u003e\n Reservation number: IO12345\u003cbr/\u003e\n Order for: John Smith\u003cbr/\u003e\n Event: Google I/O 2013\u003cbr/\u003e\n Start time: May 15th 2013 8:00am PST\u003cbr/\u003e\n Venue: Moscone Center, 800 Howard St., San Francisco, CA 94103\u003cbr/\u003e\n \u003c/p\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n\n### Microdata\n\n \u003chtml\u003e\n \u003cbody\u003e\n \u003cdiv itemscope itemtype=\"http://schema.org/EventReservation\"\u003e\n \u003cmeta itemprop=\"reservationNumber\" content=\"IO12345\"/\u003e\n \u003cdiv itemprop=\"underName\" itemscope itemtype=\"http://schema.org/Person\"\u003e\n \u003cmeta itemprop=\"name\" content=\"John Smith\"/\u003e\n \u003c/div\u003e\n \u003cdiv itemprop=\"reservationFor\" itemscope itemtype=\"http://schema.org/Event\"\u003e\n \u003cmeta itemprop=\"name\" content=\"Google I/O 2013\"/\u003e\n \u003ctime itemprop=\"startDate\" datetime=\"2013-05-15T08:30:00-08:00\"/\u003e\n \u003cdiv itemprop=\"location\" itemscope itemtype=\"http://schema.org/Place\"\u003e\n \u003cmeta itemprop=\"name\" content=\"Moscone Center\"/\u003e\n \u003cdiv itemprop=\"address\" itemscope itemtype=\"http://schema.org/PostalAddress\"\u003e\n \u003cmeta itemprop=\"streetAddress\" content=\"800 Howard St.\"/\u003e\n \u003cmeta itemprop=\"addressLocality\" content=\"San Francisco\"/\u003e\n \u003cmeta itemprop=\"addressRegion\" content=\"CA\"/\u003e\n \u003cmeta itemprop=\"postalCode\" content=\"94103\"/\u003e\n \u003cmeta itemprop=\"addressCountry\" content=\"US\"/\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cp\u003e\n Dear John, thanks for booking your Google I/O ticket with us.\n \u003c/p\u003e\n \u003cp\u003e\n BOOKING DETAILS\u003cbr/\u003e\n Reservation number: IO12345\u003cbr/\u003e\n Order for: John Smith\u003cbr/\u003e\n Event: Google I/O 2013\u003cbr/\u003e\n Start time: May 15th 2013 8:00am PST\u003cbr/\u003e\n Venue: Moscone Center, 800 Howard St., San Francisco, CA 94103\u003cbr/\u003e\n \u003c/p\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n\n### Microdata (inline)\n\n \u003chtml\u003e\n \u003cbody\u003e\n \u003cp\u003e\n Dear John, thanks for booking your Google I/O ticket with us.\n \u003c/p\u003e\n \u003cp itemscope itemtype=\"http://schema.org/EventReservation\"\u003e\n BOOKING DETAILS\u003cbr/\u003e\n Reservation number: \u003cspan itemprop=\"reservationNumber\"\u003eIO12345\u003c/span\u003e\u003cbr/\u003e\n Order for: \u003cspan itemprop=\"underName\" itemscope itemtype=\"http://schema.org/Person\"\u003e\n \u003cspan itemprop=\"name\"\u003eJohn Smith\u003c/span\u003e\n \u003c/span\u003e\u003cbr/\u003e\n \u003cdiv itemprop=\"reservationFor\" itemscope itemtype=\"http://schema.org/Event\"\u003e\n Event: \u003cspan itemprop=\"name\"\u003eGoogle I/O 2013\u003c/span\u003e\u003cbr/\u003e\n \u003ctime itemprop=\"startDate\" datetime=\"2013-05-15T08:30:00-08:00\"\u003eStart time: May 15th 2013 8:00am PST\u003c/time\u003e\u003cbr/\u003e\n Venue: \u003cspan itemprop=\"location\" itemscope itemtype=\"http://schema.org/Place\"\u003e\n \u003cspan itemprop=\"name\"\u003eMoscone Center\u003c/span\u003e\n \u003cspan itemprop=\"address\" itemscope itemtype=\"http://schema.org/PostalAddress\"\u003e\n \u003cspan itemprop=\"streetAddress\"\u003e800 Howard St.\u003c/span\u003e,\n \u003cspan itemprop=\"addressLocality\"\u003eSan Francisco\u003c/span\u003e,\n \u003cspan itemprop=\"addressRegion\"\u003eCA\u003c/span\u003e,\n \u003cspan itemprop=\"postalCode\"\u003e94103\u003c/span\u003e,\n \u003cspan itemprop=\"addressCountry\"\u003eUS\u003c/span\u003e\n \u003c/span\u003e\n \u003c/span\u003e\n \u003c/div\u003e\n \u003c/p\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n\nThe above email contains the minimal set of information to define an event reservation. You can markup other pieces of information in your emails to improve the user experience. For instance, the `ticketToken` property of the [`FlightReservation`](/workspace/gmail/markup/reference/flight-reservation) object lets you add a barcode image, such as a QR code, that can be included in a boarding pass card.\n\nTo learn about all of the supported types and their properties, see the [Reference guide](/workspace/gmail/markup/reference).\n| **Note:** Some of the schemas used by Google are still going through the standardization process of [schema.org](http://schema.org), and therefore, may change in the future. [Learn More](/workspace/gmail/markup/reference/schema-org-proposals)."]]
