HTML Flashcards
What does HTML stand for?
Hypertext Markup Language
Tag
Basic building block of HTML, describes content.
Opening Tag
Starts an HTML element, e.g., <h1>.
Closing Tag
Ends an HTML element, e.g., </h1>.
Self-Closing Tag
Tag that doesn’t require a closing counterpart.
How to structure tags?
Always close the most recently opened tag first
How to add a heading?
<h1>This is a heading</h1>
How many headings are there?
<h1> to <h6>, <h1> being the heading and the rest being subheadings
</h1></h6></h1>
How to use a paragraph tag?
<p></p>
What is the <div> tag?
Like a box. It has no meaning, but is given meaning on what is inside it.
What is the <span> tag?</span>
Like a <div> tag, but for style
What is the difference between a <div> tag and a <span> tag?</span>
<div> - whole width of the screen
<span> - hugs the content
</span></div>
What does <li> do?
Represents the item within a list
Ordered List
<ol> tag for numbered lists.
</ol>
Unordered List
<ul> tag for bulleted lists.
</ul>
How to use <ol> tags?
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
will output
1. Coffee
2. Tea
3. Milk
How to use <ul> tags>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
will output
* Coffee
* Tea
* Milk
Button Tag
<button>Click me!</button>
Image Tag
<img></img>
src Attribute
Specifies the image source URL.
alt Attribute
Describes the image for accessibility.
<table></table>
Creates container for a table
<thead></thead>
Container for header row
<tbody></tbody>
Container for main body
<tfoot></tfoot>
Container for the footer
<th></th>
Table heading (header cell)
<td></td>
Table data (creates a cell in table row, new column
<tr></tr>
table row (creates a row)
<caption></caption>
Used to create a title for a table
<form></form>
A box, used before <div>, for things like <textrea>, <input></input> and <select> tags</select></textrea>
Anchor tags
<a href= “www.example.com”>Example</a>
Example: what text will be displayed when used with a button
What do you put at the top of your file?
<!DOCTYPE html>
How to set the language?
<html></html>
What is the meta tag for?
Display information of your website
What does the <title></title>
The title of the website to be displayed on the google search
What does <body></body> do?
Everything you see will be placed in it
What does ! do in VsCode
Adds all the meta, html and !DOCTYPE tags for you
What are non-sematic tags?
Generic tags. They have no meaning by themselves. Eg <div>, <span> etc</span>
What are semantic tags?
Html that provides meaning to the website
Where can class and id go?
Any tag
What does charset= “UTF-8” mean?
Tells the browser that our document is written in
the UTF-8 character set (letters/numbers/emojis etc)
Example of a table
<table>
<caption>
Front-end web developer course 2021
</caption>
<thead>
<tr>
<th>Person</th>
<th>Most interest in</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<th>Chris</th>
<td>HTML tables</td>
<td>22</td>
</tr>
<tr>
<th>Dennis</th>
<td>Web accessibility</td>
<td>45</td>
</tr>
<tr>
<th>Sarah</th>
<td>JavaScript frameworks</td>
<td>29</td>
</tr>
<tr>
<th>Karen</th>
<td>Web performance</td>
<td>36</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Average age</th>
<td>33</td>
</tr>
</tfoot>
</table>
Label and input tag
<label for= “first-name”>First name:</label>
<input type= “text” id= “first-name” name= “first-name” />
Rule for label and input tags
for (in label) must match id (in input)
type - just make it the type of input you are doing
