Skip to main content

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>

  • 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






No Comments
Back to top