HTML Tags and Their Functions Flashcards
What should the <body> NOT include?
<h1>
</h1>
Which is smaller? <h2> or <h4>?
<h4>
</h4>
What does the <em> tag do to the text is surrounds?</em>
Makes it Italic
What does the <strong> do for the text it surrounds?</strong>
Makes it bold
What tag do you use for metadata elements and your webpage title for the browser?
<head></head>
What should all website codes start with?
<!DOCTYPE html>
What attribute do you add to an <a> to turn it into a useable link?</a>
href
What attribute and value can be used for the <img></img> to make it load only when the user scrolls to that part of the page?
loading=”lazy”
What syntax do you use for adding notes to your code?
<!-- and -->
What attribute and value do you use when you want your link to open in a new tab?
target=”_blank”
What self-closing tag allows you to add a line that shows up on the page to divide up sections?
<hr></hr>
What attribute pairs with an input tag to put replaceable text in a typed field to give a hint to viewers what to input?
placeholder
What attribute and value can be paired with an <input></input> to make circular buttons that you can only select one of?
type=”radio”
What attribute can be paired with a checkbox or radio input to select one or more options automatically? (hint, it doesn’t require a value)
checked
What tag(s) do you use for list items?
<li></li>
The semantic tag <address></address> will to what to the text inside it?
Make it italic
What semantic tag groups an image and its caption together?
<figure></figure>
What tag(s) do you use for a caption on an image?
<figcaption></figcaption>
What attribute should be included with all images in case they fail to load or a screen reader is involved?
alt
When an image is just for decoration what attribute and value do we use?
alt=” “
What is the second tag(s) that should be included in all websites?
<html></html>
What attibute and value do we use with the <html> to indicate that the page is in english?
lang=”en”
If there are no appropriate semantic tags to use, what attibute can be given to any element to indicate to assistive technology what the elements are for?
role
If you use a <div> to make your own custom picture, what attribute and value can use to indicate that to a piece of assistive technology?
role=”img”
What attribute will hide content from assistive tech but still be visible on your page?
aria-hidden
What tag(s) do you use to collect inputs from a user?
<form></form>
What tag(s) should be used to group related inputs together and by default displays a border around it?
<fieldset></fieldset>
What tag can go inside of <fieldset> to give it a caption/label inside the border?
<legend></legend>
What attributes can be used to define the size of a <textarea>?</textarea>
rows and cols
Which attribute goes with <label>, “for” or “id”?</label>
for
Which attribute goes with <input></input>, “for” or “id”?
id
What attribute can be given to an <input></input> to make it that a user cannot submit a form without inserting information into it? (hint, it doesn’t have a value)
required
What attribute would you use if you wanted to require a certain amount of characters for a password?
minlength
What attribute would allow you to program specific parameters for password requirements?
pattern
What tag(s) allow you to make a dropdown menu?
<select></select>
What tag(s) allow you to put items in your dropdown menu?
<option></option>
What attribute do you use to give an <option> meaning toward your data?</option>
value
What attribute and value should you give to this set of code so that it doesn’t interfere with your data?
<option>(select one)</option>
value=” “
What attribute do you use to change the text on a submit button?
value
What attribute can you use instead of role to make sure that screen readers will defintely read it?
aria-labelledby
What class is usually given to <span> that we wish for only screen readers to see></span>
sr-only
What attribute and value do you use when you want a screen reader to not read certain elements?
aria-hidden=”true”
What is the difference between the attribute cite and <cite>?</cite>
The attribute displays the source of a quote only within the code and the tag displays it alongside the quote.
