HTML Basics Flashcards
How does a typical document begin?
<!DOCTYPE html>
<html>
<head>
<title>This is the title</title>
</head>
<body>
<h1>This is the heading</h1>
</body>
</html>
What is <p></p>?
A paragraph tag (or element)
In <p id="myId" class="my-class"></p>, what does id and class represent?
Attributes (they include key and value)
What is semantic html?
Elements that imply meaning to content; easier to understand structure of html (eg h1, section, article, aside, header, nav, footer, ol, ul, li, etc); crucial for SEO and accessibility
1. article: self-contained; independently distributable
2. section: thematic grouping of content, not self-contained
3. header: introductory content; top of document
4. main: main content, one per page
5. nav: section of links
6. aside: indirectly related, non-vital content
7. footer: footer of document
How can you display “<”, “>” or “&” in an html document?
Use <, > and &, respectively (these are called html entity references)
What additional attributes should you add to an a tag for external links?
target="_blank" rel="noopener noreferrer"
Which tags are self-closing?
<input></input>
<hr></hr>
(horizontal rule)
<br></br> (line break)
<img></img>
How do you make a comment in html?
<!-- my comment here -->
How do you display an image?
<img></img>
How you create a link?
<a>Something</a>
How do you add italics or bold text using html?
<em> </em>
<strong> </strong>
How do you create a table?
<table>
<thead>
<tr>
<th>My heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>My content</td>
</tr>
</tbody>
</table>
How do you create a form?
<form>
<label>Username</label>
<input></input>
<label>Password</label>
<input></input>
<button>Submit</button>
</form>
// name is used for submitting form
// other types include “data”, “tel”, “checkbox”, “radio”
How do you create a group of radio buttons?
<fieldset>
<legend>Choose your animal</legend>
<label>Dog</label>
<input></input>
<label>Cat</label>
<input></input>
</fieldset>
What does a common html head include?
<head>
<meta></meta>
<meta></meta>
<title>This is the title</title>
<link></link>
<base></base>
<meta></meta>
<meta></meta>
</head>
