HTML notes

by Justin Harker

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Page title - HTML5_Overview - this will appear in the address bar</title>
    <link rel="stylesheet" href="style.css">
    <script src="javascript.js"></script>
  </head>

  <body>
    <header>
      <a href="https://www.w3schools.com/html/html5_intro.asp">
        <h1>HTML5 Overview</h1>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/2000px-HTML5_logo_and_wordmark.svg.png" width="200" />
      </a>
      <nav></nav>
    </header>
    <section>
    <h1>
    HTML, elements and attributes
    </h1>
    <p>HTML5 is used to structure documents on the web. It contains a lot of useful elements (or tags).</p>
      </p>
        <p>
          An element (tag) is the basic building block of HTML. A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: div and span - Tells nothing about its content. Examples of semantic elements: form, table, and article - Clearly defines its content. Most tags have an opening and closing tag to show the start and end of an element. Extensible Markup Language (XML) allows users to define their own tags, instead of the pre-defined tags in HTML, which
          makes it easier to read and understand. Elements can be extended through the use of <b>attributes</b>. H ref is an attribute that tells &lsaquo;a&rsaquo; where to link to.
        </p>
        In XML and most other markup languages, elements can be nested (placed inside one another) if the information can be grouped together in a meaningful way.
        <p>
          As mentioned previously, attributes are a means of adding extra information to elements in an HTML or XML document. Attributes always specify some value, so you’ll always see attributes and values together in this form:
          <b>attribute-name="attribute-value"</b>. it’s generally considered best practice to use...

CSS

/*the strong element defines important text. default style - bold */

strong {
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: underline;
  /*should not underline text unless it is also a hyperlink*/
}

/*the em element renders as emphasized text. default style - italics */

em {
  color: red;
  font-weight: bold;
  font-style: italic;
  text-transform: lowercase;
  text-decoration: none;
}