1/48
html basics
Name | Mastery | Learn | Test | Matching | Spaced |
---|
No study sessions yet.
DOCUMENT STRUCTURE + METADATA
<!DOCTYPE html>
<html lang=”en”>
<head></head>
<meta charset=”UTF-8”>
<title></title>
</html>
<!DOCTYPE html>
tells the document is HTML5
<html lang="en">
defines the document’s language is English
<head></head>
contains behind the scenes info to make the document work
<meta charset=”UTF-8”>
acts as a translator for text content on the document
<title></title>
sets the browser tab title
</html>
ends the entire page
PAGE CONTENT STRUCTURE
<body></body>
<main></main>
<section></section>
<body></body>
contains ALL visible & interactive content on the entire page
<main></main>
contains the main content in a page
<section></section>
groups related sections together
TEXT & HEADINGS
<h1></h1> to <h6></h6>
<p></p>
<h1></h1> to <h6></h6>
main heading to smallest heading
<p></p>
is the paragraph elements
LIST & ITEMS
<ul></ul>
<ol></ol>
<li></li>
<ul></ul>
unordered list
<li></li>
list item
<ol></ol>
ordered list
LINKS + IMAGES
<figure></figure>
<img src=" " alt=" ">
<figcaption></figcaption>
<a href="link"></a>
<figure></figure>
Contains visual elements
<img src="" alt="">
displays an image
Where do <figcaption></figcaption> go?
is the caption of an image
<a href="link"></a>
is a clickable email link
TEXT FORMATTING + EMPHASIS
<strong></strong>
<em></em>
<strong></strong>
creates Bold text for strongness
<em></em>
creates Italicized text for emphasis
PAGE SECTIONS + FOOTER
<footer></footer>
<footer></footer>
Contains credits to all of the visual content in the entire page |
Where do <!DOCTYPE html> go?
Goes at the very top of the page
Where do <html lang="en"> go?
Goes right after <!DOCTYPE html>
Where do <head></head> go?
Goes inside <html lang=”en></html>
Where does <meta charset="UTF-8"> go?
Goes INSIDE `<head></head>
Where do <title></title> go?
Goes INSIDE `<head></head>
Where do <body></body> go?
Goes INSIDE <html lang=”en”></html>
Where do <main></main> go>
Goes INSIDE `<body></body>
Where do <section></section> go?
Goes INSIDE `<main></main>
Where do <h1></h1> to <h6></h6> go?
Goes INSIDE `<section></section>
Where go <p></p> go?
Goes INSIDE `<section></section>
Where do <ul></ul> go?
Goes INSIDE `<section></section>
Where do <li></li> go?
Goes INSIDE `<ul></ul> or <ol></ol>
Where do <ol></ol> go?
Goes inside <section></section>
Where does <figure></figure> go?
Goes inside <section></section>
Where do <img src= "" alt=""> go?
Goes inside <figure></figure>
<figcaption></figcaption>
Goes inside <figure></figure>
Where do <footer></footer> go?
Goes inside <body></body>
Where does <strong></strong> go?
Goes inside <footer></footer> or <p></p>
Where does <em></em> go?
Goes inside <footer></footer> or <p></p>
Where do <a href= " "></a> go?
Goes inside <footer></footer> or <p></p>
Where do </html> go?
Goes at the very bottom of the page.