[MUSIC] When dealing with web systems, there are many different types of formats that can be used to store and express content. This lesson outlines three common formats. The first two are HTML and XML, which are markup languages used to express and structure content. The third format is JSON, which is a popular lightweight data interchange format used in many web applications today. Markup languages are designed to adorn texts in a machine and human-readable way, typically to add meaning or structure. Markup languages rely on tags to mark how certain pieces of text are interpreted. These tags are often standard words that you can define for some meaning or purpose. Here, we have the text, service-oriented architecture. With service-oriented marked as an adjective and architecture marked as a noun. There's typically no programming syntax in markup languages. You just use tags in order to turn a simple text file into something a computer can manipulate or a human can understand. The text on web pages is structured through a markup language, HyperText Markup Language, or HTML. When it comes to web pages, HTML focuses on structuring, not styling, the text. That is, it marks what parts of the page text are the title, headings, paragraphs, etc. Which need to be rendered appropriately by a web browser. HTML has a predefined set of tags that serve different purposes. This code snippet shows you the most basic features of an HTML document. In this example, there are specific tags that have different meanings in an HTML file. DOCTYPE, for example, is necessary as the first line in any HTML file. It is was denotes to the browser that the content is HTML. The rest of the HTML document is contained in the html tags. Usually, an HTML document is broken up into two sections, the head and the body. There are tags that contain the head and the body information of the document. The head typically contains metadata being used by the page. The body contains the main content and information of your web page. It contains the text, links, images, lists, and other data you want to present. All also tagged appropriately. Notice how there is no styling information in this HTML document. If you want to add aesthetics like fonts and colors, you can apply a cascading style sheet, or CSS style. CSS can reference the standard HTML tags to apply specific styles to text within those tags. This styling can be applied via a separate CSS file, or directly within the HTML document. For example, this CSS file would style all text within HTML p tags, or paragraph tags, with the color blue. Extensible Markup Language, or XML, is a markup language meant to store and transport data. As with the other markup languages, it is both machine and human-readable. Typically, XML is used to send structured data within a web-based system. In this example, we have an XML document. Intuitively, we have a note to John from Jane with a heading, Reminder, and body text, Don't forget the dogs. You can define an XML schema for the valid tags and their appropriate structure for an XML document. JavaScript Object Notation, or JSON, is another format that can be used to store and transport data. Like HTML and XML, it is also designed to be both machine and human-readable. One big benefit of using JSON format is the ability to easily convert JSON to JavaScript objects and vice versa. JavaScript is an interpreted programming language commonly supported in modern web browsers. This makes JSON a popular format when transferring data between web browsers and servers. And for passing around data in web applications. Let's look at an example of a JSON object. JSON data is written as name-value pairs, with JSON objects written inside curly braces. In this example, you can see a JSON object of a person. The person object can have a number of properties written as name-value pairs. Here we have a person named John Doe, who is aged 15, with favorite color being red. JSON data can also have arrays of JSON objects. Arrays in JSON are written inside square brackets. Here you can see a list of JSON objects with three different people and their properties. Common formats for expressing content in web-based systems are HTML, XML, and JSON. They are all machine and human-readable. HTML and XML are markup languages based on tagging text. HTML is used to structure the text on web pages to be rendered appropriately in web browsers. XML is generally used to structure data or messages. JSON is used to represent data as key-value pairs, which can be easily converted to and from JavaScript objects.
