A combined HTML code editor and preview window showing markup and results for heading, ordered list, and list item HTML tags.

The machine interpreting it reads an enormous difference although each of those elements would look the same into a human producing this page. Even though WYSIWYG text entry fields can theoretically encourage semantic HTML, in practice that they too frequently fall prey to the idiosyncrasies of even the most well-intentioned content writers. By making purposeful content structure that a core element of a website’s content management system, organizations may create semantically correct HTML for each component, every moment. Additionally, this is the base which makes it feasible to capitalize on the rich relationship descriptions given by data that is linked.

  • Content Everywhere, Sara Wachter-Boettcher
  • The role of structured content

    In addition to locating and excerpting information, for example recipe steps or parking ticket payment options, search and applications representative algorithms now today aggregate content from multiple sources by using data that is linked.

    In their latest book, Designing Connected Content, Carrie Hane and Mike Atherton define structured content as articles which is”planned, developed, and connected out an interface so it’s ready for any interface.” A structured content design strategy frames articles tools –such as recipes, articles, product descriptions, how-tos, profiles, etc.–not as pages available and read, but as packages composed of little chunks of content data that all relate to one another in meaningful ways.

      The City of Seattle’s”Pay My Site” page, even though it lacks the glistening visual style of Boston’s website, also communicates parking ticket payment options obviously to human people:

      The business case for content that is structured layout

      Google search results info box for Dr. Ruhlman, showing an photo; a map; ratings; an address; reviews; buttons to ask a question, leave a review, and add a photo; and other people searched for.

      Not one of the links supplied in the Google Assistant results take me straight to the”How to Purchase a Parking Ticket” page, nor do the descriptions definitely allow me to know I am on the right track. (I didn’t ask about asking a hearing) This is because the content on the City of Boston parking ticket page is designed to communicate content connections visually to individual readers but is not structured semantically in a manner which also communicates those connections to inquisitive algorithms.

      The City of Boston website's “How to Pay a Parking Ticket” page, showing a tabbed view of ways to pay and instructions for the first of those ways, paying online.

      In order to tailor results to such more specifically formulated questions, software agents have begun inferring purpose and subsequently using the related data at their disposal to assemble a targeted, succinct response. If I ask Google Assistant what time Dr. Ruhlman’s office closes, for instance, it responds,”Dr. Ruhlman’s office closes at 5 p.m.,” and exhibits this result:
      In this instance, Dr. Ruhlman’s profile is marked up with microdata depending on the schema.org vocabulary. Schema.org is a collaborative effort backed by Google, Yahoo, Bing, and Yandex who aims to create a frequent language for digital resources on the internet. This content that is structured base provides the base on. The Knowledge Graph information box, for example, includes Google testimonials, which aren’t part of Dr. Ruhlman’s profile, but which have been aggregated to this overview.

      The search for a second recommendation, Stacey Donion, MD, provides a different encounter. Like the City of Boston site above, Dr. Donion’s profile about the Kaiser Permanente site is perfectly intelligible to some sighted individual reader. But because its markup is entirely presentational, its material is virtually invisible to software agents.
      HTML markup that concentrates only on the presentational aspects of a”page” may look perfectly fine to an individual reader but be completely illegible to an algorithm. Take, for instance, the City of Boston site, redesigned a couple of years back in cooperation with top-tier design and development partners. If I Wish to find advice about how to pay a parking ticket, then a connection from the home page takes me directly to the”How to Purchase a Parking Ticket” screen (scrolled to show detail):
      These results are not just aggregated from sources, but are interpreted and remixed to provide a answer to my specific question. Getting directions, placing a phone call, and obtaining Dr. Ruhlman’s profile site on swedish.org are at the ends of my fingers.
      In addition to the indexing function that traditional search engines function, smart brokers and AI-powered search calculations are currently bringing in the mainstream additional modes of obtaining advice: aggregation and inference. As a result, design efforts that are devoted to creating webpages that are visually effective are no longer sufficient to ensure the integrity or accuracy of content. Rather, by focusing on providing access to information in a structured, systematic manner that is legible to both humans and machines, content publishers may ensure that their content is equally accurate and accessible in those new contexts, whether or not they’re creating chatbots or tapping to AI directly. In this guide, we will consider effect and the forms of content, and we’ll close with a set of tools that could help you to get started using a material that is structured approach to information design.
      Linked data expands the basic capabilities of semantic HTML by describing not just what kind of thing a page element is (“Pay My Ticket” is a

      ), but in addition the real-world concept that item represents: that

      signifies a”cover action,” which inherits the structural attributes of”trade activities” (the exchange of goods and services for cash ) and”activities” (actions carried out by an agent upon an item ). Linked data generates a richer, more nuanced description of the relationship between page components, and it supplies the structural and technical advice that calculations need to meaningfully bring data together from disparate sources.

      Google search results page for Scott Ruhlman, MD, showing a list of standard links and an info box with an image, a map, ratings, an address, and reviews information.

      Voice queries and content inference

      The City of Seattle website’s 'Pay My Ticket' page, with two HTML heading elements outlined and labeled for illustration, and an open inspector panel, where we can see that the headings look the same to viewers but are marked up differently in the code.

      The model of building pages and then expecting users to discover and parse those pages to answer queries, though time-tested in the pre-voice era, is quickly becoming inadequate for successful communication. It precludes associations from participating in patterns of information discovery and seeking. And it may lead software agents to make inferences based on erroneous or insufficient information , potentially routing clients to competitors who communicate more efficiently.
      Practitioners from the design community have shared a wealth of tools lately on creating material systems which work for algorithms and humans alike. To learn more about implementing a structured content strategy for your organization, these articles and books are a Terrific place to begin:
      When we conduct Dr. Ruhlman’s Swedish Hospital profile page via Google’s Structured Data Testing Tool, we can observe that articles about him is structured as small, discrete elements, each of which can be marked up using descriptive types and attributes that convey both the meaning of those attributes’ values and the way they fit together as a whole–all in a machine-readable arrangement.
      These elements, when designed communicate data hierarchy and connections visually to calculations, and to readers. This structure allows Google Assistant to fairly stipulate the text from these

      headings represents payment options under the

      going”Pay My Ticket.”

      Google Assistant app on iPhone with the results of a “how do I pay a parking ticket in Boston” query, showing results only weakly related to the intended content.
      Google Structured Data Testing tool, showing the markup for Dr. Ruhlman's profile page on the left half of the screen, and the structured data attributes and values for the structured content on that page on the right half of the screen.

      In late 2016, Gartner called that 30 percent of web browsing sessions would be done with no display by 2020. Earlier the same year, Comscore had predicted that half of all searches are voice searches by 2020. Though there’s recent evidence to imply that the 2020 picture might be more complicated than those broad-strokes projections imply, we’re already seeing the impact that voice search, artificial intelligence, and smart software agents such as Alexa and Google Assistant are making about the way information is consumed and found online.

      The equivalent Google Assistant search, however, offers a much more useful result than we see Boston. In this case, the Google Assistant result links directly to the”Pay My Site” page and also lists a number of ways I will pay my ticket: online, by mail, and also in person.

      The City of Seattle website‘s “Pay My Ticket” page, showing four methods to pay a parking ticket in a simple, all-text layout.
      Google Structured Data Testing tool showing the markup for a bouillabaisse recipe website on the left half of the screen and the structured data attributes and values for structured content on the right half of the screen.
      The same allrecipes.com page viewed in Google’s Structured Data Testing Tool. The values that are machine-readable are shown by the pane on the right.

      Despite the visual simplicity of the City of Seattle parking page, it effectively ensures that the integrity of its content across contexts because it is composed of organized content that’s marked up semantically. “Buy My Ring” is a level-one heading (

      ), and also each of the options below it are level-two headings (

      ), which indicate they are subordinate to the level-one component.
      The initial result, nevertheless, suggests that smart agents might be at least partly susceptible to the same accessibility heuristic that affects humans, wherein the information that is simplest to remember frequently seems the most appropriate.

      There is insufficient evidence in this little sample to support a wide claim that algorithms have”cognitive” bias, but even when we allow for potentially confounding variables, we could observe the compounding issues we hazard by ignoring structured content. No matter the Kaiser Permanente outcome we are given above for Dr. Donion is for the wrong doctor. What’s more, from the Google Assistant voice hunt, the discussion format does not verify if we intended Dr. Donlon; it only provides us with her centre’s contact information. In these scenarios, providing transparent content can work to our advantage.

      Say that I would like to gather more info about two recommendations I have been awarded for surgeons. A search for an initial recommendation, Scott Ruhlman, MD, brings up a set of connections as well as a Knowledge Graph information box containing a photo, location, hours, phone number, and reviews from the net.

      Semantic HTML is markup that communicates information about the purposeful connections between document elements, as opposed to just describing how they ought to look on screen.

      When I ask Google Assistant what time Dr. Donion’s office closes, the result is not just less helpful but really points me in the wrong direction. Instead of a targeted selection of actions I’m presented to MultiCare Neuroscience Center.

      Google Assistant app on iPhone with the results of a “what time does dr. ruhlman office close” query. The results displayed include a card with “8:30AM–5:00PM” and the label, “Dr. Ruhlman Scott MD, Tuesday hours,” as well as links to call the office, search on Google, get directions, and visit a website. Additionally, there are four buttons labeled with the words “directions,” “phone number,” and “address,” and a thumbs-up emoji.

      Content is a mainstay of many kinds of information about the web. Recipe listings, for instance, have been based on structured articles for years. When I hunt, for example,”bouillabaisse recipe” on Google, I am provided with a standard list of links to recipes, in Addition to an Summary of recipe measures, an image, and a pair of tags describing one instance recipe:
      I understand what my choices are for paying as a person reading this page I can pay online, in person, on the telephone, or by email. If I ask Google Assistant to pay a parking ticket in Boston, but things get a little confusing:

      Layout practices which build bridges between consumer requirements and technology requirements to meet with business goals are crucial to making this vision a reality. Experience designers all, content strategists, developers, and information architects have a part to play in providing and designing content options that are structured.
      The rising prevalence of voice for a manner of access to information makes supplying structured, machine-intelligible content all the more significant. Voice and intelligent software agents aren’t solely freeing users from their keyboards, they’re changing user behaviour. According to LSA Insider, there are many critical differences between voice queries and typed questions. Voice questions tend to be:

      Linked content and data aggregation

    Getting started: who and how

    In this example, we can see that Google can find plenty of links to Dr. Donion in its own typical index outcomes, but it is not able to”understand” the information about these sources well enough to present an aggregated result. In cases like this, the Knowledge Graph knows Dr. Donion is a Kaiser Permanente physician, but it pulls in the wrong location and the incorrect doctor’s name in its endeavor to build a Knowledge Graph display.
    Such quick interactions, however, are only one small piece of a larger issue: linked data is increasingly key to preserving the integrity of content online. Like the hospitals, government agencies, and schools I have consulted with for years, don’t measure the success of their communications efforts in page views or ad clicks. Success for them means linking patients, constituents, and community members with precise information about the business and services. This communication-based definition of achievement applies to any sort of organization working to further its business goals.

    Google search results page for Dr. Donion, showing a list of standard links for Dr. Donion, and a 'Did you mean: Dr Stacy Donlon MD' link at the top. There is a Google info box, as with the previous search results page example. But in this case the box does not display information about the doctor we searched for, Dr. Donion, but rather for 'Kaiser Permanente Orthopedics: Morris Joseph MD.'

    You’ll also notice that while Dr. Stacey Donion is an exact match in all of the listed search results–which are a lot of enough to meet with the initial results page–we’re revealed a”did you mean” link to get a different physician. Multicare does, nevertheless, provide semantic and linked profiles to get their doctors.

    The City of Seattle website’s “Pay My Ticket” page, with the HTML heading elements outlined and labeled for illustration.

    MultiCare Neuroscience Center, you’ll remember, is where Dr. Donlon–the neuroscientist Google thinks I might be searching for, not the surgeon I’m really looking for–clinics.
    While this usage of semantic HTML offers distinct advantages over the”page display” styling we saw on the City of Boston’s site, the Seattle page also shows a weakness that is typical of guide approaches to semantic HTML. You’ll notice that, in the Google Assistant outcomes, the”Pay by Phone” option we saw on the web page was not listed. If we look at the markup of the webpage, we can observe that while the 3 choices found by Google Assistant are wrapped in both and

    tags,”Pay by Phone” is only marked up using an

    . This irregularity in arrangement could be what’s causing this option to be omitted by Google Assistant from its own results.
    In a structured content layout process, the relationships between articles chunks are defined and described. This makes the relationships between them and both the content chunks legible into calculations. Algorithms can then translate a content package as the”webpage” I am searching for–or remix and accommodate that same content to provide me a list of instructions, the amount of stars on a review, the period of time left before an office shuts, and some variety of other succinct answers to certain questions.

    Google Assistant app on iPhone with the results of a “what time does Doc Dr Stacey donion office close” query. The results displayed include a card with “8AM–5PM” and the label “MulitCare Neuroscience Center, Monday hours,” as well as links to call the office, search on Google, get directions, or visit a website.

    By communicating clearly in an electronic context that now includes aggregation and inference, organizations are more effectively able to consult with their customers where users really are, make it on a web site, a search engine results page, or a voice-controlled digital helper. They’re also able to keep greater control over their messages’ accuracy by making sure the proper content communicated and can be found across contexts.
    This”featured snippet” view is possible since the content publisher, allrecipes.com, has broken this recipe into the smallest meaningful chunks suitable for this subject matter and audience, then expressed advice about those chunks as well as the relationships between them in a machine-readable way. In this example, allrecipes.com has used both semantic HTML and linked data to make this content not merely a webpage, but in addition legible, accessible data which can be accurately interpreted, accommodated, and remixed by algorithms and smart agents. Let us look at each one of those components in turn to see how they work across indexing, aggregation, and inference contexts.

    Google Assistant app on iPhone with the results of a “how do I pay a parking ticket in Seattle” query, showing nearly the same results as on the desktop web page referenced above.

    Program agent search and semantic HTML

    This statement was intended to aid strategists, designers, and businesses get ready for the imminent rise of cellular. It continues to ring true for connected data’s era. With the increasing prevalence of smart supporters and voice-based queries, a company’s website is less and less inclined to be a potential visitor’s first encounter with rich content. In many cases — such as phone numbers, hours, finding location info, and evaluations –this pre-visit engagement might be a user interaction with an information source.