Austin's Three New Tags

<div>Div Tag</div>

The <div> tag defines a division (or section) of an HTML document. It is used as a container for HTML elements, which are then styled using CSS or manipulated with Javascript. The <div> tag is styled using its class name, which can be anything.

I first discovered the <div> tag when working on the previous assignment, and used it to align an image and a table horizontally. But this is not its only use! The <div> tag can be used to apply different CSS styles to other parts of an HTML document without having to use inline CSS.

In this example, I'm using divs to set a different background color and text color. I'm also using two different margin sizes for the text and background!

The CSS and HTML I'm using to produce this output is shown below:

The CSS
.exampleDiv {
  background-color: green;
  color: white;
  margin: 0 -8px;
}
  .exampleDiv2 {
  margin: 0 64px;
}

The HTML
<div class="exampleDiv">
  <div class="exampleDiv2">
    <p>
      In this example, I'm using divs to set a different background color and text color. I'm also using two different margin sizes for the text and background!
      <br/>
      <br/>The CSS and HTML I'm using to produce this output is shown below:
    </p>
    <div class="exampleDiv2">
      <p>
        The HTML that you're reading right now goes right here!
      </p>
    </div>
  </div>
</div>

I found this tag at https://www.w3schools.com/tags/tag_div.ASP

<caption>Caption Tag</caption>

This is a caption. <caption> tags go within <table> tags.
Text Text 2

Captions automatically resize to fit the width of the table, and reside above its contents, outside of the table's border.
Text 3 Text 4 Text 5

The CSS and HTML used in the two tables above is shown below:

The CSS
td {
  width: 100px;
}

The HTML
<table border="1">
  <caption>This is a caption. <caption> tags go within <table> tags.</caption>
  <tr>
    <td>Text</td>
    <td>Text 2</td>
  </tr>
</table>
<br/>
<table border="5">
  <caption>Captions automatically resize to fit the width of the table, and reside above its contents, outside of the table's border.</caption>
  <tr>
    <td>Text 3</td>
    <td>Text 4</td>
    <td>Text 5</td>
  </tr>
</table>

I found this tag at https://www.w3schools.com/tags/tag_caption.asp

<meta>Meta Tag</meta>

The <meta> tag is used in the <head> of the document to store data about the webpage (metadata). The book discussed meta tags and how they are used to help a search engine's web bots quickly identify a webpage's purpose.

...Atleast, that is the intention. However, in researching <meta> tags, I found that major search engines, such as Google, actually ignore the keywords in <meta> tags nowadays, because they have been abused by people using irrelevant keywords and descriptions.

Meta tags don't display anything visually on the webpage and have no significance to a human viewer. The meta tag used in this HTML document is shown below:

The HTML
<meta name="description" content="Information and examples of three HTML tags and their CSS counterparts."/>
<meta name="keywords" content="HTML, CSS, Tags, CIS145"/>

I found this tag at https://www.w3schools.com/tags/tag_meta.asp