HTML Codecademy
Range Input (6)
*<hr> - An element that is used to a break between paragraph-level elements. It is displayed as a horizontal line. This is also a semantic element that you'll learn more about in a later lesson.
Range Input (5)
*<section> - An element used to represent a standalone section for which a more specific element can't be found. This usually has a heading as a child element. A section should make sense in the outline of a document, whereas <div> is used for styling. This is a semantic element you'll learn more about in a later lesson. *class - A global attribute that has a list of classes pertaining to an element. You'll see this used with <section> in the practice.
Form Validation Review (2)
*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.
The Aside Element (2)
*Bibliographies *Endnotes *Comments *Pull quotes *Editorial sidebars *Additional information
HTML Forms Review (4)
*Setting type to "list" will pair the <input> with a <datalist> element if the id of both are the same. *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.
HTML Forms Review (2)
*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.
Audio and Attributes (4)
*controls: automatically displays the audio controls into the browser such as play and mute. *src: specifies the URL of the audio file. As you might have noticed, we already used the src attribute. Most attributes go in the opening tag of <audio>. For example, here's how we could add both autoplay functionality and audio controls: <audio autoplay controls> You can find other attributes here: Useful attributes.
Spanning Rows (4)
4. The fourth row only contains the Dinner entry, since "Relax" spans into the cell next to it. If you'd like to see how the browser interprets the code above, feel free to copy and paste it into the code editor to understand it a little better.
Range Input (2)
<form> <label for="volume"> Volume Control</label> <input id="volume" name="volume" type="range" min="0" max="100" step="1"> </form>
Header and Nav (5)
<header> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> </ul> </nav> </header>
Main and Footer (3)
<main> <header> <h1>Types of Sports</h1> </header> <article> <h3>Baseball</h3> <p> The first game of baseball was played in Cooperstown, New York in the summer of 1839. </p> </article> </main>
Line Breaks (2)
<p>The Nile River is the longest river <br> in the world, measuring over 6,850 <br> kilometers long (approximately 4,260 <br> miles).</p> The code in the example above will result in an output that looks like the following: The Nile River is the longest river in the world, measuring over 6,850 kilometers long (approximately 4,260 miles).
Table Borders (2)
<table border="1"> <tr> <td>73</td> <td>81</td> </tr> </table> The code in the example above is following is deprecated, so please don't use it.
Textarea Element (5)
<textarea>Adding default text</textarea> This code will render a <textarea> that contains pre-filled text: "Adding default text". But don't just take our word for it, let's test it out!
Article and Section (2)
A website's home page could be split into sections for the introduction, news items, and contact information. Here is an example of how to use <section>: <section> <h2>Fun Facts About Cricket</h2> </section>
The <html> tag (2)
<!DOCTYPE html> <html> </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.
Page Titles (2)
<!DOCTYPE html> <html> <head> <title>My Coding Journal</title> </head> </html> If we were to open a file containing the HTML code in the example above, the browser would display the words My Coding Journal in the title bar (or in the tab's title).
Header and Nav (3)
<div id="header"> <h1> Everything you need to know about pizza! </h1> </div> By using a <header> tag, our code becomes easier to read.
Figure and Figcaption (2)
<figure> <img src="overwatch.jpg"/> </figure> In this code, we created a <figure> element so that we can encapsulate our <img> tag. In <figure> we used the <img> tag to insert an image onto the webpage. We used the src attribute within the <img> tag so that we can link the source of the image.
Figure and Figcaption (4)
<figure> <img src="overwatch.jpg"> <figcaption>This picture shows characters from Overwatch.</figcaption> </figure> In the example above, we added a <figcaption> into the <figure> element to describe the image from the previous example.
Text Input (3)
<form action="/example.html" method="POST"> <input type="text" name="first-text-field"> </form> Here's a screen shot of how the rendered form looks like on a web page for the Chrome browser (different browsers have different default rendering).
...
<form action="/example.html" method="POST"> <label for="meal">What do you want to eat?</label> <br> <input type="text" name="food" id="meal"> </form>1q11qq1
How a Form Works (3)
<form action="/example.html" method="POST"> </form> In the above example, we've created the skeleton for a <form> that will send information to example.html as a POST request: •The action attribute determines where the information is sent.
How a Form Works (6)
<form action="/example.html" method="POST"> <h1>Creating a form</h1> <p>Looks like you want to learn how to create an HTML form. Well, the best way to learn is to play around with it.</p> </form>
Requiring an Input (2)
<form action="/example.html" method="POST"> <label for="allergies">Do you have any dietary restrictions?</label> <br> <input id="allergies" name="allergies" type="text" required> <br> <input type="submit" value="Submit"> </form>
Set a Minimum and Maximum (2)
<form action="/example.html" method="POST"> <label for="guests">Enter # of guests:</label> <input id="guests" name="guests" type="number" min="1" max="4"> <input type="submit" value="Submit"> </form>
Matching a Pattern (3)
<form action="/example.html" method="POST"> <label for="payment">Credit Card Number (no spaces): </label> <br> <input id="payment" name="payment" type="text" required pattern="[0-9]{14,16}"> <input type="submit" value="Submit"> </form>
Checking Text Length (3)
<form action="/example.html" method="POST"> <label for="summary">Summarize your feelings in less than 250 characters</label> <input id="summary" name="summary" type="text" minlength="5" maxlength="250" required> <input type="submit" value="Submit"> </form>
Textarea Element (2)
<form> <label for="blog">New Blog Post: </label> <br> <textarea id="blog" name="blog" rows="5" cols="30"> </textarea> </form>
Datalist Input (2)
<form> <label for="city">Ideal city to visit?</label> <input type="text" list="cities" id="city" name="city"> <datalist id="cities"> <option value="New York City"></option> <option value="Tokyo"></option> <option value="Barcelona"></option> <option value="Mexico City"></option> <option value="Melbourne"></option> <option value="Other"></option> </datalist> </form>
Dropdown List (2)
<form> <label for="lunch">What's for lunch?</label> <select id="lunch" name="lunch"> <option value="pizza">Pizza</option> <option value="curry">Curry</option> <option value="salad">Salad</option> <option value="ramen">Ramen</option> <option value="tacos">Tacos</option> </select> </form>
Checkbox Input (2)
<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">Anchovy</label> <input id="anchovy" name="topping" type="checkbox" value="anchovy"> </form>
Radio Button Input (2)
<form> <p>What is sum of 1 + 1?</p> <input type="radio" id="two" name="answer" value="2"> <label for="two">2</label> <br> <input type="radio" id="eleven" name="answer" value="11"> <label for="eleven">11</label> </form>
Header and Nav (2)
<header> <h1> Everything you need to know about pizza! </h1> </header> This can be compared to the code below which uses a <div> tag instead of a <header> tag:
Table Head (2)
<table> <thead> <tr> <th></th> <th scope="col">Saturday</th> <th scope="col">Sunday</th> </tr> </thead> <tbody> <tr> <th scope="row">Morning</th> <td rowspan="2">Work</td> <td rowspan="3">Relax</td> </tr> <tr> <th scope="row">Afternoon</th> </tr> <tr> <th scope="row">Evening</th> <td>Dinner</td> </tr> </tbody> </table>
Table Footer (2)
<table> <thead> <tr> <th>Quarter</th> <th>Revenue</th> <th>Costs</th> </tr> </thead> <tbody> <tr> <th>Q1</th> <td>$10M</td> <td>$7.5M</td> </tr> <tr> <th>Q2</th> <td>$12M</td> <td>$5M</td> </tr> </tbody> <tfoot> <tr> <th>Total</th> <td>$22M</td> <td>$12.5M</td> </tr> </tfoot> </table>
Table Rows (2)
<table> <tr> </tr> <tr> </tr> </table> In the example above, two rows have been added to the table.
Textarea Element (1)
An <input> element with type="text" creates a single row input field for users to type in information. However, there are cases where users need to write in more information, like a blog post. In such cases, instead of using an <input>, we could use <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>. Take a look:
Introduction to Semantic HTML (2)
Elements such as <div> and <span> are not semantic elements since they provide no context as to what is inside of those tags. For example, instead of using a <div> element to contain our header information, we could use a <header> element, which is used as a heading section. By using a <header> tag instead of a <div>, we provide context as to what information is inside of the opening and closing tag.
Article and Section (4)
Here is an example of how to use <article>: <section> <h2>Fun Facts About Cricket</h2> <article> <p>A single match of cricket can last up to 5 days.</p> </article> </section>
Set a Minimum and Maximum (3)
If a user tries to submit an input that is less than 1 a warning will appear: See photo. A similar message will appear if a user tries to input a number greater than 4. Let's now see this action.
Checking Text Length (4)
If a user tries to submit the <form> with less than the set minimum, this message appears: See photo.
Text Input (1)
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. The first value for the type attribute we're going to explore is "text". When we create an <input> element with type="text", it renders a text field that users can type into.
Textarea Element (3)
In the code above, an empty <textarea> that is 5 rows by 30 columns is rendered to the page like so: See photo.
Adding a Label (1)
In the previous exercise we created an <input> element but we didn't include anything to explain what the <input> is used for. For a user to properly identify an <input> we use the appropriately named <label> element.
Requiring an Input (1)
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. Take for example:
How a Form Works (2)
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. Take a look at the sample <form> below:
...
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>, like so:
Form Validation Review (4)
These quick checks help ensure that input data is correct and safe for our servers. It also helps give users immediate feedback on what they need to fix instead of having to wait for a server to send back that information.
Password Input (1)
Think about all those times we have to put sensitive information, like a password or PIN, into a <form>. We wouldn't want our information to be seen by anyone peeking over our shoulder! Luckily, we have the type="password" attribute for <input>! An <input type ="password"> element will replace input text with another character like an asterisk (*) or a dot (•).
Introduction to HTML Form Validation (4)
This can also help us protect our server from malicious code or data from a malicious user. It also allows us to quickly give feedback to users for specific fields rather than having them fill in a form again if the data they input into the form was rejected. In this lesson, we'll learn how to add some validation checks to our <form>s!
Radio Button Input (4)
To group radio buttons together, we assign them the same name and only one radio button from that group can be selected. Let's see this in action by creating our own radio buttons.
Introduction to Semantic HTML (1)
When building web pages, we use a combination of non-semantic HTML and Semantic HTML. The word semantic means "relating to meaning," so semantic elements provide information about the content between the opening and closing tags. By using Semantic HTML, we select HTML elements based on their meaning, not on how they are presented.
Text Input (4)
When initially loaded, it will be an empty box: See photo. 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.
Table Headings (4)
When rendered, this code will appear similar to the image below. 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. HTML code for tables may look a little strange at first, but analyzing it piece by piece helps make the code more understandable.
How a Form Works (4)
•The method 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. The <form> element can also contain child elements.
HTML Forms Review (5)
*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.
Form Validation Review (3)
*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.
HTML Forms Review (3)
*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.
Checkbox Input (4)
*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>. Alright, time to use checkboxes in our code!
Password Input (3)
After a user types into the field, it would look like: See photo. Even though the password field obscures the text of the password, when the form is submitted, the value of the text is sent. In other words, if "hunter2" is typed into the password field, "user-password=hunter2" is sent along with the other information on the form.
Images (1)
All of the elements you've learned about so far headings, paragraphs, lists, and spans) share one thing in common: they're composed entirely of text! What if you want to add content to your web page that isn't composed of text, like images? 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.
Introduction to HTML Form Validation (2)
An example of this type of validation is the usage 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. On the other hand, we use client-side validation if we want to check the data on the browser (the client). This validation occurs before data is sent to the server.
Checking Text Length (5)
And if a user tries to type in more than the maximum allowed number of characters, they don't get a warning message, but they can't type it in! Let's add this validation to our <form>.
Dropdown List (4)
And if we click on the field containing the first option, the list is revealed: See photo.
Datalist Input (4)
And when field is selected: See photo.
Set a Minimum and Maximum (1)
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. Let's see this in code:
Video and Embed (1)
As demonstrated in the previous exercise, media content can be a useful addition to a website. By using a <video> element, we can add videos to our website. The <video> element makes it clear that a developer is attempting to display a video to the user. Some attributes that can alter a video playback include:
The Aside Element (4)
As shown above, the information within the <article> is the important content. Meanwhile the information within the <aside> enhances the information in <article> but is not required in order to understand it.
Main and Footer (4)
As we see above, <main> contains an <article> and <header> tag with child elements that hold the most important information related to the page. The content at the bottom of the subject information is known as the footer, indicated by the <footer> element.
Form Validation Review (1)
Awesome job adding client-side validation to <form>s! Let's quickly recap: *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.
Creating a Table (1)
Before displaying data, we must first create the table that will contain the data by using the <table> element. <table> </table> The <table> element will contain all of the tabular data we plan on displaying.
Whitespace (2)
Both tools take advantage of the fact that the position of elements in a browser is independent of the amount of whitespace or indentation in the index.html file. For example, if you wanted to increase the space between two paragraphs on your web page, you would not be able to accomplish this by adding space between the paragraph elements in the index.html file.
Main and Footer (2)
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. So how does <main> look when incorporated into our code? That's a great question.
Header and Nav (6)
By using <nav> as a way to label our navigation links, it will be easier for not only us, but also for web browsers and screen readers to read the code. Now that we've learned about the <header> and <nav> elements let's add them into our code!
Radio Button Input (1)
Checkboxes work well if we want to present users with multiple options and let them choose one or more of the options. However, there are 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. Let's look over the code used to create radio buttons:
Whitespace (4)
Compare the example above to this: <body> <p>Paragraph 1</p> <p>Paragraph 2</p> </body> This example is easier to read, because each element is on its own line. While the first example required you to read the entire line of code to identify the elements, this example makes it easy to identify the body tag and two paragraphs. A browser renders both examples the same way: Paragraph 1 Paragraph 2 In the next exercise you will learn how to use indentation to help visualize nested elements.
Checking Text Length (2)
Conveniently, there are built-in HTML5 validations for these situations. 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. Let's take a look at these attributes in code:
Spanning Rows (1)
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.
Introduction to HTML Form Validation (3)
Different browsers implement client-side validation differently, but it leads to the same outcome. Shared among the different browsers are the benefits of using HTML5's built-in client-side validation. It saves us time from having to send information to the server and wait for the server to send back confirmation or rejection of the data.
Datalist Input (1)
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>. Let's go over a concrete example:
Introduction to HTML Form Validation (1)
Ever wonder how a login page actually works? Or why the combination of a username and password grants you access to a website? The answers lie in validation. Validation is the concept of checking user provided data against the required data. There are different types of validation. One type is server-side validation, this happens when data is sent to another machine (typically a server) for validation.
Main and Footer (6)
For example: <footer> <p>Email me at [email protected]</p> </footer> In the example above, the footer is used to contain contact information. The <footer> tag is separate from the <main> element and typically located at the bottom of the content.
Text Input (5)
For instance, if a user typed in "important details" in the text field created by our <input> element: See photo. When the form is submitted, the text: "first-text-field=important details" is sent to /example.html because the value of the name attribute is "first-text-field" and the value of value is "important details".
How a Form Works (5)
For instance, it would be helpful to provide a header so that users know what this <form> is about. We could also add a paragraph to provide even more detail. Let's see an example of this in code:
Submit Form (2)
For instance: <form> <input type="submit" value="Send"> </form>
Introduction to HTML Forms (1)
Forms are a part of everyday life. When we use a physical form in real life, we write down information and give it to someone to process. Think of the times you've had to fill out information for various applications like a job, or a bank account, or dropped off a completed suggestion card — each instance is a form!
Where Does the Title Appear? (1)
Good work! Unfortunately, the browser panel used by the Codecademy environment does not have a title bar, so the "Brown Bear" title you wrote in the previous exercise will not be displayed. Outside of the Codecademy environment, however, your title would appear as depicted in the diagram to the right.
Tables Review (1)
Great job! In this lesson, we learned how to create a table, add data to it, and section the table into smaller parts that make it easier to read. Let's review what we've learned so far: •The <table> element creates a table. •The <tr> element adds rows to a table. •To add data to a row, you can use the <td> element.
Comments (1)
HTML files also allow you to add comments to your code. Comments begin with <!-- and end with -->. Any characters in between will be ignored by your browser. <!-- This is a comment that the browser will not display. --> Including comments in your code is helpful for many reasons: 1. They help you (and others) understand your code if you decide to come back and review it at a much later date.
Opening Links in a New Window (1)
Have you ever clicked on a link and observed the resulting web page open in a new browser window? If so, you can thank the <a> element's target attribute. The target attribute specifies how a link should open. It's possible that one or more links on your web page link to an entirely different website. In that case, you may want users to read the linked website, but hope that they return to your web page. This is exactly when the target attribute is useful!
Image Alts (4)
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.
The Aside Element (3)
Here's an example of <aside> being used alongside <article>: <article> <p>The first World Series was played between Pittsburgh and Boston in 1903 and was a nine-game series.</p> </article> <aside> <p> Babe Ruth once stated, "Heroes get remembered, but legends never die." </p> </aside>
Dropdown List (6)
However, it is the value of the value attribute that is used in <form> submission (notice the difference in the text and value capitalization). 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>. For instance, if a user selected Pizza from the dropdown list, the information would be sent as "lunch=pizza".
Attributes (1)
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
Textarea Element (4)
If we wanted an even bigger text field, we could click and drag on the bottom right corner to expand it. 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 like so:
Matching a Pattern (1)
In addition to checking the length of a text, we could also add a validation to check how the text was provided. For cases when we want user input to follow specific guidelines, we use the pattern attribute and assign it a regular expression, or regex. Regular expressions are a sequence of characters that make up a search pattern. If the input matches the regex, the form can be submitted.
Article and Section (3)
In the code above we created a <section> element to encapsulate the code. In <section> we added a <h2> element as a heading. 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.
Article and Section (5)
In the code above, the <article> element containing a fact about cricket was placed inside of the <section> element. It is important to note that a <section> element could also be placed in an <article> element depending on the context.
Comments (3)
In the example above, a valid HTML element (a paragraph element) has been "commented out." This practice is useful when there is code you want to experiment with, or return to, in the future.
Table Head (3)
In the example above, the only new element is <thead>. The table headings are contained inside of this 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.
Table Head (1)
In the last exercise, the table's headings were kept inside of the table's body. When a table's body is sectioned off, however, it also makes sense to section off the table's column headings using the <thead> element.
Checking Text Length (1)
In the previous exercise, we were able to use min and max to set acceptable minimum and maximum values in a number field. But what about text fields? There are certainly cases where we wouldn't want our users typing more than a certain number of characters (think about the character cap for messages on Twitter). We might even want to set a minimum number of characters.
Audio and Attributes (2)
In this example, we created an <audio> element. Then we created a <source> element to encapsulate our audio link. In this case, iAmAnAudioFile.mp3 is our audio file. Then we specified the type by using type and named 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.
Markup Language
Is a computer language that defines the structure and presentation of raw text. In HTML, the computer can interpret raw text that is wrapped in HTML elements.
Header and Nav (4)
It is much easier to identify what is inside of the <h1>'s parent tags, as opposed to a <div> tag which would provide no details as to what was inside of the tag. 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. Let's take a look at the example below:
Text Input (2)
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. We'll explain more about submissions and the submit button in a later exercise. For now, let's examine the following code that produces a text input field:
Figure and Figcaption (3)
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>. This is different than using a <p> element to describe the content; if we decide to change the location of <figure>, the paragraph tag may get displaced from the figure while a <figcaption> will move with the figure. This is useful for grouping an image with a caption.
Introduction to HTML Forms (2)
Just like a physical form, an HTML <form> element is responsible for collecting information to send somewhere else. Every time we browse the internet we come into contact with many forms and we might not even realize it. There's a good chance that if you're typing into a text field or providing an input, the field that you're typing into is part of a <form>! In this lesson, we'll go over the structure and syntax of a <form> and the many elements that populate it.
Matching a Pattern (2)
Let's say we wanted to check for a valid credit card number (a 14 to 16 digit number). We could use the regex: [0-9]{14,16} which checks that the user provided only numbers and that they entered at least 14 digits and at most 16 digits. To add this to a form:
Header and Nav (1)
Let's take a look at some semantic elements that assist in the structure of a web page. A <header> is a container usually for either navigational links or introductory content containing <h1> to <h6> headings.The example below shows <header> in action:
HTML Forms Review (1)
Nice work interacting with the extremely common and useful <form> element! 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.
Images (2)
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. <img src="image-location.jpg" /> 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.
Submit Form (4)
Notice in the code snippet that 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. Let's now add this element to make our <form>s complete!
Dropdown List (5)
Notice in the code that we're using 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.
Datalist Input (3)
Notice, in the code above, we have an <input> that has a list attribute. The <input> is associated to the <datalist> via the <input>'s list attribute and the id of the <datalist>. From the code provided, the following form is rendered: See photo.
Article and Section (1)
Now that we covered the body of Semantic HTML, let's focus on what can go in the body. The two elements we're going to focus on now are <section> and <article>.<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>.
Audio and Attributes (1)
Now that we learned about text-based content, let us dig into <audio>! Surely everyone needs <audio>—how else would you listen to your Korean hip hop? The <audio> element is used to embed audio content into a document. Like <video>, <audio> uses src to link the audio source. <audio> <source src="iAmAnAudioFile.mp3" type="audio/mp3"> </audio>
Dropdown List (1)
Radio buttons are great if we want our users to pick one option out of a few visible options, but imagine if we have a whole list of options! This situation could quickly lead to a lot of radio buttons to keep track of. An alternative solution is to use a dropdown list to allow our users to choose one option from an organized list. Here's the code to create a dropdown menu:
Submit Form (1)
Remember, the purpose of a form is to collect information that will be submitted. That's the role of the submit button — users click on it when they are finished with filling out information in the <form> and they're ready to send it off. Now that we've gone over how to create various input elements, let's now go over how to create a submit button! To make a submit button in a <form>, we're going to use the reliable <input> element and set the type to "submit".
Checkbox Input (1)
So far the types of inputs we've allowed were all single choices. But, what if we presented multiple options to users and allow them to select any number of options? Sounds like we could use checkboxes! In a <form> we would use the <input> element and set type="checkbox". Examine the code used to create multiple checkboxes:
HTML
Stands for HyperText Markup Language
Table Headings (1)
Table data doesn't make much sense without titles to describe what the data represents. 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.
Styling with CSS (1)
Tables, by default, are very bland. They have no borders, the font color is black, and the typeface is the same type used for other HTML elements. CSS, or Cascading Style Sheets, is a language that web developers use to style the HTML content on a web page. You can use CSS to style tables. Specifically, you can style the various aspects mentioned above.
The <html> tag (1)
The <!DOCTYPE html> declaration provides the browser with two pieces of information (the type of document and the HTML version to expect), but it doesn't actually add any HTML structure or content. To create HTML structure and content, we must add opening and closing <html> tags after declaring <!DOCTYPE html>:
The Aside Element (1)
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:
Table Footer (1)
The bottom part of a long table can also be sectioned off using the <tfoot> element. See example. In the example below, the footer contains the totals of the data in the table. Footers are often used to contain sums, differences, and other data results.
Range Input (4)
The code above renders: See Photo In the example above, every time the slider moves by one, the value of the <input>'s value attribute changes. This practice has two new elements and an attribute that you may not be familiar with.
Adding a Label (4)
The code above renders: See photo. Look, now users know what the <input> element is for! Another benefit for using the <label> element is when this element is clicked, the corresponding <input> is highlighted/selected. Let's see the <label> element in action!
Password Input (2)
The code below provides an example of how to create a password field: <form> <label for="user-password">Password: </label> <input type="password" id="user-password" name="user-password"> </form>
HTML Tag (Definition)
The element name, surrounded by an opening (<) and closing (>) angle bracket.
How a Form Works (7)
The example above doesn't collect any user input, but we'll do that in the next exercise. For now, let's practice making the foundation of an HTML <form>!
Main and Footer (5)
The footer contains information such as: *Contact information *Copyright information *Terms of use *Site Map *Reference to top of page links
Whitespace (1)
The rest of this lesson will focus on some tools developers use to make code easier to interpret. 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: whitespace and indentation.
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.
Requiring an Input (4)
The styling of the message varies from browser to browser, the picture above depicts the message in a Chrome browser. We'll also continue to show these messages as they appear in Chrome in later exercises. Let's see how it shows up in your browser!
Introduction to Tables (1)
There are many websites on the Internet that display information like stock prices, sports scores, invoice data, and more. This data is naturally tabular in nature, meaning that a table is often the best way of presenting the data. In this part of the course, we'll learn how to use the HTML <table> element to present information in a two-dimensional table to the users. Let's get started!
Figure and Figcaption (5)
This helps group the <figure> content with the <figcaption> content. While the content in <figure> is related to the main flow of the document, its position is independent. This means that you can remove it or move it somewhere else without affecting the flow of the document.
Requiring an Input (3)
This renders a text box, and if we try to submit the <form> without filling it out we get this message: See photo.
Main and Footer (1)
Two more structural elements are <main> and <footer>. These elements along with <nav> and <header> help describe where an element is located based on conventional web development standards. 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.
Range Input (1)
Using an <input type="number"> is great if we want to allow users to type in any number of their choosing. But, if we wanted to limit what numbers our users could type we might consider using a different type value. 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>.
HTML Forms Review (6)
Using the <form> element in conjunction with the other elements listed above allows us to create sites that take into consideration the wants and needs of our users. Take the opportunity to take what you've learned, and apply it!
Number Input (2)
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. Below is the code needed to render an input field for numbers: <form> <label for="years"> Years of experience: </label> <input id="years" name="years" type="number" step="1"> </form>
How a Form Works (1)
We can think of the internet as a network of computers which send and receive information. Computers need an HTTP request to know how to communicate. The HTTP request instructs the receiving computer how to handle the incoming information. More information can be found in our article about HTTP requests.
Text Input (6)
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 like so: <form action="/example.html" method="POST"> <input type="text" name="first-text-field" value="already pre-filled"> </form>
Range Input (3)
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:
Audio and Attributes (3)
We linked our audio file into the browser but now we need to give it controls. This is where attributes come in. Attributes provide additional information about an element. Attributes allow us to do many different things to our audio file. There are many attributes for <audio> but today we're going to be focusing on controls and src.
Number Input (1)
We've now gone over two type attributes for <input> related to text. But, we might want our users to type in a number — in which case we can set the type attribute to... (you guessed it)... "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 .).
Text Input (7)
Which renders: Photo Time to put this knowledge into practice!
Dropdown List (3)
Which renders: See photo
Submit Form (3)
Which renders: See photo.
Radio Button Input (3)
Which renders: See photo. Notice from the code snippet, radio buttons (like checkboxes) do not display their value. We have an associated <label> to represent the value of the radio button.
Checkbox Input (3)
Which renders: See photo. Notice in the example provided: *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.
Number Input (3)
Which renders: See photo. Now it's time to apply this knowledge.
Datalist Input (5)
While <select> and <datalist> share some similarities, there are some major differences. 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. Now it's time to make a <datalist> of our own!
Introduction to Semantic HTML (3)
Why use Semantic HTML? •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.
Figure and Figcaption (1)
With <aside>, we learned that we can put additional information next to a main piece of content, but what if we wanted to add an image or illustration? That is where <figure> and <figcaption> come in. <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.
Matching a Pattern (4)
With the pattern in place, users can't submit the <form> with a number that doesn't follow the regex. When they try, they'll see a validation message like so: See photo If you want to find out more about Regex, read more at MDN's regex article. To see it in practice, let's use the pattern attribute in our HTML!
Styling with CSS (2)
table, th, td { border: 1px solid black; font-family: Arial, sans-serif; text-align: center; } The code in the example above demonstrates just some of the various table aspects you can style using CSS properties.
Tables Review (3)
•A table's body is created with the <tbody> element. •A table's footer is created with the <tfoot> element. •All the CSS properties you learned about in this course can be applied to tables and their data. Congratulations on completing HTML Tables
Introduction to Semantic HTML (5)
•Easy to Understand: Semantic HTML also makes the website's source code easier to read for other web developers. To better understand this, you can think of comparing non-semantic HTML to going into a store with no signs on the aisles. Since the aisles aren't labeled, you don't know what products are in those aisles. However, stores that do have signs for each aisle make it a lot easier to find the items you need, just like Semantic HTML.
Introduction to Semantic HTML (4)
•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.
Tables Review (2)
•Table headings clarify the meaning of data. Headings are added with the <th> 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 <thead> element.
Table Headings (2)
<table> <tr> <th></th> <th scope="col">Saturday</th> <th scope="col">Sunday</th> </tr> <tr> <th scope="row">Temperature</th> <td>73</td> <td>81</td> </tr> </table>
HTML Tags Review (3)
1. The <!DOCTYPE html> declaration should always be the first line of code in your HTML files. This lets the browser know what version of HTML to expect. 2. The <html> element will contain all of your HTML code. 3. Information about the web page, like the title, belongs within the <head> of the page. 4. You can add a title to your web page by using the <title> element, inside of the head.
HTML Tags Review (5)
9. Indentation also helps make code easier to read. It makes parent-child relationships visible. 10. Comments are written in HTML using the following syntax: <!-- comment -->. Take some time to edit the workspace you created and observe how it changes!
Linking to Relative Page (2)
As the size of the projects you create grows, you may use additional folders within the main project folder to organize your code. project-folder/ |—— about.html |—— contact.html |—— index.html
Elements
HTML is composed of elements. These elements structure the webpage and define its content. An element is made up of an opening tag (ex: <p>), content (ex: "Hello World!" text), and the closing tag (ex: </p>). There are many tags that we can use to organize and display text and other types of content, like images.
HTML Structure (1)
HTML is organized as a collection of family tree relationships. When an element is contained inside another element, it is considered the child of that element. The child element is said to be nested inside the parent element.
Preparing for HTML (2)
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.
Attributes (2)
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. ids have several different purposes in HTML, but for now, we'll focus on how they can help us identify content on our page. When we add an id to a <div>, we place it in the opening tag: <div id="intro"> <h1>Introduction</h1></div>
Table Borders (4)
You can learn more about CSS in our CSS courses. You can achieve the same table border effect using CSS. table, td { border: 1px solid black; } The code in the example above uses CSS instead of HTML to show table borders.
Comments (2)
2. They allow you to experiment with new code, without having to delete old code. <!-- Favorite Films Section --> <p>The following is a list of my favorite films:</p> In this example, the comment is used to denote that the following text makes up a particular section of the page. <!-- <p> Test Code </p> -->
Indentation (2)
Although your code will work without exactly two spaces, this standard is followed by the majority of professional web developers. Indentation is used to easily visualize which elements are nested within other elements.
Linking to Same Page (1)
At this point, we have all the content we want on our page. Since we have so much content, it doesn't all fit on the screen. How do we make it easier for a user to jump to different portions of our page? When users visit our site, we want them to be able to click a link and have the page automatically scroll to a specific section. In order to link to a target on the same page, we must give the target an id, like this:
Headings (1)
HTML headings are similar to headings in other types of media. For example, in newspapers, large headings are typically used to capture a reader's attention. Other times, headings are used to describe content, like the title of a movie or educational article. HTML follows a similar pattern. In HTML, there are six different headings, or heading elements.
HTML Structure (2)
Since there can be multiple levels of nesting, this analogy can be extended to grandchildren, great-grandchildren, and beyond. The relationship between elements and their ancestor and descendent elements is known as hierarchy. Understanding HTML hierarchy is important because child elements can inherit behavior and styling from their parent element.
Linking to Other Web Pages (2)
Wait a minute! Technically, the link in the example above is incomplete. How exactly is the link above supposed to work if there is no URL that will lead users to the actual Wikipedia page? The anchor element in the example above is incomplete without the href attribute.
HTML Tags Review (4)
5. A webpage's title appears in a browser's tab. 6. Anchor tags (<a>) are used to link to internal pages, external pages or content on the same page. 7. You can create sections on a webpage and jump to them using <a> tags and adding ids to the elements you wish to jump to. 8. Whitespace between HTML elements helps make code easier to read while not changing how elements appear in the browser.
Linking at Will (3)
<a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank"><img src="https://www.Prickly_Pear_Closeup.jpg" alt="A red prickly pear fruit"/></a> In the example above, an image of a prickly pear has been turned into a link by wrapping the outside of the <img> element with an <a> element.
Ordered Lists (2)
<ol> <li>Preheat the oven to 350 degrees.</li> <li>Mix whole wheat flour, baking soda, and salt.</li> <li>Cream the butter, sugar in separate bowl.</li> <li>Add eggs and vanilla extract to bowl.</li></ol> The output will look like this: 1. Preheat the oven to 350 degrees. 2. Mix whole wheat flour, baking soda, and salt. 3. Cream the butter, sugar in separate bowl. 4. Add eggs and vanilla extract to bowl.
Linking to Same Page (2)
<p id="top">This is the top of the page!</p> <h1 id="bottom">This is the bottom! </h1> In this example, the <p> element is assigned an id of "top" and the <h1> element is assigned "bottom." An id can be added to most elements on a webpage. An id should be descriptive to make it easier to remember the purpose of a link.
Spanning Columns (2)
<table> <tr> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> </tr> <tr> <td colspan="2">Out of Town</td> <td>Back in Town</td> </tr> </table>
Spanning Rows (2)
<table> <tr> <!-- Row 1 --> <th></th> <th>Saturday</th> <th>Sunday</th> </tr> <tr> <!-- Row 2 --> <th>Morning</th> <td rowspan="2">Work</td> <td rowspan="3">Relax</td> </tr> <tr> <!-- Row 3 --> <th>Afternoon</th> </tr> <tr> <!-- Row 4 --> <th>Evening</th> <td>Dinner</td> </tr> </table>
Unordered Lists (2)
<ul> <li>Limes</li> <li>Tortillas</li> <li>Chicken</li></ul> In the example above, the list was created using the <ul> tag and all individual list items were added using <li> tags. The output will look like this: (but w/a bullet point) *Limes *Tortillas *Chicken
HTML Element or Element (Definition)
A unit of content in an HTML document formed by HTML tags and the text or media it contains.
Opening Links in a New Window (2)
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. <a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">The Brown Bear</a>. In the example above, setting the target attribute to "_blank" instructs the browser to open the relevant Wikipedia page in a new window.
Headings (2)
Headings can be used for a variety of purposes, like titling sections, articles, or other forms of content. Heading elements available: <h1>-used for main headings. All other smaller headings are used for subheadings. <h2><h3><h4><h5><h6>
Displaying Text (1)
If you want to display text in HTML, you can use a paragraph or span: Paragraphs (<p>) contain a block of plain text. <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. Take a look at each of these elements in action below: <div> <h1>Technology</h1></div><div> <p><span>Self-driving cars</span> are anticipated to replace up to 2 million jobs over the next two decades.</p></div>
Videos (1)
In addition to images, HTML also supports displaying videos. 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. <video src="myVideo.mp4" width="320" height="240" controls> Video not supported</video> In this example, the video source (src) is myVideo.mp4.
Unordered Lists (1)
In addition to organizing text in paragraph form, you can also display content in an easy-to-read list. 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. 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.
Table Rows (1)
In many programs that use tables, the table is already predefined for you, meaning that it contains the rows, columns, and cells that will hold data. In HTML, all of these components must be created. The first step in entering data into the table is to add rows using the table row element: <tr>.
Spanning Columns (3)
In the example above, the data Out of Town spans the Monday and Tuesday table headings using the value 2 (two columns). The data Back in Town appear only under the Wednesday heading.
Linking to Other Web Pages (4)
In the example above, the href attribute has been set to the value of the URL https://www.wikipedia.org/. The example now shows the correct use of an anchor element. When reading technical documentation, you may come across the term hyperlink. Not to worry, this is simply the technical term for link. These terms are often used interchangeably.
Spanning Rows (3)
In the example above, there are four rows: 1. The first row contains an empty cell and the two column headings. 2. The second row contains the Morning row heading, along with Work, which spans two rows under the Saturday column. The "Relax" entry spans three rows under the Sunday column. 3. The third row only contains the Afternoon row heading.
Displaying Text (2)
In the example above, there are two different <div>. The second <div> contains a <p> with <span>Self-driving cars</span>. This <span> element separates "Self-driving cars" from the rest of the text in the paragraph. 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. If you want to divide your content into blocks, it's better to use a <div>.
Table Data (2)
In the example above, two data points (73 and 81) were entered in the one row that exists. By adding two data points, we created two cells of data. If the table were displayed in the browser, it would show a table with one row and two columns.
Linking to Relative Page (4)
In this example, the <a> 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. A relative path is a filename that shows the path to a local file (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). The ./ in ./index.html tells the browser to look for the file in the current folder.
Opening Links in a New Window (3)
In this exercise, we've used the terminology "open in a new window." It's likely that you are using a modern browser that opens up websites in new tabs, rather than new windows. Before the advent of browsers with tabs, additional browser windows had to be opened to view more websites. The target="_blank" attribute, when used in modern browsers, will open new websites in a new tab.
HyperText
Is text displayed on a computer or device that provides access to other text through links, also known as hyperlinks. You probably clicked on a couple of hyperlinks on your way to this Codecademy course.
Table Borders (3)
It's meant to illustrate older conventions you may come across when reading other developers' code. The browser will likely still interpret your code correctly if you use the border attribute, but that doesn't mean the attribute should be used. We use CSS to add style to HTML documents, because it helps us to separate the structure of a page from how it looks.
Preparing for HTML (1)
It's time to learn how to set up an HTML file. 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. The declaration looks like this: <!DOCTYPE html>This declaration is an instruction, and it must be the first line of code in your HTML document.
Divs (1)
One of the most popular elements in HTML. <div> is short for "division" or a container that divides the page into sections. These sections are useful for grouping elements in your HTML together. Divs don't inherently have a visual representation, but they are very useful when we want to apply custom styles to our HTML elements. Divs allow us to group HTML elements to apply the same styles for all HTML elements inside.
Linking to Other Web Pages (1)
One of the powerful aspects of HTML (and the Internet), is the ability to link to other web pages. 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. <a>This Is A Link To Wikipedia</a>
Body
Only content inside the opening and closing body tags can be displayed to the screen. Looks like: <body>Text</body> Once the files has a body, many different types of content-including text, images, and buttons-can be added to the body.
Ordered Lists (1)
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.
Image Alts (1)
Part of being an exceptional web developer is making your site accessible to users of all backgrounds. In order to make the Web more inclusive, we need to consider what happens when assistive technologies such as screen readers come across image tags. 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 Head (2)
Remember the <body> tag? The <head> element is part of this HTML metaphor. It goes above our <body> element. 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.
Table Data (1)
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>. <table> <tr> <td>73</td> <td>81</td> </tr> </table>
The Head (1)
So far you've done two things to set up the file properly: Declared to the browser that your code is HTML with <!DOCTYPE html> Added the HTML element (<html>) that will contain the rest of your code. We have added these elements to the Brown Bears page you previously created. Now, let's also give the browser some information about the page itself. We can do this by adding a <head> element.
Table Borders (1)
So far, the tables you've created have been a little difficult to read because they have no borders. In older versions of HTML, a border could be added to a table using the border attribute and setting it equal to an integer. This integer would represent the thickness of the border.
Where Does the Title Appear? (2)
So far, we have learned about: <!DOCTYPE html>, the declaration specifying the version of HTML for the browser. The <html> tags that enclose all of your HTML code. The <head> tag that contains the metadata of a webpage, such as its <title>. Next, you will learn about new types of elements that go inside the body.
Styling Text (2)
Take a look at each style in action: <p><strong>The Nile River</strong> is the <em>longest</em> river in the world, measuring over 6,850 kilometers long (approximately 4,260 miles).</p> In this example, the <strong> and <em> tags are used to emphasize the text to produce the following: The Nile River is the longest river in the world, measuring over 6,850 kilometers long (approximately 4,260 miles). As we can see, "The Nile River" is bolded and "longest" is in italics.
Linking at Will (2)
Thankfully, 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 <img> element with an <a> element.
Whitespace (3)
The browser ignores whitespace in HTML files when it renders a web page, so it can be used as a tool to make code easier to read and follow. What makes the example below difficult to read? <body><p>Paragraph 1</p> <p>Paragraph 2</p></body> You have to read the entire line to know what elements are present.
Linking to Relative Page (3)
The example above shows three different files — about.html, contact.html, and index.html in one folder. HTML files are often stored in the same folder, as shown in the example above. If the browser is currently displaying index.html, it also knows that about.html and contact.html are in the same folder. Because the files are stored in the same folder, we can link web pages together using a relative path. <a href="./contact.html">Contact</a>
Opening Tag (Definition)
The first HTML tag used to start an HTML element. The tag type is surrounded by opening and closing angle brackets.
Content (Definition)
The information (text or other elements) contained between the opening and closing tags of an HTML element.
Indentation (1)
The second tool web developers use to make the structure of code easier to read is indentation. The spaces are inserted using the space and tab bars on your keyboard. The World Wide Web Consortium, or W3C, is responsible for maintaining the style standards of HTML. At the time of writing, the W3C recommends 2 spaces of indentation when writing HTML code.
Videos (2)
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. The text, "Video not supported", between the opening and closing video tags will only be displayed if the browser is unable to load the video.
Line Breaks (1)
The spacing between code in an HTML file doesn't affect the positioning of elements in the browser. If you are interested in modifying the spacing in the browser, you can use HTML's line break element: <br>. 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.
Linking to Same Page (3)
The target link is a string containing the # character and the target element's id. <ol> <li><a href="#top">Top</a></li> <li><a href="#bottom">Bottom</a></li> </ol> In the example above, the links to <p id="top"> and <h1 id="bottom"> are embedded in an ordered list. These links appear in the browser as a numbered list of links. An id is especially helpful for organizing content belonging to a div!
Image Alts (2)
The value of alt should be a description of the image. <img src="#" alt="A field of yellow sunflowers" /> 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.
HTML Tags Review (2)
There are seemingly infinite numbers of tags to use (many more than we've taught). Knowing when to use each one is based on how you want to describe the content of your HTML. Descriptive, well-chosen tags are one key to high-quality web development. A full list of available HTML tags can be found in Mozilla documentation. Let's review what you've learned this lesson:
Linking to Other Web Pages (3)
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.<a href="https://www.wikipedia.org/"> This Is A Link To Wikipedia</a>.
Linking to Relative Page (1)
Thus far you have learned how to link to external web pages. Many sites also link to internal web pages like Home, About, and Contact. Before we learn how to link between internal pages, let's establish where our files are stored. When making multi-page static websites, web developers often store HTML files in the root directory, or a main folder where all the files for the project are stored.
Preparing for HTML (3)
To make sure your document is forever interpreted correctly, always include <!DOCTYPE html> at the very beginning of your HTML documents. Lastly, HTML code is always saved in a file with an .html extension.
Image Alts (3)
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.
Divs (2)
We can also style the div element as a whole. Divs can contain any text or other HTML elements, such as links, images, or videos. Remember to always add two spaces of indentation when you nest elements inside of divs for better readability.
Table Headings (3)
What happened in the code above? First, a new row was added to hold the three headings: a blank heading, a Saturday heading, and a Sunday heading. The blank heading creates the extra table cell necessary to align the table headings correctly over the data they correspond to. In the second row, one table heading was added as a row title: Temperature.
Spanning Columns (1)
What if the table contains data that spans multiple columns? For example, a personal calendar could have events that span across multiple hours, or even multiple days. 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.
Page Titles (1)
What kind of metadata about the web page can the <head> element contain? If you navigate to the Codecademy catalog and look at the top of your browser, you'll notice the words Full Catalog Courses & Tutorials | Codecademy, which is the title of the web page. A browser's tab displays the title specified in the <title> tag. The <title> tag is always inside of the <head>.
Indentation (3)
With correct indentation: <body> <p>Paragraph 1</p> <div> <p>Paragraph 2</p> </div> </body> In the example above, Paragraph 1 and the <div> tag are nested inside of the <body> tag, so they are indented two spaces. The Paragraph 2 element is nested inside of the <div> tag, so it is indented an additional two spaces.
Styling Text (1)
You can also style text using HTML tags. The <em> tag emphasizes text, while the <strong> tag highlights important text. Later, when you begin to style websites, you will decide how you want browsers to display content within <em> and <strong> tags. Browsers, however, have built-in style sheets that will generally style these tags in the following ways: The <em> tag will generally render as italic emphasis. The <strong> will generally render as bold emphasis.
HTML Tags Review (1)
You now know all of the basic elements and set-up you need to structure an HTML page and add different types of content. With the help of CSS, very soon you'll be creating beautiful websites. While some tags have a very specific purpose, such as image and video tags, most tags are used to describe the content that they surround, which helps us modify and style our content later.
The Head (3)
You'll see an example of this in the next exercise. The opening and closing head tags typically appear as the first item after your first HTML tag: <head> </head>
Linking at Will (1)
You've probably visited websites where not all links were made up of text. Maybe the links you clicked on were images or some other form of content. So far, we've added links that were made up of only text, like the following: <a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank">Prickly Pear</a> Text-only links, however, would significantly decrease your. flexibility as a web developer!
