Want to create interactive content? It’s easy in Genially!

Get started free

HTML Guide for Beginners

Elle

Created on November 5, 2024

Start designing with a free template

Discover more than 1500 professional designs like these:

Christmas Spirit Test

Corporate Icebreaker

Retro Bits Quiz

Bomb Quiz

Witchcraft Quiz

Halloween Quiz

Day of the Dead Quiz

Transcript

Building the Web

A guide to HTML

Start

Building the Web

Table of Contents

What Makes a Website?

Creating an HTML Document

Adding Content

Links and Images

What makes a website?

When you visit a website on your browser, the web server sends you an HTML document. HTML, or HyperText Markup Language, is the building block of the web!

Websites are designed and coded in HTML. Browsers understand HTML and turn it into elements that we can see on our screens.

What makes a website?

An HTML document contains tags, which are kind of like building blocks. Different tags add different elements to the website.

For example, the <nav> tag could be used to define a navigation bar. The links in the bar might be contained in a <ul> tag, which creates an unordered list.

What makes a website?

LOOK AT THAT

HTML Documents

An HTML document starts with the <DOCTYPE! html> tag. This tells the browser that it's about to read an HTML file. The next three tags define the structure of the document: <html>, <head>, <body>.

HTML Documents

The <html> tag contains the entire document. The <head> tag contains information about the document that the browser might find useful. Here, we have a <meta> tag that tells the browser that our site uses UTF-8 characters. We also have a <title> tag; this is what defines what you see as the website's name on your browser tab! The <body> tag contains the rest of our tags and is where we define the content of our website.

Adding content to our website

Within the body tag, we can define all types of content for our site. The most common type of web content is text, and HTML has a variety of tags for that:

  • <h1> - for headings and titles. The `h` tags go from 1-6 (i.e. <h6>), getting smaller in text as the numbers go higher.
  • <p> - for paragraphs and longer content
  • <ul>, <ol>, <li> - these tags are used for lists. They define unordered lists, ordered lists, and list items respectfully.
Adding content to our website
Links and images

The best part about the web is that it's interactive! In HTML, we can use hyperlinks and images to make our websites show and do more! Links are defined with the <a> tag, and they have some special properties.

Links and images

<a> tags need the `href` attribute to tell the browser where your link is going. Browsers can style tags differently depending on whether or not you've already visited a website!

Module completed!

With this knowledge, you can learn more about HTML and CSS!