provides structure to the content appearing on a website, such as images, text, or videos.
Term
HTML stands for
Definition
HyperText Markup Language:
Term
A markup language is
Definition
a computer language that defines the structure and presentation of raw text.
Term
In HTML, the computer can _______
Definition
that is wrapped in HTML elements.
Term
HyperText is
Definition
text displayed on a computer or device that provides access to other text through links,
Term
HyperText is also known as
Definition
hyperlinks
Term
HTML is composed of
Definition
elements
Term
Elements
Definition
These elements structure the webpage and define its content. Let’s take a look at how they’re written.
Term
HTML element is
Definition
a unit of content in an HTML document formed by HTML tags and the text or media it contains.
Term
HTML Tag
Definition
the element name, surrounded by an opening (<) and closing (>) angle bracket.
Term
Opening Tag
Definition
the first HTML tag used to start an HTML element. The tag type is surrounded by opening and closing angle brackets.
Term
Content
Definition
The information (text or other elements) contained between the opening and closing tags of an HTML element.
Term
Closing tag
Definition
the second HTML tag used to end an HTML element. Closing tags have a forward slash (/) inside of them, directly after the left angle bracket.
Term
When an element is contained inside another element, it is considered the
Definition
child of that element.
Term
The child element is said to be
Definition
nested inside of the parent element.
Term
The relationship between elements and their ancestor and descendent elements is known as
Definition
hierarchy
Term
It’s best to use a ___ element when you want to target a specific piece of content that is inline, or on the same line as other text.
Definition
Term
If you want to divide your content into blocks, it’s better to use a ____
Definition
Term
Paragraphs ____ contain a block of plain text
Definition
Term
The ____ tag emphasizes text.(italic)
Definition
Term
The ____ while the tag highlights important text.(bold)
Definition
Term
If you are interested in modifying the spacing in the browser, you can use HTML’s line break element:
The line break element is unique because it is only composed of a starting tag
Definition
Term
____to create a list of items in no particular order. An unordered list outlines individual list items with a bullet point.
Definition
Term
The ____ or list item tag is used to describe an item in a list.
Definition
Term
Ordered lists____ are like unordered lists, except that each list item is numbered. They are useful when you need to list different steps in a process or rank items for first to last.
Definition
Term
The ____ tag allows you to add an image to a web page. Most elements require both opening and closing tags, but the tag is a self-closing tag.
Definition
< img/>
[image]
Term
The ____ attribute, which means alternative text, brings meaning to the images on our sites. The alt attribute can be added to the image tag just like the src attribute. The value of alt should be a description of the image.
Definition
alt
If an image fails to load on a web page, a user can mouse over the area originally intended for the image and read a brief description of the image. This is made possible by the description you provide in the alt attribute. Visually impaired users often browse the web with the aid of screen reading software. When you include the alt attribute, the screen reading software can read the image’s description out loud to the visually impaired user. The alt attribute also plays a role in Search Engine Optimization (SEO), because search engines cannot “see” the images on websites as they crawl the internet. Having descriptive alt attributes can improve the ranking of your site.
Term
Unlike the tag however, the ______ element requires an opening and a closing tag.
Definition
Term
To create HTML structure and content, we must add opening and closing ______ tags after declaring _________
Definition
< html >
Term
Now, let’s also give the browser some information about the page itself. We can do this by adding a _____ element.
Definition
Term
A browser’s tab displays the title specified in the ____ tag. The ____ tag is always inside of the ____.
Definition
< title > < title > < head >
Term
You can add links to a web page by adding an anchor element ___ and including the text of the link in between the opening and closing tags.
Definition
Term
href
Definition
This attribute stands for hyperlink reference and is used to link to a path, or the address to where a file is located (whether it is on your computer or another location).
Term
The ____ attribute specifies how a link should open.
Definition
Term
For a link to open in a new window, the target attribute requires a value of____
Definition
_blank
Term
An attribute, when used in modern browsers, will open new websites in a new tab.
Definition
The target="_blank"
Term
When making multi-page static websites, web developers often store HTML files in the
Definition
root directory, or a main folder where all the files for the project are stored.
Term
Contact
Definition
In this example, the tag is used with a relative path to link from the current HTML file to the contact.html file in the same folder. On the web page, Contact will appear as a link.
Term
A relative path is
Definition
a filename that shows the path to a local file
Term
local file
Definition
(a file on the same website, such as ./index.html) versus an absolute path (a full URL, like https://www.codecademy.com/learn/learn-html which is stored in a different folder).
Term
The ./ in ./index.html tells the browser to
Definition
look for the file in the current folder.
Term
HTML allows you to turn nearly any element into a link by wrapping that element with an anchor element. With this technique, it’s possible to turn images into links by simply wrapping the element with an
element.
Definition
< img src="#" alt="A red prickly pear fruit"/>
Term
In order to link to a target on the same page, we must give the target an id, like this:
Definition
This is the top of the page!
This is the bottom!
Term
#
Definition
In a non-interactive shell, or an interactive shell in which the interactive_comments option to the shopt builtin is enabled (see SHELL BUILTIN COMMANDS below), a word beginning with # causes that word and all remaining characters on that line to be ignored. An interactive shell without the interactive_comments option enabled does not allow comments. The interactive_comments option is on by default in interactive shells.
Term
As the code in an HTML file grows, it becomes increasingly difficult to keep track of how elements are related. Programmers use two tools to visualize the relationship between elements:
Definition
whitespace and indentation
Term
The second tool web developers use to make the structure of code easier to read is ___________. The spaces are inserted using the _______and _______bars on your keyboard.
Definition
indentation, space, tab
Term
Comments begin with _____ and end with ____. Any characters in between will be ignored by your browser.
Definition
Term
Including comments in your code is helpful for many reasons:
Definition
They help you (and others) understand your code if you decide to come back and review it at a much later date. They allow you to experiment with new code, without having to delete old code.
Term
Including comments in your code is helpful for many reasons:
Definition
They help you (and others) understand your code if you decide to come back and review it at a much later date. They allow you to experiment with new code, without having to delete old code.
Term
HTML Tags
Definition
Let’s review what you’ve learned this lesson:
The declaration should always be the first line of code in your HTML files. This lets the browser know what version of HTML to expect. The < html > element will contain all of your HTML code. Information about the web page, like the title, belongs within the < head > of the page. You can add a title to your web page by using the < title > element, inside of the head. A webpage’s title appears in a browser’s tab. Anchor tags () are used to link to internal pages, external pages or content on the same page. You can create sections on a webpage and jump to them using tags and adding ids to the elements you wish to jump to. Whitespace between HTML elements helps make code easier to read while not changing how elements appear in the browser. Indentation also helps make code easier to read. It makes parent-child relationships visible. Comments are written in HTML using the following syntax: .
Term
HTML Intro
Definition
Let’s review what you’ve learned so far:
HTML stands for HyperText Markup Language and is used to create the structure and content of a webpage.
Most HTML elements contain opening and closing tags with raw text or other HTML tags between them.
HTML elements can be nested inside other elements. The enclosed element is the child of the enclosing parent element.
Any visible content should be placed within the opening and closing < body > tags .
Headings and sub-headings, < h1 > to < h6 > tags, are used to enlarge text.
, < span > and < div > tags specify text or blocks.
The < em > and < strong > tags are used to emphasize text.
Line breaks are created with the < br > tag.
Ordered lists (< ol >) are numbered and unordered lists (< ul >) are bulleted.
Images (< img >) and videos (< video >) can be added by linking to an existing source.
Term
The _____element will contain all of the tabular data you plan on displaying
Definition
Term
In many programs that use tables, the table is already predefined for you, meaning that it contains the_________________________________________
Definition
rows, columns, and cells that will hold data.
Term
The first step in entering data into the table is to add rows using the table row element:
Definition
Term
Rows aren’t sufficient to add data to a table.
Definition
Each cell element must also be defined.
Term
In HTML, you can add data using the table data element:
Definition
Term
An example of element < td >
Definition
73
81
Term
To add titles to rows and columns, you can use the table heading element:
Definition
Term
Table heading example
Definition
Saturday
Sunday
Temperature
73
81
Term
Saturday
Sunday
Temperature
73
81
Definition
Note, also, the use of the scope attribute, which can take one of two values:
row - this value makes it clear that the heading is for a row. col - this value makes it clear that the heading is for a column.
Term
Data can span columns using the ________ attribute. The attributes accepts an integer (greater than or equal to 1) to denote the number of columns it spans across.
Definition
colspan
Monday
Tuesday
Wednesday
Out of Town
Back in Town
Term
Data can also span multiple rows using the ________attribute.
Definition
rowspan
Term
The rowspan attribute is used for data that
Definition
spans multiple rows (perhaps an event goes on for multiple hours on a certain day). It accepts an integer (greater than or equal to 1) to denote the number of rows it spans across.
Term
Long tables can be sectioned off using the table body element:
Definition
Term
example
Definition
Saturday
Sunday
Morning
Work
Relax
Afternoon
Evening
Dinner
Term
section off the table’s headings using the ______element.
Definition
Term
example
Definition
Saturday
Sunday
Morning
Work
Relax
Afternoon
Evening
Dinner
Term
The bottom part of a long table can also be sectioned off using the_____ element.
Definition
Term
example
Definition
Quarter
Revenue
Costs
Q1
$10M
$7.5M
Q2
$12M
$5M
Total
$22M
$12.5M
Term
HTML Tables Overview
Definition
The
element creates a table.
The
element adds rows to a table.
To add data to a row, you can use the
element.
Table headings clarify the meaning of data. Headings are added with the
element.
Table data can span columns using the colspan attribute.
Table data can span rows using the rowspan attribute.
Tables can be split into three main sections: a head, a body, and a footer.
A table’s head is created with the element.
A table’s body is created with the
element.
A table’s footer is created with the element.
All the CSS properties you learned about in this course can be applied to tables and their data.
Term
HTML Tables Overview
Definition
The
element creates a table.
The
element adds rows to a table.
To add data to a row, you can use the
element.
Table headings clarify the meaning of data. Headings are added with the
element.
Table data can span columns using the colspan attribute.
Table data can span rows using the rowspan attribute.
Tables can be split into three main sections: a head, a body, and a footer.
A table’s head is created with the element.
A table’s body is created with the
element.
A table’s footer is created with the element.
All the CSS properties you learned about in this course can be applied to tables and their data.
Term
the _____ attribute determines where the information is sent and the ______ attribute is assigned a HTTP verb that is included in the HTTP request. (Note: HTTP verbs like POST do not need to be capitalized for the request to work, but it’s done so out of convention. In the example above we could have written method="post" and it would still work)
Definition
action , method
Term
If we want to create an input field in our form , we’ll need the help of the ______element.
Definition
Term
For a user to properly identify an we use the appropriately named _____ element.
Definition
Term
To associate a < label > and an < input >, the < input > needs an ____ attribute.
Definition
id
Term
An ______ element will replace input text with another character like an asterisk (*) or a dot (•). The code below provides an example of how to create a password field:
Definition
< input type ="password" >
Term
To set the minimum and maximum values of the slider we assign values to the min and max attribute of the . We could also control how smooth and fluid the slider works by assigning the step attribute a value. Smaller step values will make the slider more fluidly, whereas larger step values will make the slider move more noticeably. Take a look at the code to create a slider:
Definition
form
/form
Term
In a form we would use the element and set ______.
Definition
type="checkbox"
Term
exmaple of Checkbox Input
Definition
form
Choose your pizza toppings:
/form
Term
An Example of an Radio Button Input
Definition
form
What is sum of 1 + 1?
/form
Term
An example of a Dropdown list
Definition
form
/form
Term
An example of a Datalist Input
Definition
form
/form
Term
Textarea element
Definition
Term
An example Textarea element
Definition
form
form
Term
The ______ element is used to create a bigger text field for users to write more text
Definition
Term
Submit Form
Definition
form
/form
Term
Forms Review
Definition
In this lesson we went over:
The purpose of a form is to allow users to input information and send it.
The form‘s action attribute determines where the form’s information goes.
The form‘s method attribute determines how the information is sent and processed.
To add fields for users to input information we use the < input > element and set the type attribute to a field of our choosing:
Setting type to "text" creates a single row field for text input.
Setting type to "password" creates a single row field that censors text input.
Setting type to "number" creates a single row field for number input.
Setting type to "range" creates a slider to select from a range of numbers.
Setting type to "checkbox" creates a single checkbox which can be paired with other checkboxes.
Setting type to "radio" creates a radio button that can be paired with other radio buttons.
Setting type to "list" will pair the with a < datalist > element.
Setting type to "submit" creates a submit button.
A < select > element is populated with < option > elements and renders a dropdown list selection.
A < datalist > element is populated with < option > elements and works with an < input > to search through choices.
A < textarea > element is a text input field that has a customizable area.
When a form is submitted, the name of the fields that accept input and the value of those fields are sent as name=value pairs.
Using the form element in conjunction with the other elements listed above allows us to create sites that take in consideration the wants and needs of our users. Take the opportunity to take what you’ve learned and apply it!
Term
Requiring an Input
Definition
form action="/example.html" method="POST"
/form
Term
Set a Minimum and Maximum
Definition
form action="/example.html" method="POST"
/form
Term
Checking Text Length
Definition
form action="/example.html" method="POST"
/form
Term
Matching a Pattern
Definition
form action="/example.html" method="POST"
/form
Term
An example Validation Review
Definition
Client-side validations happen in the browser before information is sent to a server. Adding the required attribute to an input related element will validate that the input field has information in it. Assigning a value to the min attribute of a number input element will validate an acceptable minimum value. Assigning a value to the max attribute of a number input element will validate an acceptable maximum value. Assigning a value to the minlength attribute of a text input element will validate an acceptable minimum number of characters. Assigning a value to the maxlength attribute of a text input element will validate an acceptable maximum number of characters. Assigning a regex to pattern matches the input to the provided regex. If validations on a form do not pass, the user gets a message explaining why and the form cannot be submitted.
Term
HTML5 introduces more descriptive HTML tags. These include ______ and others.
Definition
header, footer, nav, video, article, section
Term
These tags make your HTML easier to read, and also help with Search Engine Optimization (SEO) and accessibility.
Definition
header, footer, nav, video, article, section and other tags
Term
The main ____ tag helps search engines and other developers find the main content of your page.
Definition
HTML5
Term
The _____tag specifies the main content of a document. The content inside the ______ element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
Definition
Term
Note that _____elements are self-closing.
Definition
img
Term
All______elements must have an alt attribute. The text inside an alt attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.
Definition
img
Term
Ideally the ______ attribute should not contain special characters unless needed.
Definition
alt
Term
You can use _____ elements to link to content outside of your web page.
Definition
anchor
Term
_____elements need a destination web address called an ____ attribute. They also need ____. Here's an example:
Definition
anchor, href, anchor text, this links to freecodecamp.org,
Term
To create an internal link, you assign a link's ____attribute to a ______plus the value of the id attribute for the element that you want to internally link to, usually further down the page. You then need to add the same id attribute to the element you are linking to. An id is an attribute that uniquely describes an element.
Definition
href, hash symbol #,
Term
Contacts
...
Contacts
Definition
When users click the Contacts link, they'll be taken to the section of the webpage with the Contacts header element.
Term
the value ______ specifies to open the link in a new tab
Definition
"_blank"
Term
Here's a link to freecodecamp.org for you to follow.
Definition
Let's break down the example:
Normal text is wrapped in the p element:
Here's a ... for you to follow.
Next is the anchor element (which requires a closing tag ):
...
target is an anchor tag attribute that specifies where to open the link and the value "_blank" specifies to open the link in a new tab
href is an anchor tag attribute that contains the URL address of the link:
...
The text, "link to freecodecamp.org", within the anchor element called anchor text, will display a link to click:
link to freecodecamp.org
The final output of the example will look like this:
Here's a link to freecodecamp.org for you to follow.
Term
Replace the href attribute value with a ______, also known as a hash symbol, to create a dead link.
Definition
#
Term
src=
Definition
A variable may be assigned to by a statement of the form
name=[value]
If value is not given, the variable is assigned the null string. All values undergo tilde expansion, parameter and variable expansion, command substitution, arithmetic expansion, and quote removal (see EXPANSION below). If the variable has its integer attribute set, then value is evaluated as an arithmetic expression even if the $((...)) expansion is not used (see Arithmetic Expansion below). Word splitting is not performed, with the exception of "$@" as explained below under Special Parameters. Pathname expansion is not performed. Assignment statements may also appear as arguments to the alias, declare, typeset, export, readonly, and local builtin commands.
In the context where an assignment statement is assigning a value to a shell variable or array index, the += operator can be used to append to or add to the variable's previous value. When += is applied to a variable for which the integer attribute has been set, value is evaluated as an arithmetic expression and added to the variable's current value, which is also evaluated. When += is applied to an array variable using compound assignment (see Arrays below), the variable's value is not unset (as it is when using =), and new values are appended to the array beginning at one greater than the array's maximum index (for indexed arrays) or added as additional key-value pairs in an associative array. When applied to a string-valued variable, value is expanded and appended to the variable's value.
Term
An example of how to turn your image into a link
Definition
[image]
Term
Create a Bulleted Unordered List
Definition
milk
cheese
Term
The word semantic means
Definition
“relating to meaning,” so semantic elements provide information about the content between the opening and closing tags.
Term
Why use Semantic HTML?
Definition
Accessibility: Semantic HTML makes webpages accessible for mobile devices and for people with disabilities as well. This is because screen readers and browsers are able to interpret the code better.
SEO: It improves the website SEO, or Search Engine Optimization, which is the process of increasing the number of people that visit your webpage. With better SEO, search engines are better able to identify the content of your website and weight the most important content appropriately.
Easy to Understand: Semantic HTML also makes the website’s source code easier to read for other web developers.
Term
A < header >
Definition
is a container usually for either navigational links or introductory content containing < h1 > to < h6 > headings.
Term
A
Definition
is used to define a block of navigation links such as menus and tables of contents. It is important to note that
Term
The element
Definition
is used to encapsulate the dominant content within a webpage.
Term
The content at the bottom of the subject information is known as the footer, indicated by
Definition
the
Term
The footer contains information such as:
Definition
Contact information Copyright information Terms of use Site Map Reference to top of page links
Term
defines
Definition
elements in a document, such as chapters, headings, or any other area of the document with the same theme.
Term
For example, content with the same theme such as articles about cricket can go under a single
Definition
Term
example of
Definition
Fun Facts About Cricket
Term
The element
Definition
holds content that makes sense on its own.
Term
the tag can.......
Definition
hold content such as articles, blogs, comments, magazines, etc. The tag would help someone using a screen reader understand where the article content (that might contain a combination of text, images, audio, etc.) begins and ends.
Term
an example of an tag
Definition
Fun Facts About Cricket
A single match of cricket can last up to 15 days.
Term
The
Definition
element is used to mark additional information that can enhance another element but isn’t required in order to understand the main content.
Term
This element can be used alongside other elements such as or .
Definition
Term
Some common uses of the element are for:
Bibliographies Endnotes Comments Pull quotes Editorial sidebars Additional information
Definition
Bibliographies Endnotes Comments Pull quotes Editorial sidebars Additional information
Term
is an element
Definition
used to encapsulate media such as an image, illustration, diagram, code snippet, etc, which is referenced in the main flow of the document.
Term
example
Definition
[image]
Term
Definition
is an element used to describe the media in the tag.
Term
caption
Definition
[image]
This picture shows characters from Overwatch.
Term
The
Definition
element is used to embed audio content into a document. Like
Term
There are many attributes for
Definition
controls: automatically displays the audio controls into the browser such as play and mute.
src: specifies the URL of the audio file.
Term
example
Definition
Term
using a
Definition
we can add videos to our website
Term
attributes that can alter a video playback include:
Definition
controls: When added in, a play/pause button will be added onto the video along with volume control and a fullscreen option. autoplay: The attribute which results in a video automatically playing as soon as the page is loaded. loop: This attribute results in the video continuously playing on repeat.
Term
example of
Definition
Term
Another tag that can be used to incorporate media content into a page is the tag, which can embed any media content including videos, audio files, and gifs from an external source.
Definition
embed
Term
example of embed tag
Definition
embed src="download.gif"/
Term
SEMANTIC HTML Review Congrats on completing this lesson on Semantic HTML! Now that you know the benefits of Semantic HTML and how to use it, you can incorporate semantic elements into your website to make it more accessible and to make the code easier to read.
Let’s review some of the topics we covered throughout the lesson:
Definition
Semantic HTML introduces meaning to a page through specific elements that provide context as to what is in between the tags.
Semantic HTML is a modern standard and makes a website accessible for people who use screen readers to translate the webpage and improves your website’s SEO.
,
Term
he Web Structure
The ability to code using HTML is essential for any web professional. Acquiring this skill should be the starting point for anyone who is learning how to create content for the web.
Definition
Modern Web Design HTML: Structure CSS: Presentation JavaScript: Behavior
