HTML Basics Flashcards
What’s an ID? how often can it be used?
ID = way to mark a code in HTML for CSS. Only one ID value per document.
What’s a class? How often can you use it?
Way to mark an element in HTML for CSS. Can be used multiple times.
ID vs class?
ID value = x1 use
Class value = x many many times. Good for grouping.
What is the lowest specificity weight? How much?
Tags are only one point
Which thing in HTML has the highest specificity weight? How much?
An inline style = 1000pts
Rank the following in specificity points: how many each?
ID, class, tags
ID = 100 points Class = 10 points Tags = 1
What examples of inline styles worth 1000 specificity points?
!important (bang important)
What’s a bang important? How and where to write it?
Bang important = most important code in your sheet for CSS.
Write in VSS declaration after value:
Color: red !important;
When’s the only time you should bang important?
Right before a deadline to string quick CSS together.
What’s an element? Give an example code.
Element = name of your structure. Ex. A, p, div
What are tags?
Carrots/ brackets + element
What are HTML attributes? Where do they go? Write example.
Gives more information to an element.
Go inside OPENING tag.
Ex. <a>click here</a>
What are all important structures in an HTML document. (From start to finish)
!DOCTYPE html Html Head Body /html
What part of an HTML document tells us what version of the HTML it is? Where does it go?
The document type declaration or doc type, “!DOCTYPE html” goes @ top first.
What are semantics
Meaning/purpose behind an HTML content
What 2 elements in HTML have NO semantic value (only for styling purposes)
DIVs and Spans
Block vs inline elements
Block start on their own line and stack on each other. For bigger content.
Inline start at next space in a content line. For smaller content.
Can Block elements wrap inline elements? What about the opposite?
Yes. And no.
How to write an HTML comment?
<!—content—>
Difference between strong & b element
Strong = strong semantic importance B= stylistically different text
You want to make “study” bolded and important in the following HTML. How do you write?
P< it’s really important to study every day >
P < its really important to < strong > study < / strong > every day < / P > < / strong >
What 2 elements to italicize text in HTML? How are they different?
< em > = stressed emphasis
< i > = alternative voice or tone * good for quotes
You want to group some content at the TOP of your webpage. What structure element to use?
Header
You want to group some content at the BOTTOM of your webpage. What structure element to use?
Footer
Header vs head vs h1
Header = content at top of page Head = meta data H1 = important content title
You want to make a section for navigation links, table of contents, previous/next links… what section element to use?
< nav >
What’s an article element?
< article > = For text that can be used independently. (Ex. Blog posts)
what is the best content to use for < aside > elements?
Sidebars, notes, brief explanations, “tips” sections, inserts
Where to find codes for special characters in HTML?
Copy paste character.com
How to code a hyperlink
< a href= “website url” > content < / a >
Can you make an entire block of content, a hyperlink? How?
Yes. Use anchor element < a >
What are two common types of links
To other pages
To other websites
Another name for href
A path
What href (path) to put when linking to another page on the same website?
Use a RELATIVE path. Href = “file NAME of link page”
Relative vs absolute paths (hrefs)
Relative = direction to file name or page
Absolute = exact address
How to create an email link in HTML
Href = “ mailto: davidaych@gmail.com”
How do you program a subject into an html email hyperlink?
After the email hyperlink, write: ? Subject=content
Spaces = %20
How to add a body to an html email hyperlink?
If subject is coded, attach w/ &
If no subject coded, attach to hyperlink via ?
Code: body=content
Space = %20
Enter= %0A
How to code a hyperlink to open in a NEW window. Give example
Attribute = target Value = _blank
Ex. < a href= “website URL” target= “_blank” > content < / a >
How do you link to different parts of the same page?
Put your ID in your destination
Chose your hyperlink location and Put your ID in it.
Ex: < a href= “# ID name” > content < / a >
Does letter casing matter in HTML? What’s the best practice?
No. General practice = all lower case
What parts comprise an element?
Open and closing tag + content
What types of elements should you always include the head of your html? Describe each.
< meta charset= “ utf-8 “ > for character sets
< title > for tab titles
Why do some tags not need a closing tag? What are these called?
Because the tag itself is already the content (ex. An image tag). These are called self-closing tags.
Why is it important to follow HTML rules? (3 reasons)
- Better user experience (ex. Broken image link will still show image label)
- Accessibility (ex. Screen readers)
- SEO - search engine optimization (better result in google searches)
What is the shortcut to creating an HTML document structure?
Save doc as an HTML document.
At top, write HTML and click “HTML 5”
What is the progressive enhancement concept? Why is it important?
Think of an Peanut M&M
Core of website = content (HTML)
Chocolate coating = presentation (CSS)
Thin candy wrap = client-side script (JS)
Not everyone has good access. Remember this model to build max accessibility for all.
What meta data should you always include in your HTML documents? Where do you write it?
Character sets, description, title, links.
How do you code character sets into your HTML? Where?
In the head:
< meta charset = “ utf - 8 “ >
How do you code a description for your webpage that won’t be visible to visitors?
In head;
< meta name = “ description “ content = “ write your description “ >
How do you code keywords into your html for search engine optimization?
In head:
< meta name = “ keywords “ content “ word 1 , word 2, word 3… “ >
How do you write the title for your page to show on the browser tab?
In head:
< title >
How and where do you set the language of your html doc?
In root tag (html)
< html lang = “ en “ >
What image formats are the most supported across all browsers? How are they different?
Gif, jpg, png
Jpg = best quality photos PNG = lower color/transparency. Great for icons or background patterns.
