HTML/CSS Review

Elements vs Tags vs Attributes

Elements

  • Generally contains content
  • Usually with opening and closing tags

Tags

  • Used to mark the beginning and end of element
  • <tagname> </tagname>
  • Some don't have closing tags. Ex: <img>

Attribute

  • Properties of an element Ex: class, id, href
  • Some are unique to specific elements
<div class="foo">
  <p>Paragraph with no class</p>
  <p class="red-text">Paragraph red text.</p>
  <a href="freecodecamp.org">Learn to code</a>
  <img src="freecodecamp-slc.png" />
</div>

It's About Structure

  • HTML Tells the browser what content to show
    • Visible/invisible
  • Specifies the hierarchical relationship between elements

Semantics

  • Elements should align with meaning of content
    • Ex: <p> instead of <div>
  • <header>, <nav>, <main>, <section>, <footer>, <ul> etc.

Boilerplate

  • <!DOCTYPE html>
    • Tells browser to parse as HTML5
  • <html>
    • root element. Encompasses whole documents
  • <head>
    • contains metadata. SEO, Social media sharing, title, etc
  • <body>
    • describes main displayable elements of page

Flexbox Review

Most Important Thing

Made with Slides.com