HTML Tags Flashcards
Headings
Labels content importance
< h1 > to < h6 >
To organize big blocks of text
Paragraph
< p >
For short text (ex. 1 to 2 words )
Span
< span >
You want to keep white space between your tags
Preserves White space
< pre >
You want to put stress emphasis on a piece of content
Stress Emphasis
< em >
You want to make a piece of content have strong importance
< strong >
Strong importance
< em > vs < strong >
Em will also italicize text
Strong will bold text
You want make to a list with numbers/order
Ordered list
< ol >
___ < li > item 1 < / li >
___ < li > item 2 < / li >< / ol >
You want to make a list but don’t care about order
Unordered list
< ul >
___ < li > item 1 < / li >
___ < li > item 2 < / li >< / ul >
What are the main, different containing elements?
Div, section, article, aside, header, footer, nav (navigation)
Why should you avoid divs if you don’t have to?
They don’t have semantic value. Many other more meaningful alternatives.
What are Deprecated Elements?
Elements we cant use anymore because they’re outdated.
You want to link an image
< img src = “image location” alt = “name of image” >
< img src = “image location” alt = “name of image” >
What is the significance of the alt?
If the image link breaks, the alt is a backup that will label what image should’ve been there.
You want to hyperlink a text
< a > href = “ url “ > content < / a >
Tag that encompasses EVERYTHING on an HTML document.
Root tag
< html >
You want to set the language of your site to English. How?
Put attribute in root tag:
< html lang = “ en “ >
You want to make section that helps users move around your webpage (ex. Links to different pages)
Navigation
< nav >
You want to make boxes for people to write their information
Form
< form >
You made a form for people. How to include a box for email? Phone?
< form >
__ < input type = “ tel “ >
__ < input type = “ email “ >< / form >
You made an input for emails. How do you label and connect that label to your input?
connect w/ an ID.
< label for = “ id name “ > email: < / label >< input id = “ id name “ type = “email “ >
What are the different ways to tag quotes and citations ( three)
< cite >
< q >< blockquote >
< cite > vs < q > vs < blockquote >
Cite = reference creative work, author or resource Q = short inline quotes Blockquote = longer external quotes
Your are referencing an author’s name, URL, title of work. What tag?
< cite >
You want to use a dialogue quote from a famous person. What tag?
< q >
You want to reference a big block of text from outside source.
< blockquote >
Cite can be an element AND an attribute. What’s the difference?
Attribute cite = same as an href
Element cite = wraps name/ source of quote
You want to make a list, but where all items have a description (or multiple items have the same description or reverse)
< dl >
_ < dt > term < / dt >
_ < dd > description of the term < / dd >
How to add audio files.
< / audio >
What attributes can an audio tag have?
Autoplay
Controls
Loop
Preload
You want to add audio that plays automatically on a page, but doesn’t show.
< audio src = “ # “ Autoplay > < / audio >
You want to add audio on a page with controls (play stop volume…)
< audio src = “ # “ controls > < / audio >
You want to add audio on your page that plays again and again.
< audio src = “ # “ loop > < / audio >
What does the preload attribute do to audio tags? What values does it have?
Preload = what information is loaded from audio.
Values = none, metadata, auto (all)
Set to none/metadata to save bandwidth
How do you make sure your audio files are supported by all browsers?
Use backups in different formats (mp3, ogg, wav)
How to add videos to your page?
< video src = “ # “ > < / video >
Attributes = loop, autoplay, controls, preload
You want to add a video to your page and control how big it will look like?
Add video and change the height / width in CSS
You want to add a video to your page and choose a front picture before it plays.
< video src = “ # “ poster = “ # “ > < / video >
What are inline frames? When and how do you use them?
You embed another html page onto your html page.
For medias from external sites ( YouTube, google maps, Vimeo… )
< iframe src = “ # “ > < / iframe >
You want a containing element to wrap and semantically label your media tags (ex. Images, audio, videos)
< figure >
_ < img >
Why do we use figure elements?
To wrap/ contain all self- containing elements (mostly media)
You want to have a caption or description for your images or other media
< figure >
_ < img src = “ # “ alt = “ # “ >
_ < figcaption > description content < / figcaption >< / figure >
What section in HTML is specifically for taking information from users?
< form >
< form action = “ / login “ method = “ post “ >
What do the attributes, “action” and “method” mean?
Action = url or location all form information will go to.
Method = how the information will be sent to the server.
You want to create a form that accepts people’s usernames. How?
< form >
_ < input type = “ text “ name = “username” >< / form >
What are common type attributes for an input tag?
Date, time, email, tel, number, url
You want to create a box where people can add their comments. How?
< form >
_ < textarea name = “comment “ > Add your comment here < / textarea >
Text area vs input
Text area = multiple line box
Input = single lines
You want to make a form that lets users make 1 choice from many options.
< input type = “ radio “ name = __ value = “choice 1” checked > “choice 1”
< input type = “ radio “ name = __ value = “choice 2” > “choice 2”
< input type = “ radio “ name = __ value = “choice 3” > “choice 3”
You want to create a form where users can check multiple choices from multiple options/
< input type = “ checkbox “ name = __ value = “choice 1” checked > “choice 1”
< input type = “ checkbox “ name = __ value = “choice 2” > “choice 2”
< input type = “ checkbox “ name = __ value = “choice 3” > “choice 3”
How to make a drop down list for users to select an option
< select name = “ day “ >
_ < option value = “ option 1 “ selected > option 1 < / option >
_ < option value = “ option 2 “ selected > option 2 < / option >
_ < option value = “ option 3 “ selected > option 3 < / option >
How to make a submit button, to submit input data from users?
< input type = “ submit “ name = “ submit “ value = “ send “ >
You want to allow users to attach and submit files.
< input type = “ file “ name = “ file “ >
What 3 ways to organize your form elements?
Labels
Field sets
Legends
How to you label a form input tag?
< label for “ ID name “ > label name < / label >
< input type = “ # “ name = “name of input “ id = ___ “ >
What’s an easier way to label your inputs than using ID’s?
Wrap the input in the label. Ex.
< label >
_ < input type = “radio” name = “day” value = “Friday” checked > LABEL NAME
< / label >
What containing element is for all your forms and inputs?
< fieldset >
You made a fieldset for all your forms and inputs. What element is used to label it?
< fieldset >
_ < legend > login < / legend >
_ < label >
_ < form >
You want to disable a form or input. How?
< input type = “ text “ disabled >
You have a form and an input, and you want to put a sample text inside that will disappear when people start typing.
< input type = “ email “ name = “ email - address “ placeholder = “name@email.com” >
You want to make it required for people to submit a form. How?
Use Boolean attribute, “ required “
Which is a bigger containing element? Form or fieldset?
Form
What are the minimum elements you need to make a table?
< table >< tr > = table row
< td > = table data
Tr vs td vs th
Tr = table row
Td ( table data ) is nested inside tr
Th = heading name of each row
You want to make a table header and tag that it belongs to a specific column for “dates”
< th scope = “ col “ > dates < / th >
You want to title your table, “top cool places”
< table >
_ < caption > top cool places < / caption >
Th vs thead vs tfoot
Thead = biggest containing element
Th = headings
Tfoot = opposite of thead
Td vs tbody
Td = simple data
Tbody = big containing section in a table
In a table, how to combine/merge cells in a column? Or a row?
Use colspan or rowspan attribute
< td colspan = “ 3 “ > < / td >
< / th >
