mahuntington
/
css-notes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '6e3f4dacc2'
${ noResults }
css-notes/1. HTML/HTML.md

5.7 KiB
Raw Blame History

HTML - Tags, Content, Attributes, & Semantic HTML

Lesson Objectives

  1. Describe what HTML is
  2. Describe what a tag is
  3. Describe what the content of a tag is
  4. List some common tags
  5. Describe what the attributes of a tag do
  6. List some common tags that have attributes
  7. Describe what Semantic HTML means

Describe what HTML is

HTML stands for Hyper Text Markup Language. It's a way to give structural meaning to text. It allows computers and programmers to easily determine what the purpose of a chunk of text does.

Describe what a tag is

HTML creates this meaning by surrounding text with tags. Tags look like this: <example-tag></example-tag>. Note that there is an opening and a closing part of the tag. We call these "opening" and "closing" tags.

Describe what the content of a tag is

Between the opening and closing tags, we insert the text or "content" of the tag. The final result would look like this: <example-tag>Content Goes in here</example-tag>. Tags can also be placed within other tags:

<outer-tag>
  <inner-tag></inner-tag>
</outer-tag>

Note that when placing a tag inside another tag, you should indent the new tag to show it is a child of its parent tag.

List some common tags

In general, we don't create our own tags. Instead there are a set of predefined tags with functionality already associated with them.

Initializing a page

Every site should start with:

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>
  1. The DOCTYPE tag is special and doesn't get closed. It also is the only tag that can have non-alpha-numeric (letters/numbers) values in it.
  2. html: shows where the html begins
  3. head: contains content specifically for the browser, not the user, to see.
  4. body: contains all the content that the user will see when viewing the html in a web browser like Chrome, Firefox, etc.

basic tags

  1. h1, h2, h3, h4, h5, h6
  • 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

specific structure

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
  • 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).
  1. main
  • 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
  1. nav
  • 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
  1. aside
  • this is for tangential material. Sidebars, inserts, etc.

generic structure

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
  • used to block out chunks of content
  1. span
  • use to block out small bits of content (e.g. words, sentences, etc)

elements

Some elements are not structural, but actually make the content display differently

  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.
  1. em
  • this will emphasize a chunk of text, usually making it italics
  1. strong
  • this will emphasize a chunk of text, usually making it bold.

decorative elements

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
  • horizontal rule, <hr/> creates a divider
  1. br
  • break, <br/>, starts a new line in a chunk of text.

Describe what the attributes of a tag do

We can add more meaning to a tag by adding "attributes" to it. The looks like <some-tag my-attribute="attribute-value"><some-tag> or <self-closing-tag attribute="value"/>. Again, in general, we don't create our own attributes, but instead choose from predefined ones which have specific functionality depending on what tag they're attached to.

List some common tags that have attributes

  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.
  1. img
  • self closing, but contains a src attribute with is the URL to an image
  • examle: <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
  1. video
  • like img but goes to a video
  • example: <video src="http://www.w3schools.com/html/mov_bbb.mp4"/>
  • also has attributes like autoplay, controls, loop
  1. audio
  • like img and video
  • example: <audio controls="true" src="http://www.w3schools.com/tags/horse.mp3"/>

Describe what Semantic HTML means

The most important thing to remember is that these tags and attributes are supposed to give structure and meaning your content, not appearance. Sometimes you might want the title of the page to be smaller than the titles of the sub sections. You should still use the tag that conveys the proper meaning, even if it doesn't look right.