\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) sets the title of the page (what gets displayed in the browser tab) - [\`<script />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) embeds executable code into the page. We will cover it more when we cover JavaScript. - Most of the time, we want our JavaScript to come from an external file, which we specify using the \`src=\` attribute - Note: for reasons that we will cover later, \`<script />\` tags are often placed at the end of the \`<body />\` element - [\`<style />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) contains CSS code, which tells the browser how to render the document - [\`<link />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) links to external resources (typically CSS stylesheets) - Most of the time, we will use this to reference CSS stylesheets by setting \`href=\` to the stylesheet URL and \`rel="stylesheet"\` ` 31:T50f,md` ## Common Content Elements - [\`<a />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for creating hyperlinks - Set the \`href=\` attribute to the URL of the page you are linking to - [\`<img />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) for creating images - The \`src=\` attribute specifies the URL of the image to point to - Remember to set the \`alt=\` attribute to a text-based description of the image contents - We can wrap these in [\`<picture />\` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) for added flexibility but we won't do that in this class for the most part. - [Heading elements (\`<h1 />\` -- \`<h6 />\`)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) for creating headers - [\`<hr />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr) creates a horizontal rule (horizontal break between content) - [\`<p />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) specifies a paraagraph of text I'm going to avoid other common multimedia elements (like \`<source />\`, \`<video />\`, \`<picture />\`, \`<audio />\`, \`<track />\`, and \`<embed />\`). Not because they aren't comonly used but because they are not the focus of this class. `32:T81d,md` ### Form Elements - [\`<form />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) marks the bounds of a form for text entry - [\`<input />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) can create a wide variety of input types - Specify the type of input with the \`type=\` attribute. Valid values include \`"radio"\`, \`"text"\`, \`"checkbox"\`, \`"password"\`, \`"file"\`, and \`"date"\`. - [\`<textarea />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) creates a multi-line text input widget (whereas an \`<input type="text" />\` input widget is typically single-line and inline) - [\`<label />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/labels) creates a label for an input element - Specify which element this label is for by setting the \`for=\` attribute to be the same as the \`id=\` attribute of the \`<input />\` element the label is for. - [\`<select />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) creates a dropdown selection widget - [\`<datalist />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) is like \`<select />\` except it enables free text entry - the options are "suggestions" - [\`<optgroup />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) creates a "category" of options for dropdown selection widgets (and should be a direct child of \`<select />\`) - [\`<option />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) creates an option for dropdown selection widgets (and should be a direct child of either \`<select />\`, \`<datalist />\`, or \`<optgroup />\`) - [\`<button />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) creates a clickable button. Unlike \`<a />\` elements, the button is expected to perform an action on the page (rather than just navigating to a new page) - On forms, you might set the \`type=\` attribute to \`"submit"\` to specify that the button submits the form (or to \`"reset"\` to say that it should reset the form) `33:T424,md` ## Global Attributes Global attributes can be used on any kind of element. [Go here for a full list of golbal attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes). The most important attributes to use are: - [\`class=\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) - setting this attribute makes it easier to find a subset of HTML elements from JavaScript or CSS - [\`id=\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) - setting this attribute makes it easier to find a specific element from JavaScript or CSS Some other common attributes include: - [\`style=\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style) for setting the CSS style of a particular element. We will typically avoid doing this. - [\`title=\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) for setting what the user sees when they hover their mouse over an element. Note: this is *not* a replacement for the \`[alt=]\` attribute for images `34:[] 2e:{"id":"0d45b1b7862ee2de","slug":"common-html-elements","title":"Common HTML Elements and Attributes","thumbnail":"7513817641ba53662f375ec06dd79c5ef04aa5ae859316f66335dea774fd0e38","access_level":"public","create_time":"$D2020-12-28T19:20:02.654Z","update_time":"$D2023-10-02T17:43:25.115Z","view_time":null,"first_public_time":"$D2020-12-28T19:22:40.031Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":162,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"Common HTML Elements and Attributes","cells":[{"id":0,"value":"md`# Common HTML Elements and Attributes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":155,"value":"toc();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":152,"value":"md`\nNow that you know [the basics of HTML](https://observablehq.com/@soney/si-579-the-basics-of-html), let's cover most of the types of elements you are likely to use (both in this class and for most practical purposes). Note that this list is *far* from exhaustive. It is instead meant to be an overview of the most common elements for this class. [Go here for a full list, with short descriptions](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).\n\n**How to use this page:** HTML is not the focus of this class. You need to know enough HTML to get started but you should not focus your energy on memorizing HTML elements and attributes. Instead, *we're going to learn most of these through practice* in the context of writing interactive pages once we start covering JavaScript. Read this page to get an overview of elements that you might want to use but don't worry if you don't fully understand or remember any particular element.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"md`## Structural Elements\n\n- [\\`<html />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) is the root element of your page\n - You should set the attribute \\`lang=\"en\"\\` to specify that this is an English-language page\n- [\\`<head />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) contains \"metadata\" about the page\n- [\\`<body />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body) contains the document content that will be displayed\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"md`\n## Content Elements (typically inside of \\`<body />\\`)\n\n- [\\`<header />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) typically contains a document header (like a nav bar or page title)\n - Note that ths is entirely different than \\`<head/>\\`\n- [\\`<footer />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) typically contains content that goes at the end of a page (like copyright or detailed page information)\n- [\\`<main />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) typically contains the main content of the page\n- [\\`<nav />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) typically provides navigation links to other pages. It normally goes inside of \\`<header />\\`.\n- [\\`<section />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) represents a section of content.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"md`\n### List Elements\n\n- [\\`<ol />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) creates an ordered list (1, 2, 3, ...)\n- [\\`<ul />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) creates and unordered list (\"unordered\" is misleading; it has an order but the default display uses bullet points)\n- [\\`<li />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) creates a list item (it should be a direct descendant of a \\`<ul />\\` or \\`<ol />\\` element\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"md`\n### Table Elements\n\n- [\\`<table />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) creates a table\n- [\\`<thead />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) and [\\`<tfoot />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot) define the header and footer rows of the table, respectively.\n- [\\`<tbody />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) contains the main content of the table\n- [\\`<tr />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) defines a table row (whether in the header, footer, or body of the table)\n- [\\`<td />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) defines a table cell\n- [\\`<th />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) is like \\`<td />\\` but is used for header cells\n- [\\`<caption />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) specifies a caption for the table\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"md`\n## Elements to try to avoid when possible\n\nIt's often hard to avoid using these elements entirely but you should look for alternatives before using them.\n\n- [\\`<div />\\` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div): I haven't done the analysis but I would guess that this is actually the most commonly used element type. It is normally displayed as a block. The only problem is that it has no semantic meaning.\n- [\\`<span />\\` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) is like \\`<div />\\` but is displayed \"inline\" rather than as a \"block\". Also very commonly used.\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"md`\n## Elements to avoid completely (and alternatives)\n\nDo not use [\\`<b />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b) or [\\`<i />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i).\n\nInstead (suggestions from MDN):\n- Do use [\\`<em>\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em) to indicate stress emphasis.\n- Use [\\`<strong>\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong) to indicate importance, seriousness, or urgency.\n- Use [\\`<mark>\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark) to indicate relevance.\n- Use [\\`<cite>\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite) to mark up the name of a work, such as a book, play, or song.\n- Use [\\`<dfn>\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn) to mark up the defining instance of a term.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2f:"$2e:body" </article></body></html>

2a:null 2b:["$","title",null,{"children":"Common HTML Elements and Attributes | Steve Oney | Observable"}] 30:T417,md` ## Metadata (typically inside of \`\`) - [\`\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) sets the title of the page (what gets displayed in the browser tab) - [\`<script />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) embeds executable code into the page. We will cover it more when we cover JavaScript. - Most of the time, we want our JavaScript to come from an external file, which we specify using the \`src=\` attribute - Note: for reasons that we will cover later, \`<script />\` tags are often placed at the end of the \`<body />\` element - [\`<style />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) contains CSS code, which tells the browser how to render the document - [\`<link />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) links to external resources (typically CSS stylesheets) - Most of the time, we will use this to reference CSS stylesheets by setting \`href=\` to the stylesheet URL and \`rel="stylesheet"\` ` 31:T50f,md` ## Common Content Elements - [\`<a />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for creating hyperlinks - Set the \`href=\` attribute to the URL of the page you are linking to - [\`<img />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) for creating images - The \`src=\` attribute specifies the URL of the image to point to - Remember to set the \`alt=\` attribute to a text-based description of the image contents - We can wrap these in [\`<picture />\` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) for added flexibility but we won't do that in this class for the most part. - [Heading elements (\`<h1 />\` -- \`<h6 />\`)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) for creating headers - [\`<hr />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr) creates a horizontal rule (horizontal break between content) - [\`<p />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) specifies a paraagraph of text I'm going to avoid other common multimedia elements (like \`<source />\`, \`<video />\`, \`<picture />\`, \`<audio />\`, \`<track />\`, and \`<embed />\`). Not because they aren't comonly used but because they are not the focus of this class. `32:T81d,md` ### Form Elements - [\`<form />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) marks the bounds of a form for text entry - [\`<input />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) can create a wide variety of input types - Specify the type of input with the \`type=\` attribute. Valid values include \`"radio"\`, \`"text"\`, \`"checkbox"\`, \`"password"\`, \`"file"\`, and \`"date"\`. - [\`<textarea />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) creates a multi-line text input widget (whereas an \`<input type="text" />\` input widget is typically single-line and inline) - [\`<label />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/labels) creates a label for an input element - Specify which element this label is for by setting the \`for=\` attribute to be the same as the \`id=\` attribute of the \`<input />\` element the label is for. - [\`<select />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) creates a dropdown selection widget - [\`<datalist />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) is like \`<select />\` except it enables free text entry - the options are "suggestions" - [\`<optgroup />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) creates a "category" of options for dropdown selection widgets (and should be a direct child of \`<select />\`) - [\`<option />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) creates an option for dropdown selection widgets (and should be a direct child of either \`<select />\`, \`<datalist />\`, or \`<optgroup />\`) - [\`<button />\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) creates a clickable button. Unlike \`<a />\` elements, the button is expected to perform an action on the page (rather than just navigating to a new page) - On forms, you might set the \`type=\` attribute to \`"submit"\` to specify that the button submits the form (or to \`"reset"\` to say that it should reset the form) `33:T424,md` ## Global Attributes Global attributes can be used on any kind of element. [Go here for a full list of golbal attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes). The most important attributes to use are: - [\`class=\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) - setting this attribute makes it easier to find a subset of HTML elements from JavaScript or CSS - [\`id=\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) - setting this attribute makes it easier to find a specific element from JavaScript or CSS Some other common attributes include: - [\`style=\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style) for setting the CSS style of a particular element. We will typically avoid doing this. - [\`title=\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) for setting what the user sees when they hover their mouse over an element. Note: this is *not* a replacement for the \`[alt=]\` attribute for images `34:[] 2e:{"id":"0d45b1b7862ee2de","slug":"common-html-elements","title":"Common HTML Elements and Attributes","thumbnail":"7513817641ba53662f375ec06dd79c5ef04aa5ae859316f66335dea774fd0e38","access_level":"public","create_time":"$D2020-12-28T19:20:02.654Z","update_time":"$D2023-10-02T17:43:25.115Z","view_time":null,"first_public_time":"$D2020-12-28T19:22:40.031Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":162,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"Common HTML Elements and Attributes","cells":[{"id":0,"value":"md`# Common HTML Elements and Attributes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":155,"value":"toc();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":152,"value":"md`\nNow that you know [the basics of HTML](https://observablehq.com/@soney/si-579-the-basics-of-html), let's cover most of the types of elements you are likely to use (both in this class and for most practical purposes). Note that this list is *far* from exhaustive. It is instead meant to be an overview of the most common elements for this class. [Go here for a full list, with short descriptions](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).\n\n**How to use this page:** HTML is not the focus of this class. You need to know enough HTML to get started but you should not focus your energy on memorizing HTML elements and attributes. Instead, *we're going to learn most of these through practice* in the context of writing interactive pages once we start covering JavaScript. Read this page to get an overview of elements that you might want to use but don't worry if you don't fully understand or remember any particular element.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"md`## Structural Elements\n\n- [\\`<html />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) is the root element of your page\n - You should set the attribute \\`lang=\"en\"\\` to specify that this is an English-language page\n- [\\`<head />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) contains \"metadata\" about the page\n- [\\`<body />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body) contains the document content that will be displayed\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"md`\n## Content Elements (typically inside of \\`<body />\\`)\n\n- [\\`<header />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) typically contains a document header (like a nav bar or page title)\n - Note that ths is entirely different than \\`<head/>\\`\n- [\\`<footer />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer) typically contains content that goes at the end of a page (like copyright or detailed page information)\n- [\\`<main />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) typically contains the main content of the page\n- [\\`<nav />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav) typically provides navigation links to other pages. It normally goes inside of \\`<header />\\`.\n- [\\`<section />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) represents a section of content.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"md`\n### List Elements\n\n- [\\`<ol />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) creates an ordered list (1, 2, 3, ...)\n- [\\`<ul />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) creates and unordered list (\"unordered\" is misleading; it has an order but the default display uses bullet points)\n- [\\`<li />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) creates a list item (it should be a direct descendant of a \\`<ul />\\` or \\`<ol />\\` element\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"md`\n### Table Elements\n\n- [\\`<table />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) creates a table\n- [\\`<thead />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) and [\\`<tfoot />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot) define the header and footer rows of the table, respectively.\n- [\\`<tbody />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody) contains the main content of the table\n- [\\`<tr />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr) defines a table row (whether in the header, footer, or body of the table)\n- [\\`<td />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) defines a table cell\n- [\\`<th />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) is like \\`<td />\\` but is used for header cells\n- [\\`<caption />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) specifies a caption for the table\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"md`\n## Elements to try to avoid when possible\n\nIt's often hard to avoid using these elements entirely but you should look for alternatives before using them.\n\n- [\\`<div />\\` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div): I haven't done the analysis but I would guess that this is actually the most commonly used element type. It is normally displayed as a block. The only problem is that it has no semantic meaning.\n- [\\`<span />\\` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) is like \\`<div />\\` but is displayed \"inline\" rather than as a \"block\". Also very commonly used.\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"md`\n## Elements to avoid completely (and alternatives)\n\nDo not use [\\`<b />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b) or [\\`<i />\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i).\n\nInstead (suggestions from MDN):\n- Do use [\\`<em>\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em) to indicate stress emphasis.\n- Use [\\`<strong>\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong) to indicate importance, seriousness, or urgency.\n- Use [\\`<mark>\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark) to indicate relevance.\n- Use [\\`<cite>\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite) to mark up the name of a work, such as a book, play, or song.\n- Use [\\`<dfn>\\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn) to mark up the defining instance of a term.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2f:"$2e:body" </article></body></html>