This lesson provides a high-level overview of four main languages used by web developers. This includes: HTML, CSS, JavaScript, and SQL. If you're planning on building a web application but you aren't sure where to start, this lesson will give you a good sense of what you need to learn and why you need to learn it.

Languages for Web Development

Now that Alejandra has her website looking polished, she's realized that she wants the site to be more interactive. She would like to build a shopping cart feature that allows her users to buy travel packages directly from her website.

To accomplish this, Alejandra is going to need to learn JavaScript. Any website that provides more than just static information probably utilizes JavaScript in some way. Here are some familiar examples of website features most often built with JavaScript:
* popup ads
* animated graphics (2D or 3D)
* interactive audio and video
* maps and other features access the user's geographic location
* and much more!

One of the defining features of JavaScript is its ability to respond to browser events. These events happen in real time and can be triggered by a wide variety of user interactions, including:
* the user clicking on a button
* the user pressing enter on their keyboard
* a video file finishing loading
* the user re-sizing their window
* the user hovering over text on the webpage

What is JavaScript?

HTML tags are the "markup" for HTML. They are annotations that provide information about the type of content they contain. Let's take a close look at the syntax for how HTML tags surround content to create an HTML element.

The diagram displays an HTML paragraph element. As we can see, the paragraph element is made up of one opening tag (`<p>`), the content (“Hello World!” text), and a closing tag (`</p>`). 

Let's quickly review each part of the element pictured:
* HTML element  — a unit of content in an HTML document formed by HTML tags and the text or media it contains.
* Opening Tag — the element name 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.



HTML Elements

Alejandra knows that the first step to building a website is learning HTML. Why? _HTML_ is the skeleton of all web pages. It provides structure to the content on a website, including text, images, buttons, videos, and more.

HTML is a practical place to start learning to code. You can build basic websites after learning just a little HTML, with text, images, and videos. You can always open up your work-in-progress website with your browser and see what you're building.

HTML stands for __h__ypertext __m__arkup __l__anguage. In the next few exercises, we will look at the HTML acronym word-by-word to unpack what HTML really means.



What is HTML

Using just HTML, Alejandra was able to build a website that contains all of the content that she wants. But it doesn't look very impressive—Alejandra knows that a basic black and white website won't give her business the credibility she needs to find new customers.

That's where CSS comes in! _CSS_ is the language that provides *style* to the content of an HTML page. This includes colors, fonts, positioning, layout, and more!

Why do we need a separate language for content and presentation? This is an example of the computer science principle _separation of concerns_. Large codebases are kept maintainable when each section has clearly differentiated problems that it is trying to solve. 

Since the styling rules are described separately from the content itself, if Alejandra adds more paragraphs, images, or other forms of content, she can expect them to be styled the same way as her existing content. This will save Alejandra time in the long run, especially as her website gets more and more complex.



What is CSS?

In the last exercise, you started to think about two key building blocks of JavaScript: functions and events. Let's review:

* Functions allow us to write a chunk of code once that can be reused over and over.
* Events allow JavaScript to respond to user behaviors, like the user hovering their mouse over an HTML element or resizing their window.

Events and functions combine to give JavaScript the ability to create interactive experiences. When an event is fired, a function is executed. This pattern is used again and again in web development to create interactive websites.

JavaScript Functions

Okay, let's practice using HTML elements by writing a few different tags.

Here are a few common tags that you can start getting familiar with:
```html
<h1>This is a heading, it emphasizes text.</h1>

<p>This is a paragraph, it is the most common tag for larger chunks of text.</p>

<a>This is an anchor tag, used to specify the text that is the "anchor" for a link.</a>

<button>This is a button.</button>
```




Common Tags

Let's explore how hypertext works by adding a link to a basic website! 

Reading and modifying code is an essential first step in learning to build things for the web. This practice can take you a long way while you're learning to build websites from scratch.

An _attribute_ in HTML provides additional information about an HTML element. It comes in a name and value pair with the structure `name="value"`. For example, you can specify the width of an HTML element with the attribute `width="500"`.

Links are created in HTML with something called the `href` attribute, which stands for **h**yperlink **ref**erence. The `href` attribute allows us to specify the URL, or address on the web, that a link should take users to. See below for an example of the `href` attribute in action. 

When we set the `href` attribute on an anchor tag (abbreviated to `<a>`) we can specify both the text that should be rendered for the user (the text within the anchor tag) and the URL that the browser should navigate to.

With this code, we're assigning the value `www.codecademy.com` to the `href` attribute. When a user clicks on the text of this link (Learn to code!), they will be directed to www.codecademy.com.

```html
<a href="www.codecademy.com">Learn to code!</a>
```


Adding Hyperlinks

Now that Alejandra has built out the user-facing checkout features of her website, she's realized that she needs to store all of this information somewhere! She needs her application to be able to store, retrieve, and modify data like usernames, shipping addresses, payment information, and more.

In order to build out these features, Alejandra needs to learn some _SQL_, which stands for __s__tructured __q__uery __l__anguage. You might be familiar with SQL as a language that Data Analysts and Data Scientists use to query and analyze data. 

SQL stores information in tables, which is simply a collection of information organized into rows and columns. If you've worked with a spreadsheet like Microsoft Excel or Google Sheets, you might be familiar with working with tables. To get the information, you would write a *query*, or a  program that would retrieve data from the table.

Here's an example of a query that would select all of the columns —the `*` keyword is a shorthand for "all"—  from the `page_views` table:

```sql
SELECT * FROM page_views;
```

Web developers and software engineers also use SQL to build apps that can save, modify, and access data. There's even a growing field of *data engineering*, which is a specialized subset of software engineers who ensure that the applications they are working with accurately and efficiently record all of the required data.



What is SQL?

Alejandra has learned CSS and created the desired visual rules to make her website look sleek and polished. 

Navigate to the __style.css__ file to take a look at the CSS code that she's written. 

In this file, you will recognize many of the HTML tags that you have been working with — and maybe a few that you haven't seen yet! CSS contains *selectors* that specify the HTML elements to which the style should be applied as well as *visual rules* that specify how that content should be displayed.

Now it's time to use the HTML link element to apply the CSS file to her existing website. This is done with an HTML link tag. An HTML link tag is often used to create a connection between an HTML file and the CSS file and tells the browser to apply the CSS styles to the HTML.




Applying CSS

Alejandra now has a fully functional web application for her small business!

In building out the features that she needed for her business's application, she learned about the four languages that form the core of the World Wide Web today:
* **HTML** — structures website content
* **CSS** — applies styling to websites
* **JavaScript** — adds interactivity to websites
* **SQL** — allows your web application to store and retrieve data


While these languages are each essential to web development, many of them also have applications in other fields. For example, JavaScript was initially just a language for interacting with HTML, but JavaScript has expanded to be a general-purpose programming language that can be run outside of the browser. You can now build web applications, browser games, desktop applications, and even VR/AR experiences in JavaScript.

Learning web development has given Alejandra the skills that she needed for her business and also opened the door for her to take on more and more technical projects in a wide variety of fields.

Are you interested in more content about picking your first language? Try out [Choosing Your First Language](https://www.codecademy.com/learn/choosing-a-programming-language-track)!

Image of Alejandra surrounded by JavaScript, HTML, and CSS icons

Review

The H and T in HTML stands for **h**yper**t**ext. Hypertext is text that is linked to other text. This diagram shows different websites that are connected to each other through links, which are represented by arrows.

What's so hyper about hypertext? The prefix *hyper* indicates that the text expands beyond the traditional constraints of the written word. Instead of reading documents from beginning to end, like you would read a book, someone going through hypertext can *browse*. By clicking on links from one document to another, the user can navigate to whatever page they find the most interesting and carve their own unique path through the web.

Many modern websites provide rich user experiences, with features like embedded videos, animations, and interactivity, so it doesn't necessarily feel like you are just navigating from one HTML page to the next. But despite all of the advances that have taken place with the growth of the web, at its core the web is still just a collection of hyperlinked documents.



A series of webpage like images showing links from one to another.

Hypertext and the World Wide Web

Welcome to the world of web development! Millions of users have learned to make websites and web applications on Codecademy — and you could be next.

Having web development skills allows you to take your big ideas — whether it's a simple website, a complex web application, or even a browser game — and build them on the web!  

Meet Alejandra! She is a budding web developer. She runs a small travel agency. Alejandra finds her customers mostly through word of mouth, but now she's ready to expand her business by building a website.

In this lesson, we will follow Alejandra along her journey to learn new languages for web development, and we will see what kinds of features each new skill allows Alejandra to build for her site.

The four main languages that Alejandra needs to learn include:
* **HTML** — structures website content
* **CSS** — applies styling to websites
* **JavaScript** — adds interactivity to websites
* **SQL** — allows your web application to store and retrieve data

We'll follow along with Alejandra as she picks up each of these languages, starting with HTML.



What is Web Development

The _ML_ in HTML stands for _markup language_. Markup refers to a way of annotating text that is distinguishable from the text itself. The same way that a teacher might "markup" a student essay by underlining topic sentences and circling spelling errors, HTML annotates the content within a web page.

A teacher might use a red pen to make sure that their comments are easy to distinguish from the student's own work. HTML separates content and annotation by using HTML tags, which are denoted by angle brackets (also known as less-than and greater-than signs).

An example of HTML code for a website side by side with an imagined autobiography page, demonstrating the similarities in structure.