- These are headers. Imagine you're giving a lecture and you want to have an outline. These will help a computer/programmer figure out what are the title, sub sections, sub-sub sections, etc. of your outline.
- These are headers. Imagine you're giving a lecture and you want to have an outline. These will help a computer/programmer figure out what are the title, sub sections, sub-sub sections, etc. of your outline.
- The lower the number, the more important the header is. h1 tags are generally the title of the page. h2 denote a section, and so on.
- The lower the number, the more important the header is. h1 tags are generally the title of the page. h2 denote a section, and so on.
1. p
1. p
- These are paragraphs
- These are paragraphs
### specific structure
### specific structure
@ -64,18 +67,31 @@ Every site should start with:
Of course a website is more than just headers and paragraphs, though. It has many sections to it that a normal outline doesn't. Here are some of the more common tags we use to give structure to the page
Of course a website is more than just headers and paragraphs, though. It has many sections to it that a normal outline doesn't. Here are some of the more common tags we use to give structure to the page
1. header
1. header
- could contain elements like a log and a nav bar. Perhaps the title of the page too?
- could contain elements like a log and a nav bar. Perhaps the title of the page too?
1. footer
1. footer
- could contain disclaimers, copyrights, and less important links (privacy, terms and conditions, legal, etc).
- could contain disclaimers, copyrights, and less important links (privacy, terms and conditions, legal, etc).
1. main
1. main
- the bulk of your site goes in here
- the bulk of your site goes in here
1. section
1. section
- within some of the tags listed above, there can be different sections. Use this tag to block each section off
- within some of the tags listed above, there can be different sections. Use this tag to block each section off
1. nav
1. nav
- this will hold navigation links
- this will hold navigation links
1. article
1. article
- if you're writing a blog, or have a page with many self contained sections, this might work well
- if you're writing a blog, or have a page with many self contained sections, this might work well
1. aside
1. aside
- this is for tangential material. Sidebars, inserts, etc.
- this is for tangential material. Sidebars, inserts, etc.
### generic structure
### generic structure
@ -83,8 +99,11 @@ Of course a website is more than just headers and paragraphs, though. It has ma
Sometimes we need a tag that doesn't fit into any of the previously defined categories. If this is the case, we can use one of two generic tags
Sometimes we need a tag that doesn't fit into any of the previously defined categories. If this is the case, we can use one of two generic tags
1. div
1. div
- used to block out chunks of content
- used to block out chunks of content
1. span
1. span
- use to block out small bits of content (e.g. words, sentences, etc)
- use to block out small bits of content (e.g. words, sentences, etc)
### elements
### elements
@ -92,11 +111,16 @@ Sometimes we need a tag that doesn't fit into any of the previously defined cate
Some elements are not structural, but actually make the content display differently
Some elements are not structural, but actually make the content display differently
1. ul/ol/li
1. ul/ol/li
- creates a list, either unordered (ul) or ordered (ol)
- creates a list, either unordered (ul) or ordered (ol)
- inside each `ul` or `ol` is a set of `li` list item elements.
- inside each `ul` or `ol` is a set of `li` list item elements.
1. em
1. em
- this will emphasize a chunk of text, usually making it italics
- this will emphasize a chunk of text, usually making it italics
1. strong
1. strong
- this will emphasize a chunk of text, usually making it bold.
- this will emphasize a chunk of text, usually making it bold.
### decorative elements
### decorative elements
@ -104,8 +128,11 @@ Some elements are not structural, but actually make the content display differen
Some elements do not contain content and instead are purely for decoration. Elements that do not contain content are written like so `<no-content-tag/>`. Note there is no closing tag and the slash comes before the final `>`
Some elements do not contain content and instead are purely for decoration. Elements that do not contain content are written like so `<no-content-tag/>`. Note there is no closing tag and the slash comes before the final `>`
1. hr
1. hr
- horizontal rule, `<hr/>` creates a divider
- horizontal rule, `<hr/>` creates a divider
1. br
1. br
- break, `<br/>`, starts a new line in a chunk of text.
- break, `<br/>`, starts a new line in a chunk of text.
## Describe what the attributes of a tag do
## Describe what the attributes of a tag do
@ -115,17 +142,24 @@ We can add more meaning to a tag by adding "attributes" to it. The looks like `
## List some common tags that have attributes
## List some common tags that have attributes
1. a
1. a
- Anchor tag. Creates a clickable link to another page. Uses the `href` attribute to do so
- Anchor tag. Creates a clickable link to another page. Uses the `href` attribute to do so
- example: `<a href="http://www.google.com">This link will go to Google</a>`
- example: `<a href="http://www.google.com">This link will go to Google</a>`
- note that the actual URL (location) of the page is hidden, and that only the content is shown.
- note that the actual URL (location) of the page is hidden, and that only the content is shown.
1. img
1. img
- self closing, but contains a `src` attribute with is the URL to an image
- self closing, but contains a `src` attribute with is the URL to an image
