HTML

placeholder Attribute

A Web form control attribute that provides a hint about the type of data accepted in a data field. This attribute applies when the value of the type attribute is text, search, tel, url, or email. <input type="text" name="search" class="form-control" placeholder="Search movies">

markup language

A computer language that defines the structure and presentation of raw text.

Root Directory

A main folder where all the files for the project are stored. When projects are stored in the same main folder, we can link web pages together using a relative path.

alt Attribute

An <img> element can have alternative text via the "alt" attribute. The alternative text will be displayed if an image fails to render due to an incorrect URL, if the image format is not supported by the browser, if the image is blocked from being displayed, or if the image has not been received from the URL. The text will be read aloud if screen reading software is used and helps support visually impaired users by providing a text descriptor for the image content on a webpage. Furthermore, this attribute plays a role in Search Engine Optimization (SEO), because they can't see the image but can read the alt description having descriptions could improve the ranking of the site. <img src="path/to/image" alt="text describing image" />

step Attribute

An attribute for <input> that defines the amount that the value in a spin box increases or decreases with each click of the spin arrow.

<input>: Radio Button Type

HTML <input> elements can be given a type="radio" attribute that renders a single radio button. Multiple radio buttons of a related topic are given the same name attribute value. Only a single option can be chosen from a group of radio buttons. The value of the selected/checked <input>'s name and value attribute of this element are sent as a key-value pair when the form is submitted. <input name="delivery_option" type="radio" value="pickup" /> <input name="delivery_option" type="radio" value="delivery" />

Submittable Input

HTML <input> elements can have a type attribute set to submit, by adding type="submit". With this attribute included, a submit button will be rendered and, by default, will submit the <form> and execute its action. The text of a submit button is set to Submit by default but can also be changed by modifying the value attribute.

<input>: Text Type

HTML <input> elements can support text input by setting the attribute type="text". This renders a single row input field that users can type text inside. The value of the <input>'s name and value attribute of the element are sent as a key-value pair when the form is submitted. <input type="text" name="username">

Attribute Name and Values

HTML attributes consist of a name and a value using the following syntax: name="value" and can be added to the opening tag of an HTML element to configure or change the behavior of the element.

<h1>-<h6> Heading Elements

HTML can use six different levels of heading elements. The heading elements are ordered from the highest level <h1> to the lowest level <h6>.

Indentation

HTML code should be formatted such that the indentation level of text increases once for each level of nesting. It is a common convention to use two or four spaces per level of nesting. <div> <h1>Heading</h1> <ul> <li>Item 1</li> <li>Item 2</li> </ul> </div>

HTML Form Validators

HTML forms allow you to specify different kinds of validation for your input fields to make sure that data is entered correctly before being submitted. HTML supports a number of different validators, including things like minimum value, minimum/maximum length, etc. The validators are specified as attributes on the input field.

HTML Structure

HTML is organized into a family tree structure. HTML elements can have parents, grandparents, siblings, children, grandchildren, etc.

href

Hyperlink Reference; an attribute often found within the <a> anchor element. It is used to link to a path, or the address to where a file is located. These paths are often URLs. This attribute specifies the location (URL) of a resource, that an anchor element points to, or the location of a linked resource, like a stylesheet.

HTML

Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages. It is used to give content to a web page and instructs web browsers on how to structure that content.

Comments

In HTML, comments can be added between an opening "<!--" and closing "-->". Content inside of comments will not be rendered by browsers, and are usually used to describe a part of code or provide other details. Comments can span single or multiple lines. <!-- Main site content --> <div>Content</div> <!-- Comments can be multiple line long. --> It's a good idea to leave comments where any piece of code might not be obvious to yourself or anyone who might be reading your code.

min Attribute

In HTML, input fields with type number have an attribute called min that specifies the minimum value that can be entered into the field. The code block provided shows an input number field that accepts a number with minimum value 1. <input type="number" name="rating" min="1" max="10">

Submitting a Form

Once we have collected information in a form we can send that information somewhere else by using the action and method attribute. The action attribute tells the form to send the information. A URL is assigned that determines the recipient of the information. The method attribute tells the form what to do with that information once it's sent. An HTTP verb is assigned to the method attribute that determines the action to be performed. <form action="/index3.html" method="PUT"></form>

SEO

Search Engine Optimization. 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.

maxlength Attribute

Specifies the maximum number of characters for an input field. The code block shows an input text field that accepts text that has a maximum length of 140 characters. <input type="text" name="tweet" maxlength="140">

max Attribute

Specifies the maximum value for an input field. The code block shows an input number field that is set to have a maximum value of 20. Any value larger than 20 will mark the input field as having an error. <input type="number" max="20">

Hypertext

Text displayed on a computer or device that provides access to other text through links, also known as "hyperlinks."

<target> Target Attribute

The "target" attribute on an <a> anchor element specifies where a hyperlink should be opened. A "target" value of "_blank" will tell the browser to open the hyperlink in a new tab in modern browsers, or in a new window in older browsers or if the browser has had settings changed to open hyperlinks in a new window. Other target values are _self, _parent, and _top. <a href="https://www.google.com" target="_blank">This anchor element links to google and will open in a new tab or window.</a>

method="post"

The <form> element attribute and value specify that the browser will send data to the Web server location specified by a URL. Used for sensitive data. Will not display info in the address/URL bar.

<title> Title Element

The <title> element contains a text that defines the title of an HTML document. The title is displayed in the browser's title bar or tab in which the HTML page is displayed. The <title> element can only be contained inside a document's <head> element. <!DOCTYPE html> <html> <head> <title>Title of the HTML page</title> </head> </html> According to w3, you should keep your title under 64 characters. Titles help determine popularity of the web page and how highly ranked it could be in a google search.

Link to a Different Part of the Page #

The anchor element <a> can create hyperlinks to different parts of the same HTML document using the href attribute to point to the desired location with "#" followed by the "id" of the element to link to. <div> <p id="id-of-element-to-link-to">A different part of the page!</p> </div> <a href="#id-of-element-to-link-to">Take me to a different part of the page</a>

Document Type Declaration

The document type declaration <!DOCTYPE html> is required as the first line of an HTML document. The doctype declaration is an instruction to the browser about what type of document to expect and which version of HTML is being used, in this case it's HTML5.

scope

The scope attribute is used by screen readers to enhance accessibility for visually impaired users. In addition to the row and col values shown in this exercise, the scope attribute can also have the following values: 1) rowgroup: used for table headings that group multiple rows; 2) colgroup: used for table headings that group multiple columns; 3) auto: the default value. From the example, the scope attribute used in tables which can take on one of two values: <th scope="col">Saturday</th> ... <th scope="row">Temperature</th> 1) row - makes it clear that the heading is for a row; 2) col - makes it clear that the heading is for a column.

HTML Tag

The syntax for a single HTML tag is an opening angle bracket < followed by the element name and a closing angle bracket > .

File Path

URL paths in HTML can be absolute paths, like a full URL, for example: https://developer.mozilla.org/en-US/docs/Learn or a relative file path that links to a local file in the same folder or on the same server, for example: ./style.css. Relative file paths begin with ./ followed by a path to the file. ./ tells the browser to look for the file path from the current folder.

URL

Uniform Resource Locator - the web address or local address where a file is stored. It can be an HTML page, image, stylesheet, etc. They can be absolute (full) or relative. An absolute URL contains the domain name of the resource, like www.codecademy.com and the path to the exact file, like /learn. Altogether an absolute URL would look like this: www.codecademy.com/learn. A relative URL is a URL that is called from inside the current document and requires the exact path to the file but not the domain name. For example, a URL that links to an about.html page inside the same project folder as an index.html page would look like this: about.html.

Whitespace

Whitespace, such as line breaks, added to an HTML document between block-level elements will generally be ignored by the browser and are not added to increase spacing on the rendered HTML page. Rather, whitespace is added for organization and easier reading of the HTML document itself.

Relative Path

a filename that shows the path to a local file (a file on the same website, such as ./index.html). The ./ tells the browser to look for the file in the current folder.

Absolute Path

a full URL, like https://www.codecademy.com/learn/learn-html which is stored in a different folder from the main project folder, or root directory (?)

<tbody> Table Body Element

a semantic element that will contain all table data other than table heading and table footer content. If used, <tbody> will contain all table row <tr> elements, and indicates that <tr> elements make up the body of the table. <table> cannot have both <tbody> and <tr> as direct children. Allows for enhanced screen reading. <table> <tbody> <tr> <td>row 1</td> </tr> <tr> <td>row 2</td> </tr> <tr> <td>row 3</td> </tr> </tbody> </table>

<input>: Range Type

a slider can be created using type="range" attribute on an HTML input element. The range slider will act as a selector between a minimum and a maximum value. These values are set using the min and max attributes respectively. The slider can be adjusted to move in different steps or increments using the step attribute. The range slider is meant to act more as a visual widget to adjust between 2 values, where the relative position is important, but the precise value is not as important. An example of this can be adjusting the volume level of an application. <input type="range" name="movie-rating" min="0" max="10" step="0.1">

Closing Tag

an HTML closing tag is used to denote the end of an HTML element. The syntax for a closing tag is a left angle bracket "<" followed by a forward slash "/" then the element name and a right angle bracket ">" to close.

Child

an element contained inside of another element. The child element is said to be nested inside of the parent. For example, title is nested inside of head.

<hr>

an element that is used to place a break between paragraph- level elements. It is displayed as a horizontal line.

<span> Span Element

an inline container for text and can be used to group text for styling purposes. However, as <span> is a generic container to separate pieces of text from a larger body of text, its use should be avoided if a more semantic element is available. <p><span>This text</span> may be styled differently than the surrounding text.</p>

<td> Table Data Element

can be nested inside a table row element, <tr>, to add a cell of data to a table <table> <tr> <td>cell one data</td> <td>cell two data</td> </tr> </table>

<header>

container usually for either navigational links or introductory content containing <h1> to <h6> headings

<p> Paragraph Element

contains and displays a block of text.

<head> Head Element

contains general information about an HTML page that isn't displayed on the page itself. This information is called "metadata" and includes things like the title of the HTML document and links to stylesheets.

<ol> Ordered List Element

creates a list of items in sequential order. Each list item appears numbered by default.

<input> range Type

creates a slider. You'll need to add a min, a max, and a step attribute with this. <form> <label for="volume">Volume Control</label> <input id="volume" name="volume" type="range" min="0" max="100" step="1"> </form>

<section>

defines elements in a document, such as chapters, headings, or any other area of the document with the same theme. For example, content with the same theme such as articles about cricket can go under a single <section>.

<thead> Table Head Element

defines the headings of table columns encapsulated in table rows. Allows for enhanced screen reading. The <thead> information can be shown on each page for printing. Along with a bit of CSS, the <thead> information can be seen while scrolling though long tables. <table> <thead> <tr> <th>heading 1</th> <th>heading 2</th> </tr> </thead> <tbody> <tr> <td>col 1</td> <td>col 2</td> </tr> </tbody> </table>

<img> Image Element

embed images in documents. The "src" attribute contains the image URL and is mandatory. <img> is an 'empty element' meaning it should not have a closing tag.

<video> Video Element

embeds a media player for video playback. The "src" attribute will contain the URL to the video. Then, adding width="#" and height="#" sets the size of the video as it'll appear on the webpage. Adding the "controls" attribute will display video controls in the media player. NOTE: The content inside the opening and closing tag is shown as a fallback in browsers that don't support the element. Add the text 'Video not supported' between the opening and closing so it appears when the video is not showing in the browser.

<em> Emphasis Element

emphasizes text and browsers will usually italicize the emphasized text by default.

<input> name Attribute

for a form to send data, it needs to be able to put it into key-value pairs. This is acheived by setting the name attribute of the input element. The name will become the key and the value of the input will become the value the form submits corresponding to the key. It's important to remember that the name is not the same as the ID in terms of form submission. The ID and the name of the input may be the same, but the value will only be submitted if the name attribute is specified. In the code example. the first input will be submitted by the form, but the second one will not. 1)<input name="ussername" id="username" /> 2)<input id="address" />

class Attribute

global attribute that has a list of classes pertaining to an element. Usually used with <section>

server validation

happens when data is sent to another machine (typically another server) for validation. An example is the use of a login page. The form on the login page accepts username and password input, then sends the data to a server that checks that the pair matches up correctly.

<strong> Strong Element

highlights important, serious, or urgent text and browsers will normally render this highlighted text in bold by default. <p>This is <strong>important</strong> text!</p>

Unique ID Attributes

in HTML, specific and unique "id" attributes can be assigned to different elements in order to differentiate between them. When needed, the "id" value can be called upon by CSS and JavaScript to manipulate, format, and perform specific instructions on that element and that element only. Valid "id" attributes should begin with a letter and should only contain letters (a-z), digits (0-9), hyphens (-), underscores ( _ ), and periods ( . ).

<table> Table Element

in HTML, the <table> element has content that is used to represent a two-dimensional table made of rows and columns. <table> <!-- rows and columns will go here --> </table>

required Attribute

in HTML, this attribute specifies that the field must include a value for a given input field. The example code block shows an input field that is required. The attribute can be written as required="true" or simply required. <input type="password" name="password" required>

#

in html: in an anchor href [<a href="#top"] the # looks for an id set to a corresponding value [<div id="#top"]. This allows a user to click the link and jump to another section of the web page.

Metadata

information about the page that isn't displayed directly on the web page. (Data about data.) The browser often uses metadata to enhance the user experience in some way. It can be used by other software (web crawlers, search engines, browsers, etc.) to process, encode, extract, or index all sorts of interesting information (geographic coordinates, calendar events, contact info, etc.) It also improves SEO (Search Engine Optimization).

colspan Attribute

on a table header <th> or table data <td> element indicates how many columns that particular cell should span within the table. The colspan value is set to 1 by default and will take any positive integer between 1 and 1000. <table> <tr> <th>row 1:</th> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr> <th>row 2:</th> <td colspan="2">col 1 (will span 2 columns)</td> <td>col 2</td> <td>col 3</td> </tr> </table>

<label> Element

only used in forms, this tag provides identification for a specific <input> based on matching values of the <input>'s id attribute and the <label>'s for attribute. By default, clicking on the <label> will focus the field of the related <input>. The example code will create a text input field with the label text "Password:" next to it. Clicking on "Password:" on the page will focus the field for the related <input>. <label for="password">Password:</label> <input type="text" id="password" name="password">

HTML Element

piece of content in an HTML document and uses the following syntax: opening tag + content + closing tag. In the following example: "<p>" is the opening tag "Hello World!" is the content "</p>" is the closing tag <p>Hello World!"</p>

A/B testing

process of evaluating one version against another version of the same web page

method="get"

receive information from the server. Will display the info in the URL car which means the page can be bookmarked (unlike POST). GET is useful for searching boxes. (?)

<body> Body Element

represents the content of an HTML document. Content inside <body> tags are rendered on the web browsers. NOTE: There con only be one <body> element in a document.

rowspan Attribute

similar to colspan, the rowspan attribute on a table header or table data element indicates how many rows that particular cell should span within the table. The rowspan value is set to 1 by default and will take any positive integer up to 65534. <table> <tr> <th>row 1:</th> <td>col 1</td> <td>col 2</td> </tr> <tr> <th rowspan="2">row 2 (this row will span 2 rows):</th> <td>col 1</td> <td>col 2</td> </tr> <tr> <td>col 1</td> <td>col 2</td> </tr> <tr> <th>row 3:</th> <td>col 1</td> <td>col 2</td> </tr> </table>

<li> List Item Element

the <li> list item element creates list items inside: 1) Ordered lists <ol> 2) Unordered lists <ul>

<input> Password Type

the HTML <input> element can have the attribute type="password" that renders a single row input field which allows the user to type censored text inside the field. It is used to type in sensitive information. The value of this <input>'s name and value (actual value and not the censored version) attribute of this element are sent as a key-value pair when the form is submitted. The code block shows an example of the fields for a basic login form - the username and password fields. <input type="text" name="username" /> <input type="password" name="password" />

Validation (form)

the concept of checking user provided data against the required data.

<footer>

the content at the bottom of the subject information; therefore separate from <main>. It contains info like: contact info, copyright info, terms of use, site map, reference to top of page links.

Element Content

the content of an HTML element is the information between the opening and closing tags of an element.

Hierarchy

the relationship between elements and their ancestor and descendent elements. (great-grandchildren nest inside of grandchildren which nest inside of children which nest inside of the parent).

<html> HTML Element

the root of an HTML document. This should be added after the "!DOCTYPE" declaration. All content/structure for an HTML document should be contained between the opening and closing <html> tags.

regular expression (regex)

these are a sequence of characters that make up a search pattern. A way to validate a string using formal language by looking for string patterns

<input>: Number Type

these input fields allow the user to enter only numbers and a few special characters inside the field. The example code block shows an input with a type of number and a name of balance. When the input field is part of a form, the form will receive a key-value pair with the format "name: value" after form submission. <input type="number" name="balance" />

<input> checkbox Type

this input type is used to present multiple options to users to select from while allowing them to choose one or more of the options - unlike the radio Type. <form> <p>Choose your pizza toppings:</p> <label for="cheese">Extra cheese</label> <input id="cheese" name="topping" type="checkbox" value="cheese"> <br> <label for="pepperoni">Pepperoni</label> <input id="pepperoni" name="topping" type="checkbox" value="pepperoni"> <br> <label for="anchovy">Achovy</label> <input id="anchovy" name="topping" type="chechbox" value="anchovy"> </form>

minilength Attribute

to check that the input text has a minimum length, add the minilength attribute with the character count. The example code block shows an example of a text field that has a minimum length of 6. <input type="text" name="username" minilength="6" />

<div> Div Element

used as a container that divides an HTML document into sections and is short for "division". <div> elements can contain 'flow content' such as headings, paragraphs, links, images, etc. They are very useful when we want to apply custom styles to our HTML elements.

client-side validation

used if we want to check the data on the browser (the client). It saves us time from having to send info to the server and wait for the server and wait for the server to respond. This validation occurs before data is sent to the server.

<tr> Table Row Element

used to add rows to a table before adding table data and table headings. <table> <tr> ... </tr> </table>

<th> Table Heading Element

used to add titles to rows and columns of a table and must be enclosed in a table row element, <tr> <table> <tr> <th>column one</th> <th>column two</th> </tr> <tr> <td>1</td> <td>2</td> </tr> </table>

<form> Element

used to collect and send information to an external source. It can contain various input elements. When a user submits the form, information in these input elements is passed to the source which is named in the action attribute of the form. <form method="post" action="http://server1"> Enter your name: <input type="text" name="fname"> <br> Enter your age: <input type="text" name="age"> <br> <input type="submit" value="Submit"> </form>

<select> Element

used to create a dropdown list. A list of choices for the dropdown list can be created using one or more <option> elements. By default, only one <option> can be selected at a time. The value of the selected <select>'s name and the <option>'s value attribute are sent as a key-value pair when the form is submitted. <select name="rental-option"> <option value="small">Small</option> <option value="family">Family Sedan</option> <option value="lux">Luxury</option> </select>

<ul> Unordered List Element

used to create a list of items in no particular order. Each individual list item will have a bullet point by default.

<a> Anchor Element

used to create hyperlinks in an HTML document. The hyperlinks can point to other webpages, files on the same server, a location on the same page, or any other URL via the hyperlink reference attribute, href. The href determines the location the anchor element points to. text link: <a href="http://www.codecademy.com">Visit this site</a> image link: <a href="http://www.codecademy.com"><img src="logo.jpg">Click this image</a> We do not want to wrap <li> elements in <a> since it would disrupt the function of <ul> and <ol>.

<nav>

used to define a block of navigation links such as menus and tables of contents. It can be used inside of <header> or on its own.

<main>

used to encapsulate the dominant content within a webpage. It is separate from <footer> and <nav> since these elements don't contain the principle content.

<input> Element

used to render a variety of input fields on a web page including text fields, checkboxes, buttons, etc. <input> elements have a type attribute that determines how it gets rendered to a page. The example code block will create a text input field and a checkbox input field on a webpage. <label for="fname">First name:</label> <input type="text" name="fname" id="fname"><br> <input type="checkbox" name="vehicle" value="Bike">I own a bike

<textarea> Element

used when creating a text-box for multi-line input (e.g. a comment section). The element supports the rows and cols attributes which determine the height and width, respectively, of the element. When rendered by the browser, textarea fields can be stretched/shrunk in size by the user, but the rows and cols attributes determine the initial size. Unlike the input element, the <textarea> element has both opening and closing tags. The value of the element is the content in between these tags (much like a <p> element). The code block shows a <textarea> of size 10x30 and with a name of "comment". <textarea rows="10" cols="30" name="comment"></textarea>

pattern Attribute

uses a regular expression to match against (or validate) the value of the <input>, when the form is submitted. aka regex. <form action="/action_page.php">Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> <input type="submit"> </form>

<tfoot> Table Footer Element

uses table rows to give footer content or to summarize content at the end of a table - examples are sums, differences, and other data results. Allows for enhanced screen reading. The <tfoot> information can be shown on each page for printing. Along with a bit of CSS, the <tfoot> information can be seen while scrolling though long tables. <table> <thead> <tr> <th>heading 1</th> <th>heading 2</th> </tr> </thead> <tbody> <tr> <td>col 1</td> <td>col 2</td> </tr> </tbody> <tfoot> <tr> <td>summary of col 1</td> <td>summary of col 2</td> </tr> </tfoot> </table>

HTML Attributes

values added to the opening tag of an element to configure the element or change the element's default behavior. In the provided example, we are giving the <p> element a unique identifier using the "id" attribute and changing the color of the default text using the "style" attribute. <p id="my-paragraph" style="color: green;">Here's some text for a paragraph that is being altered by HTML attributes</p>

<input>: Checkbox Type

when using an HTML input element, the type="checkbox" attribute will render a single checkbox item. To create a group of checkboxes related to the same topic, they should all use the same name attribute. Since it's a checkbox, multiple checkboxes can be selected for the same topic. <input type="checkbox" name="breakfast" value="bacon">Bacon <br> <input type="checkbox" name="breakfast" value="eggs">Eggs <br> <input type="checkbox" name="breakfast" value="pancakes">Pancakes <br>

<datalist> Element

when using an HTML input, a basic search/autocomplete functionality can be achieved by pairing an <input> with a <datalist>. To pair a <input> with a <datalist> the <input>'s list value must match the value of the id of the <datalist>. The datalist element is used to store a list of <option>'s. The list of data is shown as a dropdown on an input field when a user clicks on the input field. As the user starts typing, the list will be updated to show elements that best match what has been typed into the input field. The actual list items are specified as multiple option elements nested inside the datalist. datalist's are ideal when providing users a list of pre-defined options, but to also allow them to write alternative inputs as well. It is good to use this instead of a dropdown list when there are many options to choose from. <input list="ide"> <datalist id="ide"> <option value="Visual Studio Code" /> <option value="Atom" /> <option value="Sublime Text" /> </datalist>

<br> Line Break Element

will create a line break in text and is especially useful where a division of text is required, like in a postal address. The line break element requires only an opening tag and must not have a closing tag.

action Attribute

within a form element, this attribute determines where the information is sent

method Attribute

within a form element, this attribute is assigned an HTTP verb that is included in the HTTP request.