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
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