Introduction

Web pages are created using HTML and CSS. What do these languages do?

  • HTML is used to establish a page's structure. It also lets us add text, links and images.

  • CSS is used to control the design and layout of the page.

HTML elements

HTML elements are the building blocks of web pages.

The web page to the right is made up of a collection of HTML elements. Each element is outlined in blue and labeled with its name.

HTML elements describe each piece of content on a web page so that the web browser knows how to display it.

The next few cards will cover five common HTML elements.

Html-elements

Heading elements

Headings are described by heading elements. There are six levels of heading elements: h1 to h6.

The h1 element is used to describe the main heading of the page.

Heading

Try it out

Change the text of the h1 element from "Find a place to stay" to "This is the main heading"


<p>

Similar to a news article or a word document, headings in a web page are usually followed by paragraphs.

In HTML, paragraphs are described by paragraph elements, or p elements.

P

Try it out

Below the h1 element, add a p element that says Rent from people in over 34,000 cities and 192 countries.


<a>

The defining feature of the Web is the presence of links. Clicking on links leads to other web pages. The a element is used to create links.

The a element is similar to the h1 or p elements, but it has two key differences:

  • First, it has an href attribute which equals the website you want to link to.

  • Second, you get to choose the link text that users see on the page.

A

Try it out

First change the link address to https://www.airbnb.com/locations. Then change the link text to Learn More.


<img>

In addition to headings and paragraphs, a web page can have images. The img element is used to add images to a page.

The img element has an attribute inside the opening <img> tag named src. The src attribute has the address of the image.

Img

Try it out

Change the image address to https://goo.gl/mbnqBl.


<ul> and <li>

In addition to paragraphs and images, content can be presented as lists.

In HTML, a bulleted list is described using a ul element. Each item in the list is placed inside an li element.

Ul-li

Try it out

Change the first li element text from "Brand" to "Home". Then change the second li element text from "Browse" to "About".


<html> and <body>

Here's an example of a real web page:

  • Everything inside a web page is nested inside the html element

  • The body element contains the actual content of the web page - everything nested inside <body> and </body> shows up in the web browser

The doctype at the start of the HTML file tells the browser which version of HTML you are using. The doctype is not an HTML element, so it doesn't have a closing tag. The doctype ensures that your web page displays consistently when its visited from different browsers.

Html-summary
  • ?