HTML elements and structure

• Headings:
  • 6 types: <h1> (main heading), <h2>, <h3> … <h6>
• Text content tags:
  • 3 types: <p> <div> <span>
    • <p>, paragraph: a block of plain text
    • <div>, div: contain any text or other HTML elements. primarily used to divide HTML documents into sections.
    • <span>, span: contain short pieces of text or other HTML. primarily used to wrap small pieces of content that are on the same line as other content and do not break text into different sections.
• Text style tags:
  • <em>, emphasized: italics
  • <strong>, strong: bold
• Line breaks:
  • <br />
  • self-closing
  • not the standard way of manipulating HTML elements
• Unordered lists:
  • <ul>
  • must wrap unordered list with <ul></ul>
  • each item in the list is <li>this is the item content</li>
• Ordered lists:
  • <ol><li></li></ol>
  • each item in the list is numbered
• Images:
  • self-closing
  • src attribute is the source path/url of the image
  • attributes provide more information about an element’s content. they live directly inside the opening of the element. composed of a name and a value.
• Videos:
  • not self-closing

  <video
    src="path/to/source"
    width="320"
    height="240"
    controls
  >
    Video not supported
  </video>
  

  • including “controls” in the attributes tells browsers to include basic controls
  • text between video tags is displayed only if the element fails to load the video
• Links:
  • use anchor elements: <a></a>
  • href attribute tells where to link to
  • can link to a url or a file path
• Linking at will:
  • links don’t just have to be text, they can be images and more as well
• New page (when clicking a link):
  • Done with the target attribute
  • target="_blank" specifies that a link should open in a new window (or tab, for modern browsers)
  • can be added directly to <a>, just like href
• Relative links:
  • aka “internal links”
  • many sites link to internal pages (navigation)
  • when making multi-page websites, web devs often store files in the root directory (main folder where all files for the site are stored)
  • as the size of the project grows, it may be necessary to organize files on the root directory into folders
  • the browser can link to files in the current folder it’s pulling from using a “relative path”, as opposed to an “absolute path” like an external hyperlink
  • a relative path shows the path to a local file (a file on the same website such as ./index.html):
    • the ./ tells the browser to look in the current folder
• Same page links:
  • We can auto-scroll to a specific section on the webpage as well
  • In order to link to a target on the same page, we must give the target element an id:
    • <p id="top">
  • An id should be descriptive to make it easier to remember its purpose
  • The target link is a string containing “#” and the target element’s id:
    • <a href="#top">top</a>
• Navigation:
  • linking elements on the same page or to other pages on the same site is called navigation.
  • HTML has a special tag <nav> for organizing these links
  • nav is a “semantic” tag because it describes what it contains (as opposed to div, which doesn’t make anything clear)
• HTML tags:
  • while some tags invoke an action or purpose (such as video or img), most tags simply describe the content they surround. this helps us modify and style our content later.
  • there are many tags, and many are created as HTML evolves.