HTML5 Flashcards
Body Element
< body >< /body >
Paragraph Element
”< p >< /p >”
Span Element
< span >< /span >
-used to isolate parts of in-line
Division Element
< div >< /div >
- Divide body into sections
Make “italic” Element
< em >< /em >
Make “bold” Element
< strong >< /strong >
Ordered List Element
< ol >< /ol >
Unordered List Element
< ul >< /ul >
List Item Element
< li >< /li >
Image Element
< img src=”source” alt=”description” /img >
Video Element
< video src=”source” width=”1” height=”2” controls > video not supported < /video >
Heading/Subheading Element
< h1 >< /h1 > through < h6 >< /h6 >
Root Directory
Main folder where all HTML files associated with a project are stored.
Line Break Element
< br >
Declare an HTML Document
< !DOCTYPE html5 >
declaration should always be the first line of code in your HTML files. This lets the browser know what version of HTML to expect.
Container Element for HTML
< html > < /html >
Element to Store Website Info
< head >< /head >
Titling Element
< title >< /title >
A webpage’s title appears in a browser’s tab.
Anchor Element
< a >< /a >
< a href=”./name.html” >< /a > - internal link
< a href=”#name” >< /a > - id link
< a href=”www.website.com” >< /a > - external link
used to link to internal pages, external pages or content on the same page.
Attribute to Specify Unique ID for Element
id=”unique_id”
Add Comment to HTML
< !– –>
Table Element
< table >< /table >
Table Heading Element
< th >< /th >
Use following attributes to define column headings or row headings:
scope=”col”
scope=”row”
Attribute to allow table data to span multiple columns or rows
colspan=”1”
rowspan=”1”
Element to define a table header
< thead >< /thead >
Element to define a table body
< tbody >< /tbody >
Element to define a table footer
< tfoot >< /tfoot >
How do you set up a basic table?
< table >
< thead >
< tr >
< th scope="col" >< /th >
< /tr >
< /thead >
< tbody >
< tr >
< td >< /td >
< /tr >
< /tbody >
< tfoot >
< td >< /td >
< /tfoot >
< /table >Form Element
< form action=”/example.html” method=”POST” >
< /form >
- The action attribute determines where the information is sent.
- The method attribute is assigned a HTTP verb that is included in the HTTP request.
Input Element
< form action=”/example.html” method=”POST” >
< input type=”text” name=”first-text-field” id=”first-text-field” value=”hello” />
< /form >
- Self-closing tag
- The input element is a child of the form.
- It needs to be defined by a type attribute
- the name attribute will be set to the value of the input when submitted
- It gets associated with a label by its id attribute
- The value attribute is the pre-populated value of the form when displayed
Label Element
< label for=”first-text-field” >First text field< /label >
- Label element gets associated with an input via its “for” attribute
Password Input Element
< input type=”password” id=”user-password” name=”user-password” />
-Input defined by type=”password”
Input Element for Numbers
< input id=”years” name=”years” type=”number” step=”1” />
- Defined by type=”number”
- appears with + and - incremented by “step” attribute
- Only allows numbers and certain related characters
Input Element for Slider
< input id=”volume” name=”volume” type=”range” min=”0” max=”100” step=”1” />
- Defined by type=”range”
- Includes “min” and “max” attributes
- also incremented by “step” attribute
Input Element for Checkbox
< input id=”cheese” name=”topping” type=”checkbox” value=”cheese” />
- Defined by type=”checkbox”
- Needs “value” attribute defined
Input for Radio Button
< input type=”radio” id=”two” name=”answer” value=”2” />
- Defined by type=”radio”
- Needs “value” attribute defined
Dropdown Element
< select id=”lunch” name=”lunch” >
< option value=”1” >One< /option >
< option value=”2” >Two< /option >
< /select >
- each option needs a value attribute defined
Input Element for a Data List
< input type=”text” list=”cities” id=”city” name=”city” >
< datalist id=”cities” >
< option value=”New York City” >< /option >
< option value=”Tokyo” >< /option >
< /datalist >
- Use a text input with a “list” attribute defined as “id” attribute of the datalist element
- each option needs a value attribute defined
Text Area Element
< textarea id=”blog” name=”blog” rows=”5” cols=”30” >
< /textarea >
- Define the number of rows and columns the text area should have via the “rows” and “cols” attributes
Input Element for Submit Button
< input type=”submit” value=”Submit” / >
- Defined by type=”submit”
- Use “value” attribute to add user-facing message
Make an input required
< input type=”text” value=”Enter text” required / >
-Simply add “required” attribute
Set Mininum and Maximum Values for an Input
< input type=”number” min=”1” max=”4” / >
Set Mininum and Maximum Text Length for an Input
< input type=”text” minlength=”5” maxlength=”250” required / >
Allow a 14-16 Digit Number to be Entered
< input type=”text” required pattern=”[0-9]{14,16}” / >
- This technique uses regex or “regular expressions”
