Sara's Notes- HTML Basics

Intro to HTML

HTML (Hypertext Markup Language): is a markup language used to tell your browser how to structure web pages

      1. Anatomy of an HTML element
        • Opening <tags> name of the element enclosed in angle brackets
        • Closing </tags>: same as an opening but with a forward slash before the name of the element, signaling the end of the element
        • The content: content of the element (ex: text, image, link)
        • The element: created by the opening and closing tags
        • Nesting elements: when you have the opening and closing tags of one element within the opening and closing tags of another element
        • Block element: appears as a block, can be positioned anywhere on the page
        • Inline element: normally appears inside of a text block element
        • Tags reviewed:
          1. <p> paragraph element, text
          2. <img> embedded image file
          3. <a> “anchor” hyperlink
      2. Attributes: contain information about the element that doesn’t appear as content to the user
        • class= gives the element style specifications
        • href= gives the hyperlink a destination for the bowser to navigate to when clicked
        • title= extra information about the link, appears as a tooltip when hovered over
        • target= specifies how the link should be displayed (ex: target=”blank” displays the link in a new tab)
        • Boolean attribute: attribute such as disabled that doesn’t need a value
      3. Anatomy of a HTML document
        • <!DOCTYPE html> the doctype specifies that this is page is coded using HTML
        • Tags reviewed:
          • <html> root element, contains all of the content of the entire document
          • <head> container for the information you don’t want to be visible to the user, includes a page’s description
          • <title> title of your page, appears in the browser tab
          • <body> container for the all of the page’s content, visible to the user
        • Whitespace in HTML is ignored, any whitespace you use will be shrunk down to a single space, this allows you to format your code, increasing its readability, while not messing up the rendering of the code
      4. Special Characters in HTML
        • Special characters such as " ' & < > mean different things in the HTML markup language so it's best practice to not use them in your text content.
        • When you want to make a special character appear, you can enter it a few different ways: HTML character name, unicode, hex, CSS, or Javascript.
        • There's no need to memorize hem, here's a page I found with a List of HTML Character Entities
      2. HTML comments
        • The comment tags <!-- and --> create text that is invisible to the user, does not affect the rendering of the code, and is only visible when looking at the code.
        • <!--Comments--> allow you to write notes in the code to yourself, or to other developers, and can help keep your code easy to navigate.

Metadata

The metadata of a document is located in the <head> element, describing the data that’s in the rest of the document, a summary of the website that helps search engines find it

  1. <title> title that appears in the browser tab, metadata that represents the title of the overall document
  2. <meta> element
    • Character encoding
      • <meta charset=”utf-8”> sets the character set your document you should use to UTF-8, includes most characters from the majority of written languages
      • Give different charset values to add other languages to your document
    • Author and description
      • name= "author" specifying an author gives credit to who wrote the page
      • name= "description" giving a description that include keywords relating to your page’s content that help search engines find your website, this is useful in increasing a page’s SEO
  3. Favicon: a 16 pixel square icon in your browser tab next to the <title>
  4. Setting the primary language of a document
    • <html lang=”en-US”> sets the language of the entire document to American English
    • <span lang=”ja”>ご飯が熱い</span> sets the language in-between the span tags to Japanese

HTML Text Fundamentals

    1. Header elements
      • Header elements: <h1> <h2> <h3> <h4> <h5> <h6>
        • <h1> is the largest header element, should only be used once as a title with the other header elements below it in hierarchy
        • <h2> should be used to represent sub-subheadings
      • Structural hierarchy helps users navigate a page, your use or lack of header elements will affect your search engines will
      • Semantics are important because using the correct elements gives the content the correct meaning, function, and appearance, using semantics improve your SEO
    2. Lists
      • Unordered lists
      • <ul>
        • <li> This is a bullet list</li>
        • <li> where order is not important</li>
        • <li> so bullets or other shapes are used</li>
      • </ul>
      • Ordered lists
      • <ol>
        • <li>This is a numbered list</li>
        • <li>where order is important</li>
        • <li>so numbers are used</li>
      • </ol>
      • Nesting lists
      • <ul>
        • <li>This is a nested list</li>
          • <ol>
            • <li>where there is</li>
            • <li>an ordered list</li>
          • </ol>
        • <li>inside of an unordered list</li>
      • </ul>
    1. Emphasis and importance
      • tags to know: <strong> <em> <i> <b> <u>
        • <strong> strong emphasis
        • <em> italic emphasis
        • <i> italic, <b> bold, and <u> underline (presentational elements) recommended not to use anymore because they only affect appearance and not semantics

Hyperlinks

Hyperlinks allow us to link our webpage to another webpage by clicking on them

      1. Anatomy of a link
        • Use an <a> element and give it a href=“www.url.com” to give the link a destination target
        • Give it a title= attribute to specify information about the link or what kind of information is in the linked website
        • Block level links are used to turn an image into a link, by putting an <img> image tag inside of an <a> anchor tag
      2. URLs and paths
        • link within the same directory: <a href=“filename.html”>
        • link down into a subdirectory: <a href=“subfolder/filename.html”>
        • link up into a parent directory: <a href=“../filename.html”
        • Document fragments- allow you to link to a specific portion of a document by assigning an id attribute to the element you want to link to
          • Use <a href=“filename.html#portion_id”> to link directly to a specific ID section within a document
          • or if you're jumping to a different section within the same document use <a href=“#portion_id”>
        • Absolute versus relative URLs
          • Absolute URL: absolute location on the web, includes protocol and domain name
          • Relative URL: does not include the protocol or domain name, used when linking to a page within the same website and therefore assumes it has the same domain, looks for the file being requested on the same server
      3. Best practices for hyperlinks
        • Clear link working: use keywords in your link text, don’t include the URL as the link, keep the link text short and descriptive of what it’s linking to, and make your link stand out to users with styling
        • Use relative links wherever possible because it makes the linked page load faster by skipping the step of looking for the link’s server. The browser just needs to pull up a different file on the same server as the webpage the link is on.
        • Use clear wording when linking to a non-HTML resource such as a document video/audio, or requires a flash player to prevent confusion
        • Use the download attribute when linking to a download
      4. Email links
        • <a href=”mailto:email@gmail.com”>
        • mailto: opens an outgoing email window with the to: destination already filled in
        • cc= fills the CC line (send a public copy of the email)
        • bcc= fills the BCC line (send a private copy of the email)