HTML Saját Jegyzet
HTML Saját Jegyzet
HTML Saját Jegyzet
Introduction to HTML
Introduction to HTML
Welcome to the world of code! Last year, millions of learners from our community started with
HTML. Why? HTML is the skeleton of all web pages. It’s often the first language learned by
developers, marketers, and designers and is core to front-end development work. If this is your first
time touching code, we’re excited for what you’re about to create.
So what exactly is HTML? HTML provides structure to the content appearing on a website, such as
images, text, or videos. Right-click on any page on the internet, choose “Inspect,” and you’ll see
HTML in a panel of your screen.
HTML stands for HyperText Markup Language:
• A 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.
• 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.
Learning HTML is the first step in creating websites, but even a bit of knowledge can help you
inject code snippets into newsletter, blog or website templates. As you continue learning, you can
layer HTML with CSS and JavaScript to create visually compelling and dynamic websites. But for
now, we’re going to focus on how to add and modify basic content on a page, like text, images, and
videos. Don’t worry if the websites look ugly — we’re just getting started.
HTML Anatomy
HTML is composed of elements. These elements structure the webpage and define its content. Let’s
take a look at how they’re written.
The diagram to the right displays an HTML paragraph element. As we can see, the paragraph
element is made up of:
• An opening tag (<p>)
• The content (“Hello World!” text)
• A closing tag (</p>)
A tag and the content between it is called an HTML element. There are many tags that we can use
to organize and display text and other types of content, like images.
Let’s quickly review each part of the element pictured:
• HTML element (or simply, element) — a unit of content in an HTML document formed by
HTML tags and the text or media it contains.
• HTML Tag — the element name, surrounded by an opening (<) and closing (>) angle
bracket.
• Opening Tag — the first HTML tag used to start an HTML element. The tag type is
surrounded by opening and closing angle brackets.
• Content — The information (text or other elements) contained between the opening and
closing tags of an HTML element.
• Closing tag — 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.
The 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. Here’s what opening and closing
body tags look like:
<body>
</body>
Once the file has a body, many different types of content – including text, images, and buttons – can
be added to the body.
<body>
<p>What's up, doc?</p>
</body>
HTML Structure
HTML is organized as a collection of family tree relationships. As you saw in the last exercise, we
placed <p> tags within <body> tags. 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 of the parent
element.
<body>
<p>This paragraph is a child of the body</p>
</body>
In the example above, the <p> element is nested inside the <body> element. The <p> element is
considered a child of the <body> element, and the <body> element is considered the parent. You
can also see that we’ve added two spaces of indentation (using the space bar) for better
readability.
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.
Let’s consider a more complicated example that uses some new tags:
<body>
<div>
<h1>Sibling to p, but also grandchild of body</h1>
<p>Sibling to h1, but also grandchild of body</p>
</div>
</body>
In this example, the <body> element is the parent of the <div> element. Both the <h1> and <p>
elements are children of the <div> element. Because the <h1> and <p> elements are at the same
level, they are considered siblings and are both grandchildren of the <body> element.
Understanding HTML hierarchy is important because child elements can inherit behavior and
styling from their parent element. You’ll learn more about webpage hierarchy when you start
digging into CSS.
Headings
Headings in HTML 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 an educational article.
HTML follows a similar pattern. 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.
1. <h1> — used for main headings. All other smaller headings are used for subheadings.
2. <h2>
3. <h3>
4. <h4>
5. <h5>
6. <h6>
The following example code uses a headline intended to capture a reader’s attention. It uses the
largest heading available, the main heading element:
<h1>BREAKING NEWS</h1>
Divs
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.
<body>
<div>
<h1>Why use divs?</h1>
<p>Great for grouping elements!</p>
</div>
</body>
<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.
You can see how this can be done in the Learn CSS course.
<div>s 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 <div>s for better
readability.
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
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>
Displaying Text
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>
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>.
Styling Text
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.
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
Line Breaks
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.
<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).
Unordered Lists
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.
<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 <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.
Videos
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 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.
Review
Congratulations on completing the first lesson of HTML! You are well on your way to becoming a
skilled web developer.
Let’s review what you’ve learned so far:
• HTML stands for HyperText Markup Language and is used to create the structure and
content of a webpage.
• Most HTML elements contain opening and closing tags with raw text or other HTML tags
between them.
• HTML elements can be nested inside other elements. The enclosed element is the child of
the enclosing parent element.
• Any visible content should be placed within the opening and closing <body> tags.
• Headings and sub-headings, <h1> to <h6> tags, are used to enlarge text.
• <p>, <span> and <div> tags specify text or blocks.
• The <em> and <strong> tags are used to emphasize text.
• Line breaks are created with the <br> tag.
• Ordered lists (<ol>) are numbered and unordered lists (<ul>) are bulleted.
• Images (<img>) and videos (<video>) can be added by linking to an existing source.
In the next lesson, we’ll take the content that you’ve added to this website and transform it into an
HTML document that’s ready to go on the web.
Image Alts
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 value of alt should be
a description of the image.
<img src="#" alt="A field of yellow sunflowers" />
• 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.
Preparing for HTML
Now that we’ve learned about some of the most common HTML elements, 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. 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.
Lastly, HTML code is always saved in a file with an .html extension.
The <html> tag
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>:
<!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.
The Head
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.
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. 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>
Page Titles
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>.
<!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).
Where Does the Title Appear?
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.
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.
Linking to Other Web Pages
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>
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. 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>
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.
Opening Links in a New Window
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.
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!
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.
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.
Linking to Relative Page
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. 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
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>
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.
Linking At Will
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!
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.
<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.
Linking to Same Page
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:
<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. 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!
Whitespace
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.
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. 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. 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.
Indentation
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. 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.
<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.
Comments
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. -->
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> -->
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.
HTML Tags
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. 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:
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.
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.
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!
Introduction to Tables
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!
Create a Table
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.
Table Rows
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>.
<table>
<tr>
</tr>
<tr>
</tr>
</table>
In the example above, two rows have been added to the table.
Table Data
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>
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.
Table Headings
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.
<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>
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:
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.
HTML code for tables may look a little strange at first, but analyzing it piece by piece helps make
the code more understandable.
Table Borders
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.
<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. 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. 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.
Spanning Columns
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.
<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>
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.
Spanning Rows
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.
<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>
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.
Table Head
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.
<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>
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 Footer
The bottom part of a long table can also be sectioned off using the <tfoot> element.
<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>
In the example above, the footer contains the totals of the data in the table. Footers are often used to
contain sums, differences, and other data results.
Styling with CSS
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.
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.
Review
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.
• 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.
• 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.
Introduction to HTML Forms
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!
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.
How a Form Works
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.
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:
<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.
• 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. 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:
<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>
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>!
Text 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.
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. 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:
<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). When initially loaded, it will be an empty box:
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. For instance, if a user typed in “important
details” in the text field created by our <input> element:
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>
Which renders:
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 action="/example.html" method="POST">
<label for="meal">What do you want to eat?</label>
<br>
<input type="text" name="food" id="meal">
</form>
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.
An <input type ="password"> element will replace input text with another character like
an asterisk (*) or a dot (•). The code below provides an example of how to create a password field:
<form>
<label for="user-password">Password: </label>
<input type="password" id="user-password" name="user-password">
</form>
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.
Number Input
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 .). 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>
Which renders:
Instructions
1.
In index.html we started a <form> for users to make a custom burger. Right now we have a
<label> for patties that needs an associated <input> element.
Since we want users to enter a number, create an <input> and set the attributes:
• Associate the <input> to the first <label> by assigning the correct value to id.
• type="number"
• step="1"
• name to "amount".
Range Input
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>. 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:
<form>
<label for="volume"> Volume Control</label>
<input id="volume" name="volume" type="range" min="0" max="100" step="1">
</form>
Which renders:
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.
• 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>.
Which renders:
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. To group radio buttons together,
we assign them the same name and only one radio button from that group can be selected.
Which renders:
And if we click on the field containing the first option, the list is revealed:
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. 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".
Datalist Input
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:
<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>
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>.
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:
<form>
<label for="blog">New Blog Post: </label>
<br>
<textarea id="blog" name="blog" rows="5" cols="30">
</textarea>
</form>
In the code above, an empty <textarea> that is 5 rows by 30 columns is rendered to the page
like so:
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:
<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!
Submit Form
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". For instance:
<form>
<input type="submit" value="Send">
</form>
Which renders:
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.
This renders a text box, and if we try to submit the <form> without filling it out we get this
message:
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!
Set a Minimum and Maximum
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:
<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>
If a user tries to submit an input that is less than 1 a warning will appear:
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
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.
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:
<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>
If a user tries to submit the <form> with less than the set minimum, this message appears:
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>.
Matching a Pattern
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.
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:
<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>
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:
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!
Review
Awesome job adding client-side validation to <form>s!
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.
Introduction to Semantic HTML
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. 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.
This can be compared to the code below which uses a <div> tag instead of a <header> tag:
<div id="header">
<h1>
Everything you need to know about pizza!
</h1>
</div>
By using a <header> tag, our code becomes easier to read. 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:
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
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!
Main and Footer
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. 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.
<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>
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. The footer contains information such as:
• Contact information
• Copyright information
• Terms of use
• Site Map
• Reference to top of page links
For example:
<footer>
<p>Email me at Codey@Codecademy.com</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.
Article and Section
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>. 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>
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.
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>
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.
The Aside Element
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
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>
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.
Figure and Figcaption
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.
<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.
<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.
<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. 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.
Audio and Attributes
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>
• 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>
In the code above, a video file named coding.mp4 is being played. The “Video not supported”
will only show up if the browser is unable to display the video.
Another tag that can be used to incorporate media content into a page is the <embed> tag, which
can embed any media content including videos, audio files, and gifs from an external source. This
means that websites that have an embed button have some form of media content that can be added
to other websites. The <embed> tag is a self-closing tag, unlike the <video> element. Note that
<embed> is a deprecated tag and other alternatives, such as <video>, <audio> and <img>,
should be used in its place, but is being taught for legacy purposes.
Below we’ll take a look at <embed> being used in action.
<embed src="download.gif"/>
In the example above, <embed> is being used to add in a gif from a local file known as
download.gif. Embed can be used to add local files as well as media content straight from
some other websites.
Review
Congrats on completing this lesson on Semantic HTML! Now that you know the benefits of
Semantic HTML and how to use it, you can incorporate semantic elements into your website to
make it more accessible and to make the code easier to read.
Let’s review some of the topics we covered throughout the lesson:
• Semantic HTML introduces meaning to a page through specific elements that provide
context as to what is in between the tags.
• Semantic HTML is a modern standard and makes a website accessible for people who use
screen readers to translate the webpage and improves your website’s SEO.
• <header>, <nav> , <main> and <footer> create the basic structure of the webpage.
• <section> defines elements in a document, such as chapters, headings, or any other area
of the document with the same theme.
• <article> holds content that makes sense on its own such as articles, blogs, comments,
etc.
• <aside> contains information that is related to the main content, but not required in order
to understand the dominant information.
• <figure> encapsulates all types of media.
• <figcaption> is used to describe the media in <figure>.
• <video>, <embed>, and <audio> elements are used for media files.