HTML Styles & Programming Flashcards
style
Element for CSS
goes in the head
Specifies how the page should render
div
Division of the page used as
a container for elements to be
styled by CSS or manipulated by
JavaScript
Any elements can go in the tag
span
An inline container to markup,
stylize with CSS, or manipulate
with JavaScript
header
Used for containing introductory
or navigation content
headings, logos, authorship
footer
Defines a container for footer information
authorship, copyright, contact info,
site map, related documents, back to top
main
The main content
Only one main
Must NOT descend from:
article, aside, footer, header, or nav
section
Defines a section of the page,
has a more specific meaning than div
Used for elements that are on a
consistent topic, same theme
article
Used to specify self-contained information
aside
Defines content aside from
the page content, side-bar content
details summary
Specifies a container with additional
details that collapse
details
summary /summary
p /p
/details
dialog
Defines a subwindow, for popup
dialogs and modals
data
Allows for machine readable translation of content
time
An element that translates time into
machine readable code that can
interact with the user’s calendar
script
Adds JavaScript to the page
OR can add an external JavaScript
file.
script src=””
noscript
An element to display if the browser
does not support JavaScript
iframe
defines an inline frame for embedding
another document
progress
Creates a progress bar element
label for=”bar” …. /label
progress id=”bar” value=”x” max=”y” /progress
What is a block level element?
An element that…
Always starts on a new row/line
with some margin from the browser
Always takes up the full width available
<div></div>
What is an inline element?
An element that…
Does not start on a new line
And only takes up width as necessary
<span></span>
Can an inline element contain a block element?
No, it cannot.
class=””
The class attribute points to a stylesheet class name. It is case-sensitive and can point to multiple elements.
name=”cityscape”
.cityscape {}
id=””
johnBio {}
The id attribute specifies a unique id for an element. (One element)
The id will point to a specific CSS declaration.
id=”johnBio”
How do you define a character set for the page?
In the head…
meta charset=”UTF-8”
How do you define keywords for a page, that a search engine will pick up?
In the head…
meta name=”keywords”
content=”pizza, etc”
How do you define a description for a page?
In the head…
meta name=”description”
content=”LA’s Finest Pizza”
How do you define an author for the page?
In the head…
meta name=”author”
content=”Pat Dough”
How do you set a document to refresh every 30 seconds?
In the head…
meta http-equiv=”refresh”
content=”30”
How would you set the page to look good on all devices?
In the head…
name=”viewport”
content=”width=device-width,
initial-scale=1.0”
How would you set a script in the head?
script src=”app.js” type=”module” defer
What happens when the script is async?
The script is downloaded in parallel to parsing the page.
BUT is executed before the page finishes parsing.
What happens when the script is defer?
The script is downloaded in parallel to parsing the page
AND only executes after the page is parsed
What happens when a script is neither defer or async?
The script blocks parsing the page
AND downloads and executes before parsing can resume.
if defer and async are absent, move script to the end of the body
