- 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.
- 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.
1. p
- These are paragraphs
- These are paragraphs
### specific structure
@ -68,31 +68,31 @@ Of course a website is more than just headers and paragraphs, though. It has ma
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
- 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
- the bulk of your site goes in here
- the bulk of your site goes in here
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
- this will hold navigation links
- this will hold navigation links
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
- this is for tangential material. Sidebars, inserts, etc.
- this is for tangential material. Sidebars, inserts, etc.
### generic structure
@ -100,11 +100,11 @@ Sometimes we need a tag that doesn't fit into any of the previously defined cate
1. div
- used to block out chunks of content
- used to block out chunks of content
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
@ -112,16 +112,16 @@ Some elements are not structural, but actually make the content display differen
1. ul/ol/li
- creates a list, either unordered (ul) or ordered (ol)
- inside each `ul` or `ol` is a set of `li` list item elements.
- creates a list, either unordered (ul) or ordered (ol)
- inside each `ul` or `ol` is a set of `li` list item elements.
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
- this will emphasize a chunk of text, usually making it bold.
- this will emphasize a chunk of text, usually making it bold.
### decorative elements
@ -129,11 +129,11 @@ Some elements do not contain content and instead are purely for decoration. Ele
1. hr
- horizontal rule, `<hr/>` creates a divider
- horizontal rule, `<hr/>` creates a divider
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
@ -143,25 +143,25 @@ We can add more meaning to a tag by adding "attributes" to it. The looks like `
1. a
- 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>`
- note that the actual URL (location) of the page is hidden, and that only the content is shown.
- 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>`
- note that the actual URL (location) of the page is hidden, and that only the content is shown.
1. img
- self closing, but contains a `src` attribute with is the URL to an image
