notes, (needs to be manually updated from time to time)

-Key:

• Red: Important Concepts to understand 

• Pink: Important technical keywords 

• Blue: Sections of notes

• Green: Examples and explanations

HTML 5

Elements and Syntax

Heading

• Syntax

• <h#>Content</h#>

• The lower header has the highest value (h1 > h2)

• There can be multiple headers of the same value

Important: The implication of 

Paragraph

• Syntax

• <p>Content</p>

Commenting

• Syntax

• <!-- Content →

Main

• Syntax

• <main>
    Content
  </main>

• Propose: Represents the main body of an HTML document, helps make it easier to read and helps with SEO (Search Engine Optimization)

Important: All content within main (Headings, Paragraphs, Comments, etc) should be nested (indented two spaces further to the right of the element they are nested in)

Ex: <main>

      __Content

      </main>

Images

• Syntax

• <img src=”(URL)” alt=”(Error Message)>

• Images utilize a self closing tag (A tag without a closing tag)

• The src (source) attribute specifies the images URL, aka where it is located

• The alt attribute displays text that improves user understanding and accessibility if the image fails to load

Anchor

• Syntax

• <a href=”(URL)” target=”(Target)”>(Text)</a>

• An anchor element adds a link to another page

• The text is a message that will embody the link on the page of a website and will be placed between the opening and closing tags on an anchor element

• href (hypertext reference) is a hyperlink to another web address

• target specifies where to open the contents of the hyperlink (_blank specifies the link should open in a new tab or window)

Important: You can utilize anchor within other elements 

Ex: <p>See more <a href=”(URL)”>photos</a> in our gallery.<p>

Explanation: In the above example, the hyperlink is embedded into the word      

“photos” within the paragraph.

Ex: <a href=”example-link”>
        <img src=”image-link.jpg” alt=”A photo.”>

                              </a>

Explanation: In the above example, the image is wrapped in the anchor element, 

making it so the image embodies the hyperlink

Section

• Syntax

• <section>
    Content
  </section>

• The section element is used to define the sections in a document, such as chapters, headers, footers, or any other sections of the document (helps with SEO and accessibility)

Ordered List/Unordered List

• Syntax

• <ul>
    <li>list contents</li>
  </ul>

• <ol>
    <li>list contents</li>
  </ol>

• ul specifies an unordered list while ol specifies an ordered list, li specifies elements within the list

Figure/Fig Caption

• Syntax

• <figure>
    <img src=”(URL)” alt=”(Text)”>
    <figcaption>Text</figcaption>
  </figure>

• The figure element is used to specify self contained content

Emphasis/Strong

• Syntax

• <em>Text</em>

• <strong>Text</strong>

• The em puts emphasis on specific words or phrases with italics, strong specifies text that is bold font

Form and the types of input

• Syntax

• <form action=”/submit-url”></form>

• The form element is a container for different types of input elements

• form goes hand in hand with input

• Syntax

• <input type=”(type)” name=”(name)” placeholder=”(PlaceHolderText) required>

• Attributes of input:

• type is what specifies the kind of input

• Different input types:

• button

• checkbox

• color 

• date 

• datime-local 

• email

• file 

• hidden 

• image 

• month 

• number 

• password 

• radio 

• range 

• reset 

• search 

• submit 

• tel 

• text 

• time 

• url 

• week 

• checked makes it so an input option is selected by default

• name gives the input a name

• Adding the same name to two different input types makes it so only one can be selected at a time

• placeholder puts placeholder text until text is put in the textbox

• id assigns a specific identification value to specific HTML elements

• value assigns a value to an input

• The default value is (name)=on, thus it is good practice to make the value the same as the id

• required prevents the user from submitting anything without entering the required field 

• The label element is used to associate the text of an input with the input itself

• Ex:
        <label><input type=”radio”> Indoor</label>

• Explanation: The above example makes it so clicking on the word “Indoor” also selects the radio button as if the user clicked on the button as well

• Wrapping just the text in a label using the for attribute is an alternative method

• Ex: 

• <input id=”(id)” type=”(type)”> <label for=”(id)”> text</label>

• There is also the button element

• Syntax

• <button>Text</button>

• The button element gives the user a button to submit their input

• button can use attributes like type as well

• The fieldset element is used to group related inputs and labels together in a web form

• Syntax

• <fieldset>
    <label><input type=”(type)”>(text)</label>
  </fieldset>

• The legend element acts as a caption for the content in the fieldset element

• Syntax

• <fieldset>
    <legend>text</legend>
    <label><input type=”(type)”>(text)</label>
  </fieldset>

Footer

• Syntax

• <footer>
    Contents
  </footer>

• The footer element is used to define the footer of a document or section, typically contains info about the author, copyright data, links to terms of use, contact info, etc

Head

• Syntax

• <head>
    Contents
  </head>

• The head element contains metadata about the page (title, scripts, stylesheets)

• You can set browser behavior by adding self-closing meta elements in the head

• Ex:
      <head>
        <meta attribute=”value”>
        <title>title</title>
      </head>

• Explanation: The above example is an instance of describing metadata within an HTML document

• Meta attributes in HTML:

• charset

• name 

• content 

HTML

• Syntax

• <html>
    <head>
    </head>
    <body>
    </body>
    <footer>
    </footer>
  </html>

• The html element is the root element of an HTML page which the entire pages contents will be wrapped in

IMPORTANT: All DOCUMENTS SHOULD BEGIN WITH <!DOCTYPE html>
BECAUSE IT ACTS AS A DECLARATION AND ENSURES THE BROWSER
TRIES TO MEET INDUSTRY-WIDE SPECIFICATIONS. <!DOCTYPE html> 

ALSO TELLS THE BROWSER THAT THE DOCUMENT IS HTML 5 

CSS