Introduction to the DOM Labtitle> head> <body> body> html> ``` Open the Google Developer Tools. Click on the "Elements" tab. Here we have the DOM representation of the HTML source the browser loaded. Use the "Elements" window to see that the `body` node is, temporarily, child-less. First, let's add a title to our page: Refresh the page and view the Elements tab again. You should see that a new, self-closing child-node has appeared underneath `body`. You can use the disclosure triangle to see which children are "wrapped" or "nested within" the `body` tag. Next, we'll add a paragraph below the title. We'll also add some highlighted bits of text to the paragraph to make it stand out a little. ``` <p> We're writing HTML markup to display in our <strong>browserstrong>. We're basically telling computers what to do. <em>Neat!em> p> ``` Save the file and check out the page in the 'Elements' tab. What's happening above is that we added some *inline* elements, **and *****to our paragraph to style things a little. The*** ***tag makes any text within look important**. It's usually bold in browsers by default. The* *tag allows us to emphasize* certain text. This text is typically rendered as italic in browsers. ***Let's add a link to MDN to define HTML. We'll use the*** [***tag for this.***](broken://pages/-M61CVljjP_HoIBhrerR)[\<p> We're writing \<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTMLa> markup to display in our \<strong>browserstrong>. We're basically telling computers what to do. \<em>Neat!em>p>***Notice that HTML attributes are shown alongside their opening tag e.g. the `href` attribute.Lastly, we'll add a table below the paragraph to recap some of the stuff in this lesson:***\<table> \<thead> \<tr> \<th>Element nameth> \<th>Display valueth> tr> thead> \<tbody> \<tr> \<td>h1td> \<td>blocktd> tr> \<tr> \<td>ptd> \<td>blocktd> tr> \<tr> \<td>strongtd> \<td>inlinetd> tr> \<tr> \<td>emtd> \<td>inlinetd> tr> tbody>table>***Woah. That's a lot** of markup! If you take a look at the result though, you'll see that it's a fairly complex visual — it's a table! Our table consists of a header and a body. The header allows us to give the columns a name, and the table body contains the rows of content. Both and tags contains rows, which are represented as (table row). These rows then contain columns (or cells). In the row, cells are represented as , while cells in have their content in tags.That's a lot* of nesting.Look again at the 'Elements' tab. Expand out all the children of the `table`. This is the *DOM tree*!](broken://pages/-M61CVljjP_HoIBhrerR) ## Resources * [HTML Block Elements](https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements): * [HTML Inline Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements): ## Moving On When you're ready to leave this lab, run `learn` from the command line. If the test pass, enter `learn submit`. You'll then be prompted to move on. ## Conclusion We reviewed DOM nodes and their HTML sources, and we reviewed how the DOM is structured. We also looked at block and inline elements and their behaviors. Finally, we practiced working directly with the DOM. Clone: <https://github.com/learn-co-curriculum/js-dom-and-events-intro-to-the-dom-code-along>

I am a nested paragraph, inside the main element, inside the body!p> main> body> ``` Some nodes only have a starting tag. Those are called *self-closing* elements. These elements do not have any content nested inside of them (more technically, they are called *void* elements). They cannot, therefore, be parent nodes. An example of a self-closing tag is an image: ``` A policeman ``` In self-closing tags, the trailing `/` is optional. This is valid too: ``` ``` Also recall that every HTML element has a `display` value. This value can be many things (including `none`, which hides the elements), but the default value for most elements is either [`block`](https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements) or [`inline`](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements). ### Instructions Enough chit-chat, let's write some HTML! In your terminal, type `httpserver` to start up a temporary web server, and use the IP provided to open up `index.html` (alternatively, if you're not using the in-browser IDE, you can use `open index.html` in the folder you're working on to open up a copy of the file in your browser). Just to speed things up a bit, this code already exists in the file: ``` > Introduction to the DOM Labtitle> head> <body> body> html> ``` Open the Google Developer Tools. Click on the "Elements" tab. Here we have the DOM representation of the HTML source the browser loaded. Use the "Elements" window to see that the `body` node is, temporarily, child-less. First, let's add a title to our page: Refresh the page and view the Elements tab again. You should see that a new, self-closing child-node has appeared underneath `body`. You can use the disclosure triangle to see which children are "wrapped" or "nested within" the `body` tag. Next, we'll add a paragraph below the title. We'll also add some highlighted bits of text to the paragraph to make it stand out a little. ``` <p> We're writing HTML markup to display in our <strong>browserstrong>. We're basically telling computers what to do. <em>Neat!em> p> ``` Save the file and check out the page in the 'Elements' tab. What's happening above is that we added some *inline* elements, **and *****to our paragraph to style things a little. The*** ***tag makes any text within look important**. It's usually bold in browsers by default. The* *tag allows us to emphasize* certain text. This text is typically rendered as italic in browsers. ***Let's add a link to MDN to define HTML. We'll use the*** [***tag for this.***](broken://pages/-M61CVljjP_HoIBhrerR)[\<p> We're writing \<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTMLa> markup to display in our \<strong>browserstrong>. We're basically telling computers what to do. \<em>Neat!em>p>***Notice that HTML attributes are shown alongside their opening tag e.g. the `href` attribute.Lastly, we'll add a table below the paragraph to recap some of the stuff in this lesson:***\<table> \<thead> \<tr> \<th>Element nameth> \<th>Display valueth> tr> thead> \<tbody> \<tr> \<td>h1td> \<td>blocktd> tr> \<tr> \<td>ptd> \<td>blocktd> tr> \<tr> \<td>strongtd> \<td>inlinetd> tr> \<tr> \<td>emtd> \<td>inlinetd> tr> tbody>table>***Woah. That's a lot** of markup! If you take a look at the result though, you'll see that it's a fairly complex visual — it's a table! Our table consists of a header and a body. The header allows us to give the columns a name, and the table body contains the rows of content. Both and tags contains rows, which are represented as (table row). These rows then contain columns (or cells). In the row, cells are represented as , while cells in have their content in tags.That's a lot* of nesting.Look again at the 'Elements' tab. Expand out all the children of the `table`. This is the *DOM tree*!](broken://pages/-M61CVljjP_HoIBhrerR) ## Resources * [HTML Block Elements](https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements): * [HTML Inline Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements): ## Moving On When you're ready to leave this lab, run `learn` from the command line. If the test pass, enter `learn submit`. You'll then be prompted to move on. ## Conclusion We reviewed DOM nodes and their HTML sources, and we reviewed how the DOM is structured. We also looked at block and inline elements and their behaviors. Finally, we practiced working directly with the DOM. Clone: <https://github.com/learn-co-curriculum/js-dom-and-events-intro-to-the-dom-code-along>