HTML Review Flashcards
What are HTML Elements?
Elements are the building blocks for an HTML document. They represent headings, paragraphs, links, images and more. Most HTML elements consist of an opening tag (<elementName>) and a closing tag (</elementName>).
What are void elements?
Void elements cannot have any content and only have a start tag. Examples include img and meta elements.
What are attributes?
An attribute is a value placed inside the opening tag of an HTML element. Attributes provide additional information about the element or specify how the element should behave. Here is the basic syntax for an attribute:
<element></element>
What are comments?
Comments are used in programming to leave notes for yourself and other developers in your code. Here is the syntax for a comment in HTML:
<!--This is an HTML comment.-->
What is a boolean attribute?
A boolean attribute is an attribute that can either be present or absent in an HTML tag. If present, the value is true otherwise it is false. Examples of boolean attributes include disabled, readonly, and required.
What are headings?
There are six heading elements in HTML. The h1 through h6 heading elements are used to signify the importance of content below them. The lower the number, the higher the importance, so h2 elements have less importance than h1 elements.
Symbol for paragraph element
<p>This is a paragraph element.</p>
IMG Elements
The img element is used to add images to the web page. The src attribute is used to specify the location for that image. For image elements, it’s good practice to include another attribute called the alt attribute. Here’s an example of an img element with the src and alt attributes:
<img src=”https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna
Body elements
This element is used to represent the content for the HTML document.
<body>
<h1>CatPhotoApp</h1>
<p>This is a paragraph element.</p>
</body>
Section elements
This element is used to divide up content into smaller sections.
<section>
<h2>About Me</h2>
<p>Hi, I am Jane Doe and I am a web developer.</p>
</section>
DIV elements
This element is a generic HTML element that does not hold any semantic meaning. It is used as a generic container to hold other HTML elements.
<div>
<h1>I am a heading</h1>
<p>I am a paragraph</p>
</div>
Anchor Elements
These elements are used to apply links to a web page. The href attribute is used to specify where the link should go when the user clicks on it.
<a href=”https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.
Unordered and Ordered Lists
Unordered <ul> Ordered <ol>
<ul>
<li>catnip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
Emphasis Element
<em> italics </em>
Bold Element
<strong> Content </strong>
figure and figcaption Elements:
The figure element is used to group content like images and diagrams. The figcaption element is used to represent a caption for that content inside the figure element.
<figure>
<img></img>
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
</figure>
main Element:
This element is used to represent the main content for a web page.
footer Element:
This element is placed at the bottom of the HTML document and usually contains copyright information and other important page links.
<footer>
<p>
No Copyright - <a>freeCodeCamp.org</a>
</p>
</footer>
IDs
Unique element identifiers for HTML elements. ID names should only be used once per HTML document.
<h1>Movie Review Page</h1>
ID names cannot have spaces. If your ID name contains multiple words then you can use dashes between the words like this:
<div></div>
Classes
Classes are used to group elements for styling and behavior.
<div></div>
Unlike IDs, you can reuse the same class name throughout the HTML document. The class value can also have spaces like this:
<div></div>
<div></div>
HTML Entities
An HTML entity, or character reference, is a set of characters used to represent a reserved character in HTML. Examples include the ampersand (&) symbol and the less than symbol (<).
<p>This is an <img /> element</p>
Link element
This element is used to link to external resources like stylesheets and site icons. Here is the basic syntax for using the link element for an external CSS file:
<link></link>
Script element
This element is used to embed executable code.
<body>
<script>
alert("Welcome to freeCodeCamp");
</script>
</body>
While you can technically write all of your JavaScript code inside the script tags, it is considered best practice to link to an external JavaScript file instead. Here is an example of using the script element to link to an external JavaScript file:
HTML Boilerplate
This is a boilerplate that includes the basic structure and essential elements every HTML document needs.
<!DOCTYPE html>
<html>
<head>
<meta></meta>
<title>freeCodeCamp</title>
<link></link>
</head>
<body>
<!--Headings, paragraphs, images, etc. go inside here-->
</body>
</html>
Read more on the About Page
