HTML Tags Flashcards by David Blackthorne

Headings

Labels content importance

< h1 > to < h6 >

How well did you know this?

Not at all

Perfectly

To organize big blocks of text

Paragraph

< p >

How well did you know this?

Not at all

Perfectly

For short text (ex. 1 to 2 words )

Span

< span >

How well did you know this?

Not at all

Perfectly

You want to keep white space between your tags

Preserves White space

< pre >

How well did you know this?

Not at all

Perfectly

You want to put stress emphasis on a piece of content

Stress Emphasis

< em >

How well did you know this?

Not at all

Perfectly

You want to make a piece of content have strong importance

< strong >

Strong importance

How well did you know this?

Not at all

Perfectly

< em > vs < strong >

Em will also italicize text

Strong will bold text

How well did you know this?

Not at all

Perfectly

You want make to a list with numbers/order

Ordered list

< ol >
___ < li > item 1 < / li >
___ < li > item 2 < / li >< / ol >

How well did you know this?

Not at all

Perfectly

You want to make a list but don’t care about order

Unordered list

< ul >
___ < li > item 1 < / li >
___ < li > item 2 < / li >< / ul >

How well did you know this?

Not at all

Perfectly

What are the main, different containing elements?

Div, section, article, aside, header, footer, nav (navigation)

How well did you know this?

Not at all

Perfectly

Why should you avoid divs if you don’t have to?

They don’t have semantic value. Many other more meaningful alternatives.

How well did you know this?

Not at all

Perfectly

What are Deprecated Elements?

Elements we cant use anymore because they’re outdated.

How well did you know this?

Not at all

Perfectly

You want to link an image

< img src = “image location” alt = “name of image” >

How well did you know this?

Not at all

Perfectly

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

How well did you know this?

Not at all

Perfectly

You want to hyperlink a text

< a > href = “ url “ > content < / a >

How well did you know this?

Not at all

Perfectly

Tag that encompasses EVERYTHING on an HTML document.

Root tag

< html >

How well did you know this?

Not at all

Perfectly

You want to set the language of your site to English. How?

Put attribute in root tag:

< html lang = “ en “ >

How well did you know this?

Not at all

Perfectly

You want to make section that helps users move around your webpage (ex. Links to different pages)

Navigation

< nav >

How well did you know this?

Not at all

Perfectly

You want to make boxes for people to write their information

Form

< form >

How well did you know this?

Not at all

Perfectly

You made a form for people. How to include a box for email? Phone?

< form >
__ < input type = “ tel “ >
__ < input type = “ email “ >< / form >

How well did you know this?

Not at all

Perfectly

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

How well did you know this?

Not at all

Perfectly

What are the different ways to tag quotes and citations ( three)

< cite >

< q >< blockquote >

How well did you know this?

Not at all

Perfectly

< cite > vs < q > vs < blockquote >

Cite = reference creative work, author or resource
Q = short inline quotes
Blockquote = longer external quotes

How well did you know this?

Not at all

Perfectly

Your are referencing an author’s name, URL, title of work. What tag?

< cite >

How well did you know this?

Not at all

Perfectly

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 >

HTML Tags Flashcards

(69 cards)