HTML Flashcards
What does HTML stand for?
HyperText Markup Language
What is a markup language?
a computer language that defines the structure and presentation of raw text
What is HyperText?
text displayed on a computer or device that provides access to other text through links, also known as hyperlinks
What is HTML composed of?
Elements
What is the HTML element for paragraph?
<p> (opening tag)
| </p>
(closing tag)
What is an HTML element made of?
a tag and content
How is HTML organised in relationships?
as a collection of family tree relationships
What is an element called when it is contained within another element?
The child of that element, and the child element is nested inside the parent element
The child element is ____ inside the parent element?
Nested
What is the relationship between elements and their ancestor and descendent elements known as?
Hierarchy
What are elements at the same level called?
Siblings
How many headings / heading elements are there in HTML?
6
What are the 6 headings in HTML?
< h1 > — used for main headings. All other smaller headings are used for subheadings
< h2 > < h3 > < h4 >< h5 > < h6 >
What are the 6 headings in HTML?
<h1> — used for main headings. All other smaller headings are used for subheadings
</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Why is <div> useful?</div>
It it useful for grouping elements together
What is the < div > element short for, and what does it do?
<div> is short for division and a <div> contains or divides the page into sections</div></div>
Do <div>s have a visual representation?</div>
No
How do <div>s help with style?</div>
<div>s allow you to group HTML elements to apply the same styles for all HTML elements inside</div>
How do you ensure readability with <div>s?</div>
Add two spaces of indentation
What is an attribute?
Attributes are content added to the opening tag of an element
What two parts are attributes made up of?
the name of the attribute
the value of the attribute
What does the id attribute do?
specify different content
come back to add more
What do attributes do?
Attributes can be added to the opening tag of an HTML element to change its default behavior or provide additional data about it
What do attributes consist of?
Attributes consist of a name and a value in the format name=”value”:
How do you display text in HTML?
with a paragraph < p > or a span < span >
What is <span> used for?</span>
<span> are used to separate small pieces of content that are on the same line as other content</span>
When is it best to use < span > < /span > ?
when you want to target a specific piece of content that is inline, or on the same line as other text
(use < div > when want to divide your content into blocks)
What HTML tag emphasises text?
< em >
What HTML tag highlights important text?
< strong >
How is < em > usually manifested in a browser?
in italics
How is < strong > usually manifested in a browser?
in bold
Does the spacing between code in an HTML file affect the positioning of elements in the browser?
No
How do you modify spacing of your code in the browser?
Use HTML line break element - < br >
What is unique about < br >
it is only composed of a starting tag (no closing tag - < /br > does NOT exist)
What is the HTML tag for an unordered list?
<ul> </ul>
What tag must be used with the unordered list < ul > < /ul> ?
the list item tag < li >
What is different about ordered lists <ol> compared to unordered lists </ol><ul>?</ul>
Ordered lists are numbered
What tag do you use to add images?
< img >
What is the closing tag for <img></img>?
Trick question, <img></img> is a self-closing tag - the end of the <img></img> tag has a forward slash <img></img>, but not always
What is <img></img>’s required attribute?
src
What is src, <img></img>’s required attribute?
the image source
<img></img>
What does URL stand for?
uniform resource locator (URL)
What does the alt attribute mean?
alternative text
How do you use the alt attribute with <img></img>
the alt attribute can be added to the image tag just like the src attribute, and the value of alt should be a description of the image:
<img></img>
Give 3 purposes of the alt attribute
- If an image fails to load on a web page, a user can mouse over the area originally intended for the image and read a brief description of the image. This is made possible by the description you provide in the alt attribute.
- Visually impaired users often browse the web with the aid of screen reading software. When you include the alt attribute, the screen reading software can read the image’s description out loud to the visually impaired user.
- The alt attribute also plays a role in Search Engine Optimization (SEO), because search engines cannot “see” the images on websites as they crawl the internet. Having descriptive alt attributes can improve the ranking of your site.
When should you not use the alt attribute?
When the image on the web page is not one that conveys any meaningful information to a user
What is the element for videos in HTML?
< video >
How does the < video > element differ from the < img > element?
The < video > element requires a closing tag - < /video >
How do you tell the browser to include basic video controls?
with the controls attribute
What is this: < !DOCTYPE html >
document type declaration
Why do we need to write a document type declaration with HTML?
to let web browsers know that we are using HTML
How do you save HTML code as a file?
with the .html file extension
What is the < html > element?
html
What does the < head > element contain?
metadata for a web page
what is metadata in HTML?
Metadata is information about the page that isn’t displayed directly on the web page
What does a browser’s tab display?
what’s written inside the < title > element
Where does the < title > tag go?
always inside the < head >, as metadata
How do you link to other web pages?
using the anchor element - < a >
What is needed to complete the anchor - < a > - element?
an href attribute
what does href stand for?
hyperlink reference
What does the target attribute do?
specifies how a link should open
what is needed for a link to open in a new window?
the target attribute requires a value of _blank
in multi-page static websites, where are HTML files stored?
in the root directory / a main folder where all the html files are stored
What is a relative path?
A relative path is a filename that shows the path to a local file - a file on the same website (such as ./index.html) - versus an absolute path (a full URL).
The ./ in ./index.html tells the browser to look for the file in the current folder.
How do you turn an image < img > into a link?
by wrapping the < img > element with the anchor < a > element
eg:
<a><img></img></a>
what tools are available to visualise relationships between elements?
whitespace and indentation
Why is whitespace useful?
because space in the code doesn’t translate to space in the body of the web page
How does the World Wide Web Consortium suggest creating indentation in your code?
With two spaces
How do you code comments into HTML?
< !– opens comments and is closed by – >
How many < body > elements can there be in an HTML document?
Only 1
What should always be your first line of code in an HTML document?
< !DOCTYPE html >
How do you create a deadlink?
href = “#”
What element do you use to create a table?
< table >
How do you create rows in a table in HTML?
using the table rows element - < tr >
What is the table data element?
< td >
How do you create a table heading?
< th >
Where do you put table headers?
within a table row
what values can the scope attribute take?
row (row) or column (col)
How were table borders made in older versions of HTML?
by using a border attribute and setting it equal to an integer
eg: < table border = “1” >
where the integer is the thickness of the border
How can data span columns?
Using the span column attribute - colspan
How does the colspan attribute work?
the colspan attribute accepts an integer (≥1) to denote the number of columns it spans across
How can table data span multiple rows?
using the rowspan attribute, which accepts an integer (≥1) to denote the number of rows it spans across
how do you section off a long table with lots of data
with the table body element < tbody >
What should the < tbody > element contain?
all the table’s data, excluding the table headings
How do you section off table heads?
using the table head < thead > element
How do you section off the bottom part of a long table?
with the table footer element - < tfoot>
What do table footers usually contain?
sums, differences, and other data results
What does CSS stand for?
Cascading Style Sheets
with < form > what does the action attribute do?
determines where the < form > information is sent
Why are HTTP verbs capitalised
out of convention
eg. < form action=”/example.html” method=”POST” > < /form >
What does the method attribute do in an HTTP < form >
the method attribute is assigned a verb that is included in the HTTP request
What does < input >’s type attribute do?
determines how the input renders on the page, and what kind of data the input can accept
what is the default value of the type attribute?
“text”
type = “text”
Why does < input > need a < label >?
So that users can can properly identify an < input >
What does an < input > need to be associated with a < label > ?
an id
What is the password attribute for < input >?
type=”password”
What does < input type=”password” > do?
replaces input text with another character, like an asterisk * or dot • - so sensitive material like passwords are hidden
What does the step attribute do inside < input >
Puts arrows inside the input box so that the user can click the arrows to go up or down
What does < input type=”range” > (setting type to range) do?
Gives users a slider in the input box
How do you set minimum and maximum values for the type=”range”
with min and max attributes
How do you make a checkbox with < form > ?
With type=”checkbox”
Where are radio and checkbox buttons’ values displayed?
in the label part of the code eg: < form > < p>What is sum of 1 + 1?<p></p> < input type="radio" id="two" name="answer" value="2" > < label for="two">2 < br > < input type="radio" id="eleven" name="answer" value="11" > < label for="eleven">11 < /form >
What does a radio button do?
Allows users to choose only one option from given buttons
How do you group radio buttons together?
By giving them the same name attribute
How do you make a dropdown menu instead of, eg, radio buttons?
With < select > and < option > eg: < select name="bun" id="bun" > < option value="sesame">Sesame < option value="potato">Potato < option value="cake">Cake < /select >
What do you use if you have a really long drop down?
the < datalist > element
What element is < datalist > used with?
the < input type=”text” > element
What is the input < textarea > used for?
to create bigger text fields for users to write into (as opposed to the more simple < input >
How do you determine the size of < textarea >
with rows ( rows=”x” )and columns ( cols=”x” )
How do you allow users to submit information with < input >?
make a submit button by coding: < input type=”submit” >
What happens if you don’t assign a value to a submit button?
The default text appears within the submit button, which is Submit
What is server-side validation?
when data is sent to another machine (typically a server) for validation
What is client-side validation?
validation that occurs before data is sent to the server
How do you enforce non-optional fields in a form?
with the attribute ‘required’ which is written within the < input >
How do you set a minimum number of characters for a text field?
with the minlength attribute
How do you set a maximum number of characters for a text field?
with the maxlength attribute
Where do minlength and maxlength attributes go?
within < input >
eg:
< input minlength=”5” maxlength=”250” >
What does regex stand for?
regular expression
What is the pattern= attribute used for?
to assign guidelines such as regex for input fields, ie only using certain characters a-zA-Z
What is the benefit of using the < label > element?
clicking on the < label > element on the page will focus on the text field of the associate < input > element
How do you associate a < datalist > element with an < input > element?
the < input >’s list attribute value must match the id= of the < datalist > element
What happens if < input > is missing the name= attribute?
the information in the input form will not be submitted
How do you render a dropdown list in a < form >?
add a < select > element with < option > < /option > elements nested inside
Where in a form does the placeholder attribute go?
within < input >
eg:
< input id=”name value=”name” type=”text” placeholder=”Adam Smith” >
What does semantic mean?
relating to meaning
What does semantic HTML do?
provides context about what information is inside of the code, for example, < header > provides more context than < div >
Why use semantic HTML?
accessibility, SEO, and easier to understand
What does < nav > do?
Defines blocks of navigation links - menus, tables of contents, etc
What are some of the semantic structural elements?
< header >< nav >< main >< footer >
What does < footer > contain?
contact information copyright information terms of use site map reference to top of page links
Give two semantic elements that can do into the body section?
< section > and < article >
What does < section > do?
defines elements in a document with the same theme
What does the < article > element do?
holds content that makes sense on its own, such as articles, blogs, comments, etc
What is the < aside > element for?
used to mark additional information that can enhance another element but isn’t required in order to understand the main content
Give some uses for the < aside > element
bibliographies, endnotes, comments, pull quotes, editorial sidebars, additional information
What is < figure > used for?
for encapsulating media such as an image, illustration, diagram, code snippet, which is referenced in the main flow of the document
How do you add a caption to a < figure >?
with the element < figcaption >
Why is < figcaption > better than using plain text with < p >
because text written in < figcaption > moves with the < figure >
How do you embed audio into a document?
With the < audio > element, which uses src= just like < img >, but with a new < source >
Where do audio attributes go?
Within the opening tag of < audio autoplay controls >
How do you use < source > with < audio >
< audio controls >< source src=”” type =”audio/mp3”>
What attributes can be used with < video >?
< video controls autoplay loop >
controls adds play and pause buttons to the video, as well as volume control and a fullscreen button
autoplay plays the video as soon as the page is loaded
loop loops the video on repeat
What does the < address > element do to text?
makes it italic
What semantic element can you use to show time in HTML?
< time >
What semantic element can you use to show that text is an abbreviation?
< abbr > < /abbr >
What element do you use to show that some text is a detailed description?
< details > < / details >
What does the < details > element do?
creates a dropdown button which expands to show the details inside the element
What can you use to add a descriptive summary to < details >
the < summary > element
eg:
< details > < summary > summary goes here < /summary > < /details >
How do you group an image and its caption together?
with < figure >
What does the for=”” attribute link to?
the id=”” attribute
What does the id=”” attribute in < input > link to in < label >?
the for=”” attribute
How do you code so that radio or checkbox buttons are ticket by default?
with the checked attribute
< input type=”radio” checked >
How do you link radio buttons together?
by giving them the same name=”” attribute
What is a class attribute? ( class=””)
a class attribute specifies one or more class names for an HTML element
How do you code an element to have two or more classes?
within the same class attribute in separate quotation marks
class = “hello-world” “coding-is-fun”
What tag can you use to underline text?
< u >
What tag can you use to strike through text?
< s >
What is the tag used to create a horizontal line?
< hr >
What is the tag for adding JavaScript in HTML?
< script >
how do you create linked sections on a webpage?
using <a> tags and adding ids to the elements you wish to jump to</a>
what does the defer attribute do?
it specifies that scripts should be executed after the HTML file is completely parsed
what does the async attribute do?
loads and executes JavaScript asynchronously with the rest of the page
how is the async attribute different to the defer attribute
with the async attribute, the script does not wait until the entire page has parsed, but executes as soon as it is downloaded
when is the async tag useful?
for scripts that are independent of other scripts and don’t rely on other scripts to function
what is each point on a DOM called?
a node
what does DOM stand for
document object model
what is a node in a DOM?
an intersecting point in a tree that contains data
what is the top most node called in the DOM?
root node
what would document.parentNode return?
null - the document element is the root node
what is appending?
assigning a new element to be the child of an element that already exists on the DOM
