{"id":13,"date":"2012-08-18T01:11:16","date_gmt":"2012-08-18T01:11:16","guid":{"rendered":"http:\/\/a.parsons.edu\/~dejongo\/12-fall\/?p=13"},"modified":"2023-03-25T23:23:46","modified_gmt":"2023-03-25T23:23:46","slug":"01-writing-html5","status":"publish","type":"post","link":"https:\/\/b.parsons.edu\/~dejongo\/01-writing-html5\/","title":{"rendered":"01 Writing HTML5"},"content":{"rendered":"<div id=\"TofContents\"><\/div>\n<ul id=\"contents\">\n<li><em>Contents<\/em><\/li>\n<li><a href=\"#structure\">Document Structure<\/a><\/li>\n<li><a href=\"#eltag\">Elements or Tags?<\/a><\/li>\n<li><a href=\"#HTMLstructure\"> HTML Structure<\/a><\/li>\n<li><a href=\"#tag\">Tag Attributes<\/a><\/li>\n<li><a href=\"#tag_hierarchy\">Tag Hierarchy<\/a><\/li>\n<li><a href=\"#write\">Writing HTML<\/a><\/li>\n<li><a href=\"#dom\">The DOM<\/a><\/li>\n<li><a href=\"#rulestofollow\">General Rules<\/a><\/li>\n<li><a href=\"#tags\">Elements<\/a><\/li>\n<li><a href=\"#inline_elements\">Inline Elements<\/a><\/li>\n<li><a href=\"#anchor\">Links<\/a><\/li>\n<li><a href=\"#block_elements\">Block Elements <\/a><\/li>\n<li><a href=\"#i-frame\">Iframe<\/a><\/li>\n<li><a href=\"#html5\">HTML5 Tags<\/a><\/li>\n<\/ul>\n<div style=\"width: 100%;\">\n<p><em>HTML<\/em> stands for <em>Hyper Text Markup Language<\/em>. If you wish to see the entire specification in a one page version (large document), visit the <a href=\"https:\/\/html.spec.whatwg.org\" target=\"_blank\" rel=\"noopener noreferrer\"> living standard<\/a><\/p>\n<p>Content is &#8220;marked up&#8221; using tags to designate the structural significance of that content. Each piece of content so marked up constitute an <a href=\"http:\/\/w3c.github.io\/html-reference\/elements.html\">HTML element<\/a>, of which there are many.<\/p>\n<p>A first level header is designated by opening and closing tags: <code>&lt;h1&gt;<\/code> 01 Writing HTML5 <code>&lt;\/h1&gt;<\/code>. All parts of the document are marked up with such tags to create <a href=\"http:\/\/w3c.github.io\/html-reference\/elements-by-function.html\">HTML elements<\/a>, even parts that you cannot see but still describe the document, such as the meta tags found in the header, or the <code>&lt;style&gt;<\/code> and <code>&lt;script&gt;<\/code> tags that contain CSS and Javascript.<\/p>\n<p>To create an HTML page, open a text processor. Creating a new file and call it <em>index.html<\/em> when saving. The file needs to be called <em>index.html<\/em> with a lower &#8220;i&#8221;. It is the index of the directory in which it is located. It will be the file that is opened upon entering that directory.<\/p>\n<p>Every directory should have an index.html file, as some web servers allow visitors to see the content of the directory when there is no index.html file present. Other files in the directory can be reached by placing links connecting that page on the index.html page.<\/p>\n<p>The following elements make up the HTML page:<\/p>\n<\/div>\n<p>&nbsp;<br \/>\n<br id=\"structure\" \/><\/p>\n<h2 class=\"l-head\">The Structure of an HTML Document<\/h2>\n<p>&nbsp;<\/p>\n<h3>The Doctype<\/h3>\n<p>The doctype has been greatly simplified in HTML5. The <a href=\"http:\/\/w3c.github.io\/html-reference\/syntax.html#doctype-syntax\">DOCTYPE<\/a> tells the browser the version of the HTML rules the document will follow. Using the following DOCTYPE tells the browser you will be using HTML5. This is the only DOCTYPE I expect to see.<\/p>\n<pre>&lt;!DOCTYPE html&gt;\r\n<\/pre>\n<h3>The HTML Element<\/h3>\n<p>The HTML elements contains all other elements. It is the root element, and the language attribute is specified as English.<\/p>\n<pre>&lt;html lang=\"en\"&gt;\r\n<\/pre>\n<h3>The Head Element<\/h3>\n<p>The <a href=\"http:\/\/w3c.github.io\/html-reference\/head.html#head\">head<\/a> element contains information about the content but not the content itself. This is known as the document;s metadata. The head element does not get displayed in the browser window.<\/p>\n<p>The <a href=\"http:\/\/w3c.github.io\/html-reference\/syntax.html#character-encoding\">Character encoding declaration<\/a> specifies the encoding used to store or transmit the document. The Meta tag charset=&#8221;<a href=\"http:\/\/en.wikipedia.org\/wiki\/UTF-8\">utf-8<\/a>&#8221; tells the browser to use the unicode universal character set transformation format\u20148-bit.<\/p>\n<p>The title shows up as the title of the browser window.<\/p>\n<pre>&lt;head&gt;\r\n\t&lt;meta charset=\"utf-8\"&gt;\r\n\t&lt;title&gt;Name&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n<\/pre>\n<p>The header element closes before the <a href=\"http:\/\/w3c.github.io\/html-reference\/body.html#body\">body<\/a> element opens.<\/p>\n<h3>The Body Element<\/h3>\n<p>Markup written in the body element shows up in the <em>viewport<\/em>, or browser window. Think of this element as encompassing everything that appears in the browser window.<\/p>\n<p>Everything you write comes between the opening and closing body tag. In the following, only &#8220;Hello World!&#8221; will show. Comments are not rendered by the browser.<\/p>\n<pre>&lt;body&gt;\r\n&lt;!-- Comment your Work! --&gt;\r\n&lt;p&gt;Hello World!&lt;\/p&gt;\r\n&lt;\/body&gt;\r\n<\/pre>\n<p>The body element closes before the html element closes.<\/p>\n<h3>The Closing HTML element<\/h3>\n<p>Closing the HTML element is the last tag on the page. It closes the tag that holds all of the other elements in the document.<\/p>\n<pre>&lt;\/html&gt;\r\n<\/pre>\n<p><br id=\"eltag\" \/><br \/>\n&nbsp;<\/p>\n<h2 class=\"l-head\">Element or a Tags?<\/h2>\n<p>&nbsp;<\/p>\n<p class=\"pat\">An element is a single &#8220;chunk&#8221; of code comprising of a start and ending tag. They are representations of a thing for the browser, an object. Elements have all kinds of properties for the browser, like firstChild, etc.<\/p>\n<pre>&lt;div&gt;This is a div element&lt;\/div&gt;\r\n<\/pre>\n<p>Tags is the opening and closing code of the elements. <code>&lt;div&gt;<\/code> is a tag. <code>&lt;div&gt;<\/code>content<code>&lt;\/div&gt;<\/code> is an element.<\/p>\n<blockquote><p>&#8220;<em>Elements are not tags.<\/em> Some people refer to elements as tags (e.g., &#8220;the P tag&#8221;). Remember that the element is one thing, and the tag (be it start or end tag) is another. For instance, the HEAD element is always present, even though both start and end HEAD tags may be missing in the markup.&#8221; From W3 <a href=\"http:\/\/www.w3.org\/TR\/html401\/intro\/sgmltut.html\"> HTML <\/a>specification<\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<h2 class=\"l-head\">The Inherent Structure of HTML<\/h2>\n<p>&nbsp;<\/p>\n<p class=\"pat\">HTML is concerned with the structure of the content, and not with how the content should be displayed.<\/p>\n<p>The natural flow of content is <em>inline<\/em>, meaning that content flows horizontally, like the letters on a line of text. In English, that is from left to right but it could be in any direction.<\/p>\n<p>In addition to the horizontal inline flow of content, elements can be determined to be <em>block<\/em> like and flow vertically. Block elements do not flow like characters but like paragraphs, as entire blocks of text. By default, their width expands to fill the parent element and the flow is vertical. They flow down the page, starting from the upper left hand corner.<\/p>\n<p>In HTML, block elements cannot descend from (be a child of) inline elements. Inline elements are the content of a block element.<\/p>\n<p>CSS can change the display property of an element. It can make inline elements display as block elements, and block elements display as inline elements. That is very useful, usually to make inline elements act like block elements.<\/p>\n<p>Valid HTML requires that block level elements do not descend from inline elements. Changing the elements displays with CSS does not change the validity requirements of the HTML document.<br \/>\n<br id=\"tag\" \/><\/p>\n<h2 class=\"l-head\">Tag Attributes and Values<\/h2>\n<p>&nbsp;<\/p>\n<h3>Tag Attributes<\/h3>\n<p>HTML tags can take attributes, which describe certain aspects of the elements, with different elements having various assigned attributes. There needs to be a space between each attribute. Attributes for the img tag, for example, are src, width, height, class, and alt.<\/p>\n<p><code>Example: <span class=\"example\">&lt;img <span class=\"highlight\">src<\/span>=\"file_name\" <span class=\"highlight\">alt<\/span>=\"logo\"<\/span>&gt;<\/code><\/p>\n<p><code>Example: <span class=\"example\">&lt;a <span class=\"highlight\">href<\/span>=\"file_name\"&gt;<\/span>File Name&lt;\/a&gt;<\/code><\/p>\n<h3>Values<\/h3>\n<p>Every attribute has a value, even if it is an empty value. For example, the value of the src (source of the image) is the location and name of the image. While it is no longer a requirement to put either double or single quotes, as long as there are no spaces or other non-alphanumeric characters, it still best practice to do so.<\/p>\n<p><code>Example: <span class=\"example\">&lt;img src=<span class=\"highlight\">\"file_name\"<\/span> alt=<span class=\"highlight\">\"logo\"<\/span>&gt;<\/span><\/code><\/p>\n<p><code>Example: <span class=\"example\">&lt;a href=<span class=\"highlight\">\"file_name\"<\/span>&gt;<\/span>File Name&lt;\/a&gt;<\/code><\/p>\n<h3>Role Attributes<\/h3>\n<p>The role attribute describes the role(s) the current element plays in the context of the document. In the official language of the W3 &#8220;The XHTML Role Attribute allows the author to annotate XML Languages with machine-extractable semantic information about the purpose of an element. Use cases include accessibility, device adaptation, server-side processing, and complex data description.&#8221;<br \/>\n<code>Example: <span class=\"example\">&lt;nav <span class=\"highlight\">roll=\"navigation\"&gt;<\/span><\/span><\/code><br \/>\n<br id=\"tag_hierarchy\" \/><\/p>\n<h2 class=\"l-head\">Understanding the Tag Hierarchy<\/h2>\n<p>&nbsp;<\/p>\n<style>\n.hierarchy {margin: 1px 4px 1px 10px; padding: 2px 2px 2px 4px; border: 1px solid #aaa; background: #eee; }<br \/><\/style>\n<div style=\"width: 225px; float: right; margin: 10px 0 20px 30px;\">\n<p>DOCKTYPE<\/p>\n<div class=\"hierarchy\" style=\"margin: 0; border: 3px solid #666; background: #ccc;\">\n<p>html<\/p>\n<div class=\"hierarchy\" style=\"background: #bbb;\">\n<p>head<\/p>\n<div class=\"hierarchy\">meta<\/div>\n<div class=\"hierarchy\">title<\/div>\n<div class=\"hierarchy\">style<\/div>\n<\/div>\n<div class=\"hierarchy\" style=\"background: #bbb; margin-top: 20px;\">\n<p>body<\/p>\n<div class=\"hierarchy\">\n<p>main<\/p>\n<div class=\"hierarchy\">\n<p>header<\/p>\n<div class=\"hierarchy\">\n<p>nav<\/p>\n<div class=\"hierarchy\">\n<p>ul<\/p>\n<div class=\"hierarchy\">li<\/div>\n<div class=\"hierarchy\">li<\/div>\n<div class=\"hierarchy\">li<\/div>\n<div class=\"hierarchy\">li<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"hierarchy\">\n<p>section<\/p>\n<div class=\"hierarchy\">\n<p>article<\/p>\n<div class=\"hierarchy\">h2<\/div>\n<div class=\"hierarchy\">p<\/div>\n<div class=\"hierarchy\">\n<p>p<\/p>\n<div class=\"hierarchy\">img<\/div>\n<\/div>\n<div class=\"hierarchy\">\n<p>figure<\/p>\n<div class=\"hierarchy\">img<\/div>\n<div class=\"hierarchy\">figcaption<\/div>\n<\/div>\n<div class=\"hierarchy\">p<\/div>\n<\/div>\n<\/div>\n<div class=\"hierarchy\">footer<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p class=\"pat\">HTML is a collection of elements arranged in a kind of containment hierarchy. This is a <em>parent \u2013 child <\/em>relationship, where the enclosing tag is the parent of the enclosed tag, which is its child. The entire structure can be likened to a <em>tree<\/em>, with the <code>&lt;html&gt;<\/code> tag as the single trunk from which the rest of the branches arise, first splitting into the two main branches, the <code>&lt;head&gt;<\/code> and the <code>&lt;body&gt;<\/code>. inside the body tag are all of the other branches that make up the document.<\/p>\n<p>After the <code>&lt;doctype&gt;<\/code>, the HTML document starts with the <code>&lt;html&gt;<\/code> element that contains all other elements. It contains only two tags, the <code>&lt;head&gt;<\/code> and the <code>&lt;body&gt;<\/code> tags.<\/p>\n<p>The <code>&lt;head&gt;<\/code> tag contains information about the page (meta-information) but that is not visible, like the <code>&lt;title&gt;<\/code> tag, <code>&lt;meta&gt;<\/code>tags and <code>&lt;html&gt;<\/code>, <code>&lt;style&gt;<\/code> and <code>&lt;script&gt;<\/code> tags and links <code>&lt;link&gt;<\/code>to styles and scripts.<\/p>\n<p>The <code>&lt;body&gt;<\/code> tag contains all of the content, everything that&#8217;s visible in the browser window. The tags are usually several levels deep. <em>Nesting<\/em> tags is very useful, for it <em>groups<\/em> elements together. This makes it easy to create the different parts of the layout.<\/p>\n<p>In the figure on the right, the <code>&lt;wrapper&gt;<\/code> contains all of the other visible content. This element is usually given automatic margins that center it horizontally in its parent tag, the <code>&lt;body&gt;<\/code>. If the <code>&lt;wrapper&gt;<\/code> is moved to the right, all the child elements contained within it are moved to the right as well.<\/p>\n<p>Because each element is a child of another element, there are only clearly determined paths. For example, the <code>&lt;img&gt;<\/code> is a child of <code>&lt;p&gt;<\/code>, which is a child of <code>&lt;article&gt;<\/code>, which is a child of <code>&lt;section&gt;<\/code>, which is a child of <code>&lt;wrapper&gt;<\/code>. The complete path of the <code style=\"background: hsl(0 100% 80% \/.4);\">&lt;img&gt;<\/code> tag is <code>html body wrapper section article p img<\/code>. This path would select all images in the paragraphs contained in article, section, wrapper, body, html. Since there are no other images, only the image with the red background is targeted by this path. The <code>&lt;img&gt;<\/code> in the figure has a different path, for example.<br \/>\n<br id=\"write\" \/><\/p>\n<h2 class=\"l-head\">How to Write the Code<\/h2>\n<p>&nbsp;<\/p>\n<p class=\"pat\">A tab is used to show how many levels the code is nested from the <code>&lt;html&gt;<\/code> element. This results in a visual way to check if the code is nesting properly. The code should look like :<\/p>\n<pre>&lt;html&gt;\r\n\t&lt;head&gt;\r\n\t\t&lt;title&gt;title &lt;\/title&gt;\r\n\t&lt;\/head&gt;\r\n\t&lt;body&gt;\r\n\t\t&lt;main&gt;\r\n\t\t\t&lt;section&gt;\r\n\t\t\t\t&lt;header&gt;\r\n\t\t\t\t\t&lt;h1&gt;Headline for Page&lt;\/h1&gt;\r\n\t\t\t\t&lt;\/header&gt;\r\n\t\t\t\t&lt;article&gt;\r\n\t\t\t\t\t&lt;p&gt;content\r\n\t\t\t\t&lt;\/article&gt;\r\n\t\t\t\t&lt;footer&gt;\r\n\t\t\t\t&lt;\/footer&gt;\r\n\t\t\t&lt;\/section&gt;\r\n\t\t&lt;\/main&gt;\r\n\t&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>To make it easy on you, there are tools that let you clean up your hierarchies <a href=\"http:\/\/www.cleancss.com\/html-beautify\/\">automatically.<\/a> You&#8217;ll want to remember this link right before you hand in your midterm and at the end of the semester, when you hand in your final.<br \/>\n<br id=\"dom\" \/><\/p>\n<h2 class=\"l-head\">The DOM<\/h2>\n<p>&nbsp;<\/p>\n<figure><img decoding=\"async\" src=\"..\/12-fall\/stuff\/01-how_your_browser_renders_websites.png\" alt=\"how your browser renders websites\" \/><figcaption>how your browser renders websites<a href=\"https:\/\/github.com\/WICG\/cq-usecases\/wiki\/Circularity-and-Container-Queries?utm_campaign=CSS%2BLayout%2BNews&amp;utm_medium=email&amp;utm_source=CSS_Layout_News_131\">source<\/a><\/figcaption><\/figure>\n<p class=\"pat\">The HTML file with all of its codes and content gets parsed by the browser. The syntax of each tag will be analyzed to see how it fits together according to the HTML rules. This results in a document object model where each node represents a branch on the tree.<br \/>\n<br id=\"rulestofollow\" \/><\/p>\n<h2 class=\"l-head\">General Rules To Follow<\/h2>\n<p>&nbsp;<\/p>\n<p class=\"pat\">HTML5 has loosened up the rules somewhat but it is still desirable to follow these rules for well formed HTML documents.<\/p>\n<dl>\n<dt>Close Every Tag<\/dt>\n<dd>Most Tags contain content, meaning that there is an open tag and a closing tag to signify where the content starts and where it ends. Some tags do not need to close, like <code>&lt;img&gt;<\/code>because there is no content. These tags are pointer to content, and get replaced by that content. Other tags are self closing, like the <code>&lt;meta \/&gt;<\/code> and <code>&lt;br \/&gt;<\/code> tags. List of self-closing tags: area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, and wbr.<\/p>\n<p>Accidentally not closing a tag can cause all kinds of havoc and will be flagged when validating. It is a common occurrence in the first few weeks of writing code.<\/dd>\n<dt>Correctly Nest Every Tag<\/dt>\n<dd>If a tag opens before a preceding one closes, it must be closed before that preceding one closes. <code>&lt;header&gt;&lt;h1&gt;Title&lt;\/h1&gt;&lt;\/header&gt;<\/code> not <code>&lt;header&gt;&lt;h1&gt;Title&lt;\/header&gt;&lt;\/h1&gt;<\/code> CSS relies on proper nesting to target styles to elements, so you have to get this right. In this example, the <code>&lt;\/h1&gt;<\/code> tag is nested in the <code>&lt;\/header&gt;<\/code> tag, and is the child of the header, which is the parent tag. As a container, a tag acts like a group, and moving a parent also moves all of the enclosed children. Likewise, absolute positioning is based on the coordinates of the parent element.<\/p>\n<p>If you visualize each element as a node on a tree, it is obvious that you cannot open a tag before the previous tag is closed. If you make a mistake, the browsers can sometimes repair the damage, and everything still displays correctly but don&#8217;t count on it, and different browsers have different levels of damage control.<\/dd>\n<dt>Inline Tags Cannot Contain Block Level Tags.<\/dt>\n<dd>Block-level elements follow one another according to the document flow, one below the other. Inline elements follow one another as characters in a paragraph. While it would seem obvious to not mix these two up, the validator will catch you if you do.<\/dd>\n<dt>Keep Tags Lower Case<\/dt>\n<dd>This is a requirement of XHTML5, which we will not concern ourselves with but its a good idea anyway.<\/dd>\n<\/dl>\n<p>&nbsp;<\/p>\n<h2 class=\"l-head\">Tags Used to &#8220;Mark Up&#8221; the Content<\/h2>\n<p>&nbsp;<\/p>\n<p class=\"pat\">Learning HTML comes through writing HTML. The more you code, the easier it becomes till it&#8217;s second nature. The content is divided into inline and block tags.<\/p>\n<ul>\n<li>Block elements display like paragraphs, coming one after the other vertically down the page in the document flow.<\/li>\n<li>Inline elements display just like characters, coming one after the other horizontally till the end of the line. The line then breaks and resumes at the beginning the next line down, and so on.<\/li>\n<li>CSS allows you to override the object&#8217;s default display and make inline elements display like block elements or vice versa. You\u2019ll learn about that <a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-the-layout-modes\/#display\">later<\/a>.<\/li>\n<\/ul>\n<p>There are many <a href=\"http:\/\/w3c.github.io\/html-reference\/head.html#head\" target=\"_blank\" rel=\"noopener noreferrer\"> HTML elements<\/a>. Mozilla organizes them according to <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\" target=\"_blank\" rel=\"noopener noreferrer\">function<\/a>. That&#8217;s helpful. Don&#8217;t memorize them. You will remember the ones you use most often and you can always look up the other ones<a href=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/html5-cheat-sheet.pdf\" target=\"_blank\" rel=\"noopener noreferrer\"> up<\/a>. Here are all the elements you\u2019ll most likely use:<br \/>\n<br id=\"inline_elements\" \/><\/p>\n<h2 class=\"l-head\">Inline Elements<\/h2>\n<p>&nbsp;<\/p>\n<p class=\"pat\">These elements display just like characters, coming one after the other horizontally, till it comes to the end of the line.<\/p>\n<h3>span<\/h3>\n<p>The span tag selects inline content.<\/p>\n<p>So much <span style=\"color: red;\">information<\/span>.<\/p>\n<pre>So much &lt;span style=\"color: red;\"&gt;information&lt;\/span&gt;.<\/pre>\n<h3>strong<\/h3>\n<p>increases importance<\/p>\n<p>So much <strong>information<\/strong>.<\/p>\n<pre>So much &lt;strong&gt;information&lt;\/strong&gt;<\/pre>\n<h3>emphasis<\/h3>\n<p>for emphasis<\/p>\n<p>So much <em>information<\/em>.<\/p>\n<pre>So much &lt;em&gt;information&lt;\/em&gt;<\/pre>\n<h3>line break<\/h3>\n<p>Breaks the line without creating a new paragraph.<\/p>\n<p>So much<br \/>\ninformation.<\/p>\n<pre>So much &lt;br \/&gt;information.<\/pre>\n<h3>Inline Quotations<\/h3>\n<style>q:before {content: \"\u201c\"; } q:after {content: \"\u201d\"; }<\/style>\n<p>Quotations inside of a paragraph can  get automatic quotes when you use this tag and the following <a href=\"http:\/\/b.parsons.edu\/~dejongo\/03-the-mechanics-of-css\/#pseudoe\">CSS pseudo elements<\/a>. (q:before {content: &#8220;\u201c&#8221;; } q:after {content: &#8220;\u201d&#8221;; }).<\/p>\n<p>So much <q>information<\/q>.<\/p>\n<pre>So much &lt;q>information&lt;\/q>.<\/pre>\n<p><br id=\"anchor\" \/><\/p>\n<h3 id=\"anchor\">Anchor Tag (Links)<\/h3>\n<p>The anchor element anchors a <em> URL<\/em> (uniform resource locator, or a unique web address) that targets the destination id or web page by using the href (hypertext reference) attribute.<\/p>\n<p>Any tag can be a target, within any document on the world wide web. To target a tag, it has to contain an id <code>&lt;h3 id=\"anchor\"&gt;<\/code>.<\/p>\n<p>To target the id, you need to use the id identifier, the hash tag <code>#<\/code> and the id name itself. <code>&lt;a href=\"#anchor\"&gt;<\/code>.<\/p>\n<h4>Hyperlink to destination on the same page<\/h4>\n<p>Click the example below and you&#8217;ll see the page jump just a little.<\/p>\n<div><a href=\"#anchor\"><code>&lt;a href=\"#anchor\"&gt;<\/code><\/a><\/div>\n<h4>Hyperlinks to other pages<\/h4>\n<p>A hyperlink can address any unique webpage on the world wide web. It can use an absolute address, or a relative address, if the page is on the same server.<\/p>\n<h4>Absolute Hyperlink Address<\/h4>\n<p>An absolute address starts with <code>http:\/\/<\/code>, as in the address of the page that you are on (look up at the address bar)<code>&lt;a href=\"http:\/\/b.parsons.edu\/~dejongo\/01-writing-html5\/\"&gt;Writing HTML5&lt;\/a&gt;.<\/code><\/p>\n<div><a href=\"http:\/\/b.parsons.edu\/~dejongo\/01-absolute-and-relative-addresses\/\"><code>&lt;a href=\"http:\/\/b.parsons.edu\/~dejongo\/01-absolute-and-relative-addresses\/\"&gt;<\/code><\/a><\/div>\n<h4>Relative Hyperlink Address<\/h4>\n<p>If the page is on the same server, it is possible to omit the absolute reference, and specify the path to the document from the location of the document containing the link.<\/p>\n<div><a href=\"01-absolute-and-relative-addresses\/\"><code>&lt;a href=\"01-absolute-and-relative-addresses\/\"&gt;<\/code><\/a><\/div>\n<p>Links to a location on the same page are always relative to the page itself.<\/p>\n<div><a href=\"#anchor\"><code>&lt;a href=\"#anchor\"&gt;<\/code><\/a><\/div>\n<h4>Targeting tags on other pages<\/h4>\n<p>Links to a location an another page come at the end of a absolute or relative address.<\/p>\n<div><a href=\"http:\/\/b.parsons.edu\/~dejongo\/03-applying-css\/#color\"><code>&lt;a href=\"http:\/\/b.parsons.edu\/~dejongo\/03-applying-css\/#color\"&gt;<\/code><\/a><\/div>\n<p>and<\/p>\n<div><a href=\"03-applying-css\/#color\"><code>&lt;a href=\"03-applying-css\/#color\"&gt;<\/code><\/a><\/div>\n<h3>Image Tag<\/h3>\n<p>The image tag gets replaced by the image. The <code>img<\/code> tag does not have a closing tag.<\/p>\n<p>If the image is not at the location specified by the <code>src<\/code> attribute you will see a generic missing image icon.<\/p>\n<p>There has to be an <code>alt<\/code> attribute so that text will appear if the image does not show up. The <code>img<\/code> tag will be flagged by the validator if it does not have an <code>alt<\/code> tag. The information is used by screen readers to explain what the image is about to blind people who listen to web pages. It is also a good idea for illustrators, designers, photographers and other people relying on images to load up the description of each image so search engines can include that in people\u2019s searches.<\/p>\n<p>The <code>title<\/code> attribute is optional. The title shows up when you hover over the image for a second or more.<br \/>\n<img decoding=\"async\" title=\"Final Thumbnail\" src=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/images\/Thumbnails-Example8.jpg\" alt=\"description of image for screen readers or when images are turned off\" \/><\/p>\n<pre>&lt;img src=\"image_location\/name_of_image\" alt=\u201crequired description of \r\nimage for screen readers or when images are turned off\" title=\"Final Thumbnail\" &gt;<\/pre>\n<h3>Comments<\/h3>\n<p>Comments are a way to add notes or hide code. Comments are not displayed by the browser. Use them to notate your document with a description of what&#8217;s going on in each part of the document.<\/p>\n<p>Comments will help remind you why you did something a certain way (or help someone else figure out how to read your code).<\/p>\n<p>You can also use comments to temporarily hide code that you do not want to use but do not yet want to delete.<\/p>\n<p>Do not use two dashes in a row &#8212; within the comment, as that causes confusion in some browsers.<\/p>\n<pre>&lt;!--\r\nComment your Work! \r\n--&gt;<\/pre>\n<p><br id=\"block_elements\" \/><\/p>\n<h2 class=\"l-head\">Block-level Elements<\/h2>\n<p>&nbsp;<\/p>\n<p class=\"pat\">Block elements display like paragraphs, coming one after the other vertically down the page in the document flow.<\/p>\n<h3>div<\/h3>\n<p>div stands for division. It is the generic block element, used when an element is needed for styling purposes, or as a convenience for scripting. The <code><a href=\"https:\/\/www.scottohara.me\/blog\/2022\/01\/20\/divisive.html\"> &lt;div&gt;<\/a><\/code> element represents nothing, has no semantic meaning. Do not use in place of elements that have semantic meaning. It is not equivalent to the <a href=\"#html5\">HTML5<\/a> section element.<\/p>\n<div style=\"background: pink; padding: 10px;\">content<\/div>\n<pre>&lt;div style=\"background: pink; padding: 10px;\"&gt;content&lt;\/div&gt;<\/pre>\n<h3>Headlines<\/h3>\n<p>How a headline looks depends on how they are styled. You should use headlines to structure your content, not based on how they look.<\/p>\n<h1>Headline h1<\/h1>\n<h2>Headline h2<\/h2>\n<h3>Headline h3<\/h3>\n<h4>Headline h4<\/h4>\n<h5>Headline h5<\/h5>\n<h6>Headline h6<\/h6>\n<pre>&lt;h1&gt;Headline h1&lt;\/h1&gt;\r\n&lt;h2&gt;Headline h2&lt;\/h2&gt;\r\n&lt;h3&gt;Headline h3&lt;\/h3&gt;\r\n&lt;h4&gt;Headline h4&lt;\/h4&gt;\r\n&lt;h5&gt;Headline h5&lt;\/h5&gt;\r\n&lt;h6&gt;Headline h6&lt;\/h6&gt;\r\n<\/pre>\n<h3>paragraph<\/h3>\n<p>paragraph bla bla bla bla.<\/p>\n<p>paragraph bla bla bla bla.<\/p>\n<pre>&lt;p&gt;paragraph  bla bla bla bla.&lt;\/p&gt;\r\n&lt;p&gt;paragraph  bla bla bla bla.&lt;\/p&gt;\r\n<\/pre>\n<h3>Block Quote<\/h3>\n<p>Used to style quote that takes up an entire paragraph. It is indented and given a different style.<\/p>\n<p>paragraph bla bla bla bla.<\/p>\n<blockquote><p>So much information.<\/p><\/blockquote>\n<pre>&lt;p&gt;paragraph  bla bla bla bla.&lt;\/p&gt;\r\n&lt;blockquote&gt;So much information.&lt;\/blockquote&gt;\r\n<\/pre>\n<h3>Thematic Break (Horizontal Rule)<\/h3>\n<p>Although previous versions of HTML defined the hr element only in presentational terms, as in horizontal rule, the element has now been given the specific semantic purpose of representing a \u201cparagraph-level thematic break\u201d which is to be styled using CSS. For legacy reasons, browsers still render the <code>&lt;hr&gt;<\/code> as a horizontal rule.<\/p>\n<hr \/>\n<pre>&lt;hr&gt;\r\n<\/pre>\n<p>CSS:<\/p>\n<pre>hr {\r\n\tdisplay: block;\r\n\tmargin-before: 0.5em;\r\n\tmargin-after: 0.5em;\r\n\tmargin-start: auto;\r\n\tmargin-end: auto;\r\n\tborder-style: inset;\r\n\tborder-width: 1px; \r\n}<\/pre>\n<h3>ordered list<\/h3>\n<p>Ordered lists are numbered sequentially.<\/p>\n<h3>Ordered List<\/h3>\n<ol>\n<li>list item<\/li>\n<li>list item<\/li>\n<li>list item<\/li>\n<li>list item<\/li>\n<li>list item<\/li>\n<\/ol>\n<pre>&lt;h3&gt;Ordered List&lt;\/h3&gt;\r\n&lt;ol&gt; \r\n&lt;li&gt; list item &lt;\/li&gt; \r\n&lt;li&gt; list item &lt;\/li&gt;\r\n&lt;li&gt; list item &lt;\/li&gt;\r\n&lt;li&gt; list item &lt;\/li&gt;\r\n&lt;li&gt; list item &lt;\/li&gt;\r\n&lt;\/ol&gt; \r\n<\/pre>\n<h3>Continuation of the Ordered List<\/h3>\n<p>If you plan on breaking the list into several lists but want them to be numbered sequentially, use the start attribute <code>start=\"5\"<\/code>. This would start the list at 5 instead of 1.<\/p>\n<ol start=\"6\">\n<li>list item<\/li>\n<li>list item<\/li>\n<li>list item<\/li>\n<li>list item<\/li>\n<li>list item<\/li>\n<\/ol>\n<pre>&lt;ol start=\"6\"&gt; \r\n&lt;li&gt; list item &lt;\/li&gt; \r\n&lt;li&gt; list item &lt;\/li&gt;\r\n&lt;li&gt; list item &lt;\/li&gt;\r\n&lt;li&gt; list item &lt;\/li&gt;\r\n&lt;li&gt; list item &lt;\/li&gt;\r\n&lt;\/ol&gt;<\/pre>\n<h3>Unordered List<\/h3>\n<p>Unordered lists is for a collection of unordered items, where the order would not change the meaning of the list. It is always used for navigation, with each menu item considered as part of the list. The unordered list is <a href=\"..\/03-applying-css\/#lists\">styled<\/a> to remove the list style.\u0010<\/p>\n<ul>\n<li>list item<\/li>\n<li>list item<\/li>\n<li>list item<\/li>\n<li>list item<\/li>\n<li>list item<\/li>\n<\/ul>\n<pre>&lt;ul&gt; \r\n&lt;li&gt; list item &lt;\/li&gt;\r\n&lt;li&gt; list item &lt;\/li&gt;\r\n&lt;li&gt; list item &lt;\/li&gt;\r\n&lt;li&gt; list item &lt;\/li&gt;\r\n&lt;li&gt; list item &lt;\/li&gt;\r\n&lt;\/ul&gt;<\/pre>\n<h3>Definition Lists<\/h3>\n<p>Definition lists is for a list of terms and corresponding definitions. The term to be defined is listed first with the definition coming after the term. A term can have multiple definitions, and a definition can have multiple terms. A definition header can precede the definition.<\/p>\n<p><strong>List Header<\/strong><\/p>\n<dl>\n<dt>Term 1<\/dt>\n<dd>This is the definition of the first term.<\/dd>\n<dt>Term 2<\/dt>\n<dd>This is the definition of the second term.<\/dd>\n<\/dl>\n<pre>&lt;dl&gt;\r\n&lt;lh&gt;List Header&lt;\/LH&gt;\r\n&lt;dt&gt;Term 1&lt;\/dt&gt;\r\n&lt;dd&gt;This is the definition of the first term.&lt;\/dd&gt;\r\n&lt;dt&gt;Term 2&lt;\/dt&gt;\r\n&lt;dd&gt;This is the definition of the second term.&lt;\/dd&gt;\r\n&lt;\/dl&gt;\r\n<\/pre>\n<dl>\n<dt>term<\/dt>\n<dd>definition1<\/dd>\n<dd>definition2<\/dd>\n<\/dl>\n<pre> \r\n&lt;dl&gt;\r\n  &lt;dt&gt;term&lt;\/dt&gt;\r\n  &lt;dd&gt;definition1&lt;\/dd&gt;\r\n  &lt;dd&gt;definition2&lt;\/dd&gt;\r\n&lt;\/dl&gt;\r\n<\/pre>\n<dl>\n<dt>term1<\/dt>\n<dt>term2<\/dt>\n<dd>definition<\/dd>\n<\/dl>\n<pre> \r\n&lt;dl&gt;\r\n  &lt;dt&gt;term1&lt;\/dt&gt;\r\n  &lt;dt&gt;term2&lt;\/dt&gt;\r\n  &lt;dd&gt;definition&lt;\/dd&gt;\r\n&lt;\/dl&gt;\r\n<\/pre>\n<h3>Interactive Elements: details<\/h3>\n<div id=\"details\">\n<p>The details disclosure element does exactly what you think it does. It toggles information that is initially hidden, disclosing it. It takes two tags, the &lt;disclose> tag and the &lt;summary> tag. The summary tag has a triangle in front of it that when clicked discloses the hidden information. <\/p>\n<details>\n<summary>Details<\/summary>\n<p>    Something small enough to escape casual notice.<br \/>\n<\/details>\n<pre>\r\n&lt;details>\r\n    &lt;summary>Details&lt;\/summary>\r\n    Something small enough to escape casual notice.\r\n&lt;\/details>\r\n<\/pre>\n<\/p>\n<\/div>\n<style>\n#table table { border: 3px solid black  !important;width: 100% !important; margin: 60px 0 !important;}<br \/>#table td, #table col, #table tr, #table thead, #table th , #table tbody, #table tfoot   { border: 1px solid black !important; padding: 2px !important; width: 25%; text-align: center !important;  vertical-align: top;  border-spacing: 0; border-collapse: collapse; caption-side: bottom; font-size: .8rem !important; }<br \/><\/style>\n<div id=\"table\">\n<h3>table<\/h3>\n<p>The HTML<a href=\"04-the-layout-modes\/#tables\"> table layout mode<\/a> allows authors to arrange data &#8212; text, images, links, forms, form fields, other tables, etc. &#8212; into rows and columns of cells.<\/p>\n<h4>Simple Table<\/h4>\n<table>\n<tbody>\n<tr>\n<td>table cell item<\/td>\n<td>table cell item<\/td>\n<\/tr>\n<tr>\n<td>table cell item<\/td>\n<td>table cell item<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<pre>&lt;table&gt; \r\n&lt;tr&gt; \t&lt;td&gt; table cell item &lt;\/td&gt;\r\n&lt;td&gt; table cell item &lt;\/td&gt; \r\n&lt;\/tr&gt; \r\n&lt;tr&gt; \t&lt;td&gt; table cell item &lt;\/td&gt;\r\n&lt;td&gt; table cell item &lt;\/td&gt; \r\n&lt;\/tr&gt; \r\n&lt;\/table&gt;<\/pre>\n<h4>Fully Loaded table<\/h4>\n<p>A <a href=\"03-applying-css\/#tables\"> table<\/a> can have a head, multiple table bodies and a table footer. You can span both rows and columns with the <code>rowspan=\"2\"<\/code> or <code>colspan=\"2\"<\/code> attribute. This allows for the header to expand down and the footer to expand across in the following example.<\/p>\n<table id=\"table\">\n<caption>The Caption Holds the Title of the Table<\/caption>\n<thead>\n<tr>\n<th rowspan=\"2\">Head 1<\/th>\n<th>Head 2a<\/th>\n<th rowspan=\"2\">Head 3<\/th>\n<\/tr>\n<tr>\n<th>Head 2b<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>table cell item<\/td>\n<td>table cell item<\/td>\n<td>table cell item<\/td>\n<\/tr>\n<tr>\n<td>table cell item<\/td>\n<td>table cell item<\/td>\n<td>table cell item<\/td>\n<\/tr>\n<\/tbody>\n<tbody>\n<tr>\n<td>table cell item<\/td>\n<td>table cell item<\/td>\n<td>table cell item<\/td>\n<\/tr>\n<tr>\n<td>table cell item<\/td>\n<td>table cell item<\/td>\n<td>table cell item<\/td>\n<\/tr>\n<\/tbody>\n<tfoot>\n<tr>\n<td colspan=\"3\">The footer is a place for information about the table.<\/td>\n<\/tr>\n<\/tfoot>\n<\/table>\n<pre>&lt;table id=\"table\"&gt;\r\n&lt;caption&gt;The Caption Holds the Title of the Table&lt;\/caption&gt;\r\n&lt;col&gt;&lt;col&gt;&lt;col&gt;\r\n&lt;thead&gt; \r\n&lt;tr&gt;&lt;th rowspan=\"2\"&gt;Head 1&lt;\/th&gt;&lt;th&gt;Head 2a&lt;\/th&gt;&lt;th rowspan=\"2\"&gt;Head 3&lt;\/th&gt;&lt;\/tr&gt;\r\n&lt;tr&gt;&lt;th&gt;Head 2b&lt;\/th&gt;&lt;\/tr&gt;\r\n&lt;\/thead&gt;\r\n&lt;tbody&gt;\r\n&lt;tr&gt; &lt;td&gt; table cell item &lt;\/td&gt;  &lt;td&gt; table cell item &lt;\/td&gt;  &lt;td&gt; table cell item &lt;\/td&gt;&lt;\/tr&gt;\r\n&lt;tr&gt; &lt;td&gt; table cell item &lt;\/td&gt; &lt;td&gt; table cell item &lt;\/td&gt; &lt;td&gt; table cell item &lt;\/td&gt;&lt;\/tr&gt;\r\n&lt;\/tbody&gt;\r\n&lt;tbody&gt;\r\n&lt;tr&gt; &lt;td&gt; table cell item &lt;\/td&gt;  &lt;td&gt; table cell item &lt;\/td&gt;  &lt;td&gt; table cell item &lt;\/td&gt;&lt;\/tr&gt;\r\n&lt;tr&gt; &lt;td&gt; table cell item &lt;\/td&gt; &lt;td&gt; table cell item &lt;\/td&gt; &lt;td&gt; table cell item &lt;\/td&gt;&lt;\/tr&gt;\r\n&lt;\/tbody&gt;\r\n&lt;tfoot&gt;\r\n&lt;tr&gt;&lt;td colspan=\"3\"&gt;The footer is a place for information about the table.&lt;\/td&gt;&lt;\/tr&gt;\r\n&lt;\/tfoot&gt;\r\n&lt;\/table&gt;\r\n<\/pre>\n<\/div>\n<p>&nbsp;<br \/>\n<br id=\"i-frame\" \/><\/p>\n<h2 class=\"l-head\">Iframe<\/h2>\n<p>&nbsp;<\/p>\n<p class=\"pat\">An inline frame places another HTML document in a frame. The inline frame can be the &#8220;target&#8221; frame for links defined by other elements, and it can be selected by the user agent as the focus for printing, viewing its source, and so on.<\/p>\n<p>The iframe is exhibited with attributes that are determined using the equivalent CSS in the demo <code>width: 98%; height: 300px; border: 1px solid #f000; overflow: scroll;<\/code>.<\/p>\n<pre>&lt;iframe src=\"01-html-css-primer\/\"&gt;height=300 width=200 frameborder=1 scrolling=yes &gt;You need a Frames Capable browser to view this content.&lt;\/iframe&gt;<\/pre>\n<p><iframe style=\"width: 100%; height: 300px; border: 1px solid #f000; overflow: scroll;\" src=\"01-html-css-primer\/\" name=\"iframeDemo\">You need a Frames Capable browser to view this content.<br \/>\n<\/iframe><\/p>\n<p><a href=\"01-writing-html5\/#i-frame\" target=\"iframeDemo\" rel=\"noopener noreferrer\">Writing HTML<\/a>, <a href=\"01-absolute-and-relative-addresses\/\" target=\"iframeDemo\" rel=\"noopener noreferrer\">Absolute and Relative Addresses<\/a>, <a href=\"01-tools-of-the-trade\/\" target=\"iframeDemo\" rel=\"noopener noreferrer\">Tools of the Trade<\/a><\/p>\n<h3>Target iframe from Link<\/h3>\n<p>You can target any page to appear in the iframe by naming it and using the target attribute with the name <code>target=\"iframeDemo\"<\/code> as demonstrated above. Click on the links above to load different documents.<\/p>\n<p>A destination anchor is used to position the Writing HTML document at the iframe section. That requires an anchor with the same name <code>  &lt;a id=\"i-frame\"&gt;<\/code>. See the link tag above.<\/p>\n<pre>&lt;a href=\"01-writing-html5\/#i-frame\" target=\"iframeDemo\" &gt;Writing HTML&lt;\/a&gt;\r\n&lt;a href=\"01-absolute-and-relative-addresses\/\" target=\"iframeDemo\" &gt;Absolute and Relative Addresses&lt;\/a&gt;\r\n&lt;a href=\"01-tools-of-the-trade\/\" target=\"iframeDemo\" &gt;Tools of the Trade&lt;\/a&gt;\r\n<\/pre>\n<p>&nbsp;<br \/>\n<br id=\"html5\" \/><\/p>\n<h2 class=\"l-head\">HTML5 tags<\/h2>\n<p>&nbsp;<\/p>\n<p class=\"pat\">Before HTML5, the generic markup elements, <code>&lt;div&gt;<\/code> and <code>&lt;span&gt;<\/code>, were used to mark up the page. That means the code itself had no way of determining what the content was.<\/p>\n<p>HTML5 changed that.<\/p>\n<p>HTML5 standardized a lot of best practices to create <a href=\"02-semantic-markup\/\"> semantically relevant block level tags<\/a> that help organize the document. It is now possible to tell header content from the content of an article by looking at the tags alone. The most important of the new elements are: <code>&lt;main&gt;<\/code>,<code>&lt;section&gt;<\/code>, <code>&lt;header&gt;<\/code>, <code>&lt;nav&gt;<\/code>, <code>&lt;article&gt;<\/code>, <code>&lt;aside&gt;<\/code>, <code>&lt;footer&gt;<\/code>, <code>&lt;figure&gt;<\/code>, <code>&lt;figcaption&gt;<\/code>, <code>&lt;hgroup&gt;<\/code>, <code>&lt;wbr&gt;<\/code>.<\/p>\n<h3>Document Layout<\/h3>\n<pre>&lt;main&gt;\r\n&lt;section&gt;\r\n<\/pre>\n<pre>\t&lt;header&gt;\r\n<\/pre>\n<pre>\t\t&lt;hgroup&gt;\r\n\t\t\t&lt;h1&gt;Name&lt;\/h1&gt;\r\n\t\t\t&lt;h2&gt;Name&lt;\/h2&gt;\r\n\t\t&lt;\/hgroup&gt;\r\n<\/pre>\n<pre>\t&lt;\/header&gt;\r\n<\/pre>\n<pre>\t&lt;article&gt;\r\n\t\t&lt;p&gt;content &lt;wbr&gt; content&lt;\/p&gt;\r\n<\/pre>\n<p>the <code>&lt;wbr&gt;<\/code> tag, or Word Break Opportunity tag, is an inline tag that specifies where in a text it would be ok to add a line-break.<\/p>\n<pre>\t\t&lt;aside&gt;\r\n\t\t\t&lt;p&gt;content&lt;\/p&gt;\r\n\t\t&lt;\/aside&gt;\r\n<\/pre>\n<pre>\t&lt;\/article&gt;\r\n<\/pre>\n<pre>\t&lt;footer&gt;\r\n\t&lt;\/footer&gt;\r\n<\/pre>\n<pre>&lt;\/section&gt;\r\n&lt;\/main&gt;\r\n<\/pre>\n<h3>Adding Navigational Links<\/h3>\n<p>Using an unordered list.<\/p>\n<pre>&lt;nav&gt;\r\n\t&lt;ul&gt;\r\n\t\t&lt;li&gt;&lt;a href=\"#\"&gt;link to homework&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t&lt;li&gt;&lt;a href=\"#\"&gt;link to homework&lt;\/a&gt;&lt;\/li&gt;\r\n\t\t&lt;li&gt;&lt;a href=\"#\"&gt;link to homework&lt;\/a&gt;&lt;\/li&gt;\r\n\t&lt;\/ul&gt;\r\n&lt;\/nav&gt;\r\n<\/pre>\n<h3>Adding a Picture<\/h3>\n<p>With a caption.<\/p>\n<pre>&lt;figure&gt;\r\n\t&lt;img src=\"example.jpg\" alt=\"example\" &gt;\r\n\t&lt;figcaption&gt; Caption &lt;\/figcaption&gt;\r\n&lt;\/figure&gt;\r\n<\/pre>\n<p>Copy and paste this basic <a href=\"01-html5-simple-template\/\">HTML5 template<\/a> into a blank Textwrangler file. It has most of these elements and a basic header, so you can start coding the content right away. Repetition will acclimate you to writing HTML.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contents Document Structure Elements or Tags? HTML Structure Tag Attributes Tag Hierarchy Writing HTML The DOM General Rules Elements Inline Elements Links Block Elements Iframe HTML5 Tags HTML stands for Hyper Text Markup Language. If you wish to see the &hellip; <a href=\"https:\/\/b.parsons.edu\/~dejongo\/01-writing-html5\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,8],"tags":[],"_links":{"self":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/13"}],"collection":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":170,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/13\/revisions"}],"predecessor-version":[{"id":5870,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/13\/revisions\/5870"}],"wp:attachment":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=13"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=13"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}