HTML
<figure>
<figure> is an element used to encapsulate media such as an image, illustration, diagram, code snippet, etc, which is referenced in the main flow of the document.
<section>
<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>. A website's home page could be split into sections for the introduction, news items, and contact information.
<span>
<span> contains short pieces of text or other HTML. They are used to separate small pieces of content that are on the same line as other content. It's best to use a <span> element when you want to target a specific piece of content that is inline, or on the same line as other text.
<header>
A <header> is a container usually for either navigational links or introductory content containing <h1> to <h6> headings.
<nav>
A <nav> is used to define a block of navigation links such as menus and tables of contents. It is important to note that <nav> can be used inside of the <header> element but can also be used on its own.
<title>
A browser's tab displays the title specified in the <title> tag. The <title> tag is always inside of the <head>.
type="password"
An <input type ="password"> element will replace input text with another character like an asterisk (*) or a dot (•). Even though the password field obscures the text of the password, when the form is submitted, the value of the text is sent.
min and max
Another built-in validation we can use is to assign a minimum or maximum value for a number field, e.g. <input type="number"> and <input type="range">. To set a minimum acceptable value, we use the min attribute and assign a value. On the flip side, to set a maximum acceptable value, we assign the max attribute a value.
type="range"
Another option we could use is setting type to "range" which creates a slider. To set the minimum and maximum values of the slider we assign values to the min and max attribute of the <input>. 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.
<table>
Before displaying data, we must first create the table that will contain the data by using the <table> element. The <table> element will contain all of the tabular data we plan on displaying.
type="number"
By setting type="number" for an <input> we can restrict what users type into the input field to just numbers (and a few special characters like -, +, and .). We can also provide a step attribute which creates arrows inside the input field to increase or decrease by the value of the step attribute.
rowspan
Data can also span multiple rows using the rowspan attribute. The rowspan attribute is used for data that 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.
colspan
Data can span columns using the colspan attribute. The attributes accepts an integer (greater than or equal to 1) to denote the number of columns it spans across.
<datalist>
Even if we have an organized dropdown list, if the list has a lot of options, it could be tedious for users to scroll through the entire list to locate one option. That's where using the <datalist> element comes in handy. The <datalist> is used with an <input type="text"> element. The <input> creates a text field that users can type into and filter options from the <datalist>. In the associated <input> element, users can type in the input field to search for a particular option. If none of the <option>s match, the user can still use what they typed in. When the form is submitted, the value of the <input>'s name and the value of the option selected, or what the user typed in, is sent as a pair.
<label>
For a user to properly identify an <input> we use the appropriately named <label> element. The <label> element has an opening and closing tag and displays text that is written between the opening and closing tags. To associate a <label> and an <input>, the <input> needs an id attribute. We then assign the for attribute of the <label> element with the value of the id attribute of <input>
pattern
For cases when we want user input to follow specific guidelines, we use the pattern attribute and assign it a regular expression, or regex.
<!DOCTYPE html>
HTML files require certain elements to set up the document properly. We can let web browsers know that we are using HTML by starting our document with a document type declaration. This declaration is an instruction, and it must be the first line of code in your HTML document. It tells the browser what type of document to expect, along with what version of HTML is being used in the document. For now, the browser will correctly assume that the html in <!DOCTYPE html> is referring to HTML5, as it is the current standard. In the future, however, a new standard will override HTML5. To make sure your document is forever interpreted correctly, always include <!DOCTYPE html> at the very beginning of your HTML documents.
<br>
HTML's line break element. The line break element is unique because it is only composed of a starting tag. You can use it anywhere within your HTML code and a line break will be shown in the browser.
<input>
If we want to create an input field in our <form>, we'll need the help of the <input> element. The <input> element has a type attribute which determines how it renders on the web page and what kind of data it can accept.
attributes
If we want to expand an element's tag, we can do so using an attribute. Attributes are content added to the opening tag of an element and can be used in several different ways, from providing information to changing styling. Attributes are made up of the following two parts: - The name of the attribute - The value of the attribute
headings
In HTML, there are six different headings, or heading elements. Headings can be used for a variety of purposes, like titling sections, articles, or other forms of content. The following is the list of heading elements available in HTML. They are ordered from largest to smallest in size: <h1> — used for main headings. All other smaller headings are used for subheadings. <h2> <h3> <h4> <h5> <h6>
<ul>
In HTML, you can use an unordered list tag (<ul>) to create a list of items in no particular order. An unordered list outlines individual list items with a bullet point. The <ul> element should not hold raw text and won't automatically format raw text into an unordered list of items.
linking to same page
In order to link to a target on the same page, we must give the target an id. An id should be descriptive to make it easier to remember the purpose of a link. The target link is a string containing the # character and the target element's id.
<li>
Individual list items must be added to the unordered list using the <li> tag. The <li> or list item tag is used to describe an item in a list.
<figcaption>
It's possible to add a caption to the image by using <figcaption>. <figcaption> is an element used to describe the media in the <figure> tag. Usually, <figcaption> will go inside <figure>.
<video>
Like the <img> tag, the <video> tag requires a src attribute with a link to the video source. Unlike the <img> tag however, the <video> element requires an opening and a closing tag. The source can be a video file that is hosted alongside your webpage, or a URL that points to a video file hosted on another webpage. After the src attribute, the width and height attributes are used to set the size of the video displayed in the browser. The controls attribute instructs the browser to include basic video controls: pause, play and skip. Text between the opening and closing video tags can be displayed if the browser is unable to load the video. Some attributes that can alter a video playback include: - 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.
<tbody>
Long tables can be sectioned off using the table body element: <tbody>. The <tbody> element should contain all of the table's data, excluding the table headings
id
One commonly used attribute is the id. We can use the id attribute to specify different content (such as <div>s) and is really helpful when you use an element more than once.
<body>
One of the key HTML elements we use to build a webpage is the body element. Only content inside the opening and closing body tags can be displayed to the screen. Once the file has a body, many different types of content - including text, images, and buttons - can be added to the body.
<div>
One of the most popular elements in HTML is the <div> element. <div> is short for "division" or a container that divides the page into sections. These sections are very useful for grouping elements in your HTML together. <div>s don't inherently have a visual representation, but they are very useful when we want to apply custom styles to our HTML elements. <div>s allow us to group HTML elements to apply the same styles for all HTML elements inside. We can also style the <div> element as a whole. <div>s can contain any text or other HTML elements, such as links, images, or videos.
<ol>
Ordered lists (<ol>) 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. You can create the ordered list with the <ol> tag and then add individual list items to the list using <li> tags.
<p>
Paragraphs (<p>) contain a block of plain text.
type="radio"
Radio buttons are used for cases where we want to present multiple options and only allow for one selection — like asking users if they agree or disagree with the terms and conditions.
<td>
Rows aren't sufficient to add data to a table. Each cell element must also be defined. In HTML, you can add data using the table data element: <td>.
required
Sometimes we have fields in our <form>s which are not optional, i.e. there must be information provided before we can submit it. To enforce this rule, we can add the required attribute to an <input> element.
<article>
The <article> element holds content that makes sense on its own. <article> can hold content such as articles, blogs, comments, magazines, etc. An <article> 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.
<aside>
The <aside> element is used to mark additional information that can enhance another element but isn't required in order to understand the main content. This element can be used alongside other elements such as <article> or <section>. Some common uses of the <aside> element are for: - Bibliographies - Endnotes - Comments - Pull quotes - Editorial sidebars - Additional information
<audio>
The <audio> element is used to embed audio content into a document. Like <video>, <audio> uses src to link the audio source. But, a <source> element needs to encapsulate the audio link. We can specify the type by using the type attribute to name what kind of audio it is. Although not always necessary, it's recommended that we state the type of audio as it helps the browser identify it more easily and determine if that type of audio file is supported by the browser. The controls attiribute automatically displays the audio controls into the browser such as play and mute.
<em>
The <em> tag emphasizes text. The <em> tag will generally render as italic emphasis.
<form>
The <form> element is a great tool for collecting information, but then we need to send that information somewhere else for processing. We need to supply the <form> element with both the location of where the <form>'s information goes and what HTTP request to make. <form action="/example.html" method="POST"></form>
<head>
The <head> element contains the metadata for a web page. Metadata is information about the page that isn't displayed directly on the web page. Unlike the information inside of the <body> tag, the metadata in the head is information about the page itself. The opening and closing head tags typically appear as the first item after your first HTML tag.
<img>
The <img> tag allows you to add an image to a web page. Most elements require both opening and closing tags, but the <img> tag is a self-closing tag. Note that the end of the <img> tag has a forward slash /. Self-closing tags may include or omit the final slash — both will render properly.
src
The <img> tag has a required attribute called src. The src attribute must be set to the image's source, or the location of the image. In this case, the value of src must be the uniform resource locator (URL) of the image. A URL is the web address or local address where a file is stored.
<strong>
The <strong> tag highlights important text. The <strong> will generally render as bold emphasis.
<textarea>
The <textarea> element is used to create a bigger text field for users to write more text. We can add the attributes rows and cols to determine the amount of rows and columns for the <textarea>. When we submit the form, the value of <textarea> is the text written inside the box. If we want to add a default value to text to <textarea> we would include it within the opening and closing tags.
action
The action attribute determines where the information is sent.
alt
The alt 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. The alt attribute also serves the following purposes: - 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. If the image on the web page is not one that conveys any meaningful information to a user (visually impaired or otherwise), the alt attribute should be left empty.
<tfoot>
The bottom part of a long table can also be sectioned off using the <tfoot> element. Footers are often used to contain sums, differences, and other data results.
<footer>
The content at the bottom of the subject information is known as the footer, indicated by the <footer> element. The footer contains information such as: - Contact information - Copyright information - Terms of use - Site Map - Reference to top of page links
<main>
The element <main> is used to encapsulate the dominant content within a webpage. This tag is separate from the <footer> and the <nav> of a web page since these elements don't contain the principal content. By using <main> as opposed to a <div> element, screen readers and web browsers are better able to identify that whatever is inside of the tag is the bulk of the content.
<tr>
The first step in entering data into the table is to add rows using the table row element: <tr>.
method
The method attribute is assigned a HTTP verb that is included in the HTTP request.
target
The target attribute specifies how a link should open. For a link to open in a new window, the target attribute requires a value of _blank. The target attribute can be added directly to the opening tag of the anchor element, just like the href attribute. The target="_blank" attribute, when used in modern browsers, will open new websites in a new tab.
scope
The use of the scope attribute can take one of two values: 1. row - this value makes it clear that the heading is for a row. 2. col - this value makes it clear that the heading is for a column.
href
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). The paths provided to the href attribute are often URLs.
<th>
To add titles to rows and columns, you can use the table heading element: <th>. The table heading element is used just like a table data element, except with a relevant title. Just like table data, a table heading must be placed within a table row.
<html>
To create HTML structure and content, we must add opening and closing <html> tags after declaring <!DOCTYPE html> Anything between the opening <html> and closing </html> tags will be interpreted as HTML code. Without these tags, it's possible that browsers could incorrectly interpret your HTML code.
type="submit"
To make a submit button in a <form>, we're going to use the reliable <input> element and set the type to "submit". The value assigned to the <input> shows up as text on the submit button. If there isn't a value attribute, the default text, Submit shows up on the button.
minLength and maxLength
To set a minimum number of characters for a text field, we add the minlength attribute and a value to set a minimum value. Similarly, to set the maximum number of characters for a text field, we use the maxlength attribute and set a maximum value.
type="checkbox"
We use checkboxes if we presented multiple options to users and allow them to select any number of options. In a <form> we would use the <input> element and set type="checkbox". There are assigned values to the value attribute of the checkboxes. These values are not visible on the form itself, that's why it is important that we use an associated <label> to identify the checkbox. Each <input> has the same value for the name attribute. Using the same name for each checkbox groups the <input>s together. However, each <input> has a unique id to pair with a <label>.
<select>
We use the element <select> to create the dropdown list. To populate the dropdown list, we add multiple <option> elements, each with a value attribute. By default, only one of these options can be selected. The text rendered is the text included between the opening and closing <option> tags. However, it is the value of the value attribute that is used in <form> submission. When the <form> is submitted, the information from this input field will be sent using the name of the <select> and the value of the chosen <option>.
<thead>
When a table's body is sectioned off, it also makes sense to section off the table's column headings using the <thead> element. Note that the table's head still requires a row in order to contain the table headings. Additionally, only the column headings go under the <thead> element. We can use the scope attribute on <th> elements to indicate whether a <th> element is being used as a "row" heading or a "col" heading.
type="text"
When we create an <input> element with type="text", it renders a text field that users can type into. It's also important that we include a name attribute for the <input> — without the name attribute, information in the <input> won't be sent when the <form> is submitted. After users type into the <input> element, the value of the value attribute becomes what is typed into the text field. The value of the value attribute is paired with the value of the name attribute and sent as text when the form is submitted. We could also assign a default value for the value attribute so that users have a pre-filled text field when they first see the rendered form.
<a>
You can add links to a web page by adding an anchor element <a> and including the text of the link in between the opening and closing tags. Besides text, HTML also 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 <img> element with an <a> element.
