diff --git a/study-guides/html-basics.md b/study-guides/html-basics.md index e0e6ace..fd778b2 100644 --- a/study-guides/html-basics.md +++ b/study-guides/html-basics.md @@ -1,5 +1,41 @@ # HTML Basics + +## Introducing the `div` element + +The `div`, or content division element, is used to define sections or divisions of content on the webpage. When using these elements you may not see a difference from the user-view but it helps organize groups of elements within the html page. + +**_But why is it necessary to organize your html elements?_** + +There are many reasons why developers might use the `div` element in their code. Some of which may include: + +- **Creating more readable code.** Using the `div` element makes it easier for code reviewers to see defined sections to help identify bugs, or isolate features to sections on the website. +- **For styling!** By creating defined sections, it allows developers to add custom styling to each section of their website. This is perhaps one of the most common reasons developers use `div` tags. + +### Linking CSS Files + +**Line 6** `` connects the CSS style sheet to our HTML file. + +Let’s break down the syntax used to do this action. Learn more on the [MDN Web Docs about the `link` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link). + +- ``: This element specifies relationships between the current document (the HTML file) and an external resource (the CSS file). +- `href`: This attribute specifies the file path, or location, of our external resource. In this particular example, the CSS file is named `style.css` but you can name your stylesheet anything. Take note that the file path is surrounded by double quotes, `""`. +- `rel`: `rel` stands for relationship. This lets the document know how the resource will interact with the current document + +, in this case we are linking to a `stylesheet`. Learn more on the MDN Web Docs about link types. +- `type`: Similar to the `rel` attribute, the `type` attribute lets the document know the specific type of file that is being linked. + +### Linking JavaScript Files + +**Line 9** `` links the JavaScript file to our HTML file. + +Let’s break down the syntax used to do this action. + +- `