HTML Basics

A Beginners Guide

With HTML Files “The Grand Table" Restaurant

 1

Contents
Module 1 — Before We Begin .......................................................................................................... 3
1.1 Setting Up Your Computer..................................................................................................... 3
Module 2 — What is HTML? ............................................................................................................ 4
2.1 The Full Form and Meaning ................................................................................................... 4
2.2 The Big Idea .......................................................................................................................... 5
2.3 What Happens If We Skip HTML ........................................................................................... 5
2.4 Is HTML Still Relevant in the Age of AI? ................................................................................ 6
Module 3 — HTML Elements and Tags ........................................................................................... 6
3.1 What is a Tag? ...................................................................................................................... 6
3.2 What is an Element? ............................................................................................................. 7
3.3 Common HTML Tags Used in Our Restaurant Website ........................................................ 7
Module 4 — The Framework of Every HTML File............................................................................. 8
4.1 The Four Essential Tags........................................................................................................ 8
4.2 No Style Tag in the Head....................................................................................................... 8
4.3 Comments in HTML............................................................................................................... 9
Module 5 — Attributes ..................................................................................................................... 9
5.1 What is an Attribute? ............................................................................................................. 9
5.2 The src and alt Attributes — Images .................................................................................... 10
5.3 The href Attribute — Links ................................................................................................... 10
Module 6 — Inline Style ................................................................................................................. 11
6.1 What is Style? ..................................................................................................................... 11
6.2 The Format of Inline Style.................................................................................................... 11
6.3 Common Style Properties .................................................................................................... 11
6.4 Colours in HTML ................................................................................................................. 12
6.5 Writing Styles the Modern Way............................................................................................ 12
Module 7 — The Table Tag ........................................................................................................... 13
7.1 Why Tables? ....................................................................................................................... 13
7.2 A Simple Table .................................................................................................................... 13
7.3 Tables in Our Restaurant Website ....................................................................................... 14
7.4 The Most Important Table Rule ........................................................................................... 14
7.5 Useful Table Style Properties .............................................................................................. 14
Module 8 — Images and Links ....................................................................................................... 15
8.1 The img Tag ........................................................................................................................ 15
8.2 The a Tag — Links .............................................................................................................. 15
Module 9 — Lists ........................................................................................................................... 16
 2

9.1 Two Types of Lists............................................................................................................... 16

9.2 Unordered List — ul............................................................................................................. 16
9.3 Ordered List — ol ................................................................................................................ 17
9.4 When to Use ul vs ol? .......................................................................................................... 17
Module 10 — Forms ...................................................................................................................... 17
10.1 What is a Form? ................................................................................................................ 17
10.2 Form Tags and Their Attributes ......................................................................................... 17
10.3 The Feedback Form in [Link] ............................................................................... 18
10.4 The onclick Alert ................................................................................................................ 18
Module 11 — Putting It All Together .............................................................................................. 19
11.1 How Our Three Pages Link to Each Other ......................................................................... 19
11.2 HTML Entity Codes — Special Symbols ............................................................................ 19
11.3 The iframe Tag — Google Maps........................................................................................ 20
11.4 Good Habits for Writing HTML ........................................................................................... 20
11.5 If You Would Like to Learn More ....................................................................................... 20
Quick Reference Card ................................................................................................................... 22
 3

HTML Basics
A Beginner's Guide
Using "The Grand Table" Restaurant Website as Our Example

Tool Required: Notepad++ | No Internet Needed to Begin

Module 1 — Before We Begin

1.1 Setting Up Your Computer
Before writing a single line of HTML, we need to set a few things up. These steps are important and
must be done first every single time you start a new website project.

Step 1 — Install Notepad++

We will write all our HTML code in a program called Notepad++. It is a free text editor that colours
your code and makes it easy to read and edit.
• Download Notepad++ from [Link]
• It is completely free
• Do NOT use Microsoft Word — Word adds hidden formatting that breaks HTML
• Regular Notepad also works but Notepad++ is much better for beginners

💡 Notepad++ colours different parts of your HTML code in different

colours. This helps you spot mistakes very quickly.

Step 2 — Create a Project Folder

A website is not just one file. It has HTML pages, images, and later CSS files. All of these files must
stay together in one folder. This is called your project folder.
• Open File Explorer on your computer
• Go to your Desktop or Documents
• Right click and choose New Folder
• Name it: grand-table-website

Important Rule: Never put spaces in folder names or file names. Use a hyphen - instead of a
space. Computers handle hyphens better than spaces in file paths.
 4

Your folder should look like this:

grand-table-website/
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]

Step 3 — Why Must Images Be in the Same Folder?

When you write this in your HTML:
<img src="[Link]" alt="Banner">
The browser looks for [Link] in the SAME folder as your HTML file. If the image is somewhere
else on your computer, the browser cannot find it and the image will not show.
💡 Always save your images into your project folder BEFORE you link them
in your HTML.

Step 4 — Why Must the First Page Be Named [Link]?

When you type a website address like [Link] into a browser, the browser automatically
looks for a file called [Link] inside the website folder. It is a rule that all web servers follow.
• If your first page is called [Link], the browser will not find it automatically
• [Link] is the standard name for the home page of every website in the world
• Our restaurant home page is saved as [Link] for this exact reason

Think of [Link] as the front door of your website. Every website must have a front door.

Module 2 — What is HTML?

2.1 The Full Form and Meaning
HTML stands for HyperText Markup Language. Let us understand each word:

Word What it means

HyperText Text that contains links — clicking a word takes you to
another page
 5

Word What it means

Markup Marking up content using tags to describe what each part is
Language A set of rules and words that the browser understands

HTML is NOT a programming language. It does not do calculations or make decisions. It simply
describes the structure of a page — what is a heading, what is a paragraph, where is the image,
where is the link.

💡 Think of HTML as a set of instructions to the browser. You are telling

the browser: this is a heading, this is a paragraph, show this image here.

2.2 The Big Idea

HTML = structure (skeleton)
AI = helper (assistant, not boss)

We must understand the skeleton before dressing it or asking AI to help.

HTML is taught but to understand how digital systems are structured and how AI-generated content
must be evaluated.” And it is also used to build websites.

When we teach HTML, we are not training web developers.

We are teaching:
• How the web works
• Structure and logic
• How machines interpret instructions
• Digital literacy
• Cause → effect thinking
• HTML is:
• The grammar of the internet
• Without grammar, AI output is blind copy-paste.

2.3 What Happens If We Skip HTML

• They trust AI blindly
• They cannot debug errors
• They can’t modify AI output
• They become users, not thinkers
 6

2.4 Is HTML Still Relevant in the Age of AI?

This is a great question. If AI can build websites, why do we need to learn HTML?

Here is the truth:

• Every single webpage you see on the internet — Google, YouTube, Instagram, news
websites — all of them are built with HTML at the foundation
• AI tools like ChatGPT generate HTML code. If you do not understand HTML, you cannot
check if the code is correct or fix it when it breaks
• AI makes mistakes. The person who understands HTML can spot the mistake and correct it.
The person who does not understand HTML is stuck
• Understanding HTML makes you a better problem solver and a better communicator with AI
tools
• HTML takes just a few days to learn the basics. It is one of the easiest languages to start
with

The Grand Table restaurant website you are looking at was built entirely in HTML. You will
understand every single line of it by the end of this guide.

Module 3 — HTML Elements and Tags

3.1 What is a Tag?
A tag is a keyword wrapped in angle brackets < >. Tags are the building blocks of HTML.

<h1> This is an opening tag

</h1> This is a closing tag — notice the forward slash /

Most tags come in pairs — an opening tag and a closing tag. The content goes between them.
<h1>The Grand Table</h1>

Rule: Always type the closing tag immediately after the opening tag, before you type anything
else. This prevents the most common beginner mistake of forgetting to close a tag.

The correct way to write a tag:

1. Type the opening tag: <h1>
2. Type the closing tag: </h1>
3. Go back and type your content between them: <h1>The Grand Table</h1>
 7

3.2 What is an Element?

An element is the complete package — the opening tag + the content + the closing tag.

<h1>The Grand Table</h1>

↑ ↑
opening tag closing tag
↑
content

The whole line above is ONE element.

3.3 Common HTML Tags Used in Our Restaurant Website

Tag What it does and where we used it

<h1> The biggest heading — used for the restaurant name: The
Grand Table
<h2> Second level heading — used for section titles like
Welcome, About Us
<h3> Third level heading — used for dish names like Chicken
Biryani
<p> Paragraph — used for descriptions and normal text
<b> Bold text — used for prices like Rs. 250
<br> Line break — moves to the next line (no closing tag needed)
<a> Anchor — creates a clickable link
<img> Image — displays a picture (no closing tag needed)
<ul> Unordered List — a list with bullet points
<ol> Ordered List — a list with numbers
<li> List Item — one item inside a ul or ol list
<table> Table — creates a table with rows and columns
<tr> Table Row — one row inside a table
<td> Table Data — one cell inside a row

In our restaurant website: the name The Grand Table uses h1, dish names like Chicken Biryani
use h3, and all descriptions use p tags.
 8

Module 4 — The Framework of Every HTML File

4.1 The Four Essential Tags
Every single HTML file in the world must have these four tags. Without them the page may still work
in some browsers, but it is considered incomplete and incorrect.

<html>

<head>
<title>The Grand Table Restaurant</title>
</head>

<body>
Everything the user sees goes here
</body>

</html>

Tag Purpose
<html> The outer wrapper. Everything else goes inside this tag
<head> Information ABOUT the page. The user does not see this
section
<title> The name shown on the browser tab at the top of the screen
<body> Everything the user sees — headings, paragraphs, images,
tables

💡 Open [Link] in Notepad++. Can you find all four of these tags? The
html tag wraps everything, the head comes first inside it, then the body.

4.2 No Style Tag in the Head

In our restaurant website we choose to write all styles directly inline on each tag. This is a
deliberate teaching choice — when you look at any tag you can see exactly how it is styled right
there on the same line. The head section is clean and has only the title tag.

<head>
<title>The Grand Table Restaurant</title>
 9

</head>

Writing styles inline means every element carries its own style with it. You do not have to look
anywhere else to know how something is styled — it is all right there on the tag. This makes it
much easier to learn and understand as a beginner.

4.3 Comments in HTML

A comment is a note you write in your code for yourself or other programmers. The browser
completely ignores comments. They do not appear on the page.
<!-- This is a comment. The browser ignores this line -->
<!-- HEADER -->
<!-- NAVIGATION -->
<!-- BANNER IMAGE -->

In our restaurant website, every section starts with a comment so it is easy to find:
<!-- HEADER -->
<table style='...'> ... </table>

<!-- NAVIGATION -->

<table style='...'> ... </table>

💡 Good programmers always comment their code. It helps you remember what
each section does when you come back to it later.

Module 5 — Attributes
5.1 What is an Attribute?
An attribute gives extra information to a tag. It always goes INSIDE the opening tag, after the tag
name.

<img src="[Link]" alt="Restaurant Banner">

↑ ↑
attribute 1 attribute 2

The format is always:

attribute-name="value"
 10

Attribute Example What it does

src="[Link]" src tells the browser where to find the image file
alt="Restaurant alt shows text if the image fails to load
Banner"
href="[Link]" href tells the a tag which page to link to
width="100%" width sets how wide an element is
style="color: red;" style changes the appearance of the element

5.2 The src and alt Attributes — Images

The img tag is used to display images. It does not have a closing tag.
<img src="[Link]" alt="Chicken Biryani">

• tells the browser the filename of the image. The image must be in the same folder —
src
• is shown if the image cannot load. It is also read by screen readers for blind users —
alt

In our restaurant website, every dish image in [Link] uses the img tag with src pointing to
the image filename and alt describing the dish.

5.3 The href Attribute — Links

The a tag creates a clickable link. The href attribute tells it where to go.
<a href="[Link]">Our Menu</a>

In our restaurant navigation bar:

<a href="[Link]">Home</a>
<a href="[Link]">Our Menu</a>
<a href="[Link]">Contact Us</a>

You can also link to a section on the SAME page using a # symbol:
<a href="#fullmenu">View Full Menu List</a>

And the target section must have a matching id attribute:

<table id="fullmenu">
 11

In our restaurant website, the View Full Menu List link at the top of [Link] uses
href='#fullmenu' to jump to the full menu list further down the same page.

Module 6 — Inline Style

6.1 What is Style?
Style means changing how something looks — its colour, size, spacing, background, border. In
HTML we can add style directly on any tag using the style attribute.

<h1 style="color: #f0c060; font-size: 40px;">The Grand Table</h1>

This is called inline style because the style is written directly inline on the tag.

6.2 The Format of Inline Style

The style attribute uses CSS property and value pairs. Each pair ends with a semicolon.
style="property: value; property: value;"

style="color: red;"
style="background-color: #1a1a1a; color: #f0c060;"
style="font-size: 16px; padding: 20px; text-align: center;"

6.3 Common Style Properties

Property What it does

color Changes the text colour — color: red; or color: #f0c060;
background-color Changes the background colour — background-color:
#1a1a1a;
font-size Changes text size — font-size: 16px;
font-family Changes the font — font-family: Georgia, serif;
text-align Aligns text left, center or right — text-align: center;
padding Space INSIDE the element — padding: 20px;
margin Space OUTSIDE the element — margin: 10px 0 0 0;
border Draws a border — border: 4px solid #8b3a0f;
 12

Property What it does

width Sets the width — width: 100%;
vertical-align Aligns content top, middle or bottom inside a table cell

Understanding margin and padding shorthand

When you write one value — margin: 10px — it applies 10px on all four sides equally.
When you write two values — margin: 10px 20px — the first value is top and bottom, the second is
left and right.
When you write four values — margin: 10px 0 10px 0 — they go in the order Top, Right, Bottom,
Left. A helpful way to remember this is the word TRouBLe — T for Top, R for Right, B for Bottom, L
for Left.
margin: 10px — 10px on all four sides
margin: 10px 20px — top and bottom 10px, left and right 20px
margin: 10px 0 10px 0 — top 10px, right 0, bottom 10px, left 0
The exact same shorthand rules apply to padding:
padding: 10px — 10px on all four sides
padding: 10px 20px — top and bottom 10px, left and right 20px
padding: 10px 0 10px 0 — top 10px, right 0, bottom 10px, left 0

6.4 Colours in HTML

There are two ways to write colours in HTML:
4. By name: red, blue, green, white, black
5. By hex code: #f0c060 means a specific golden yellow colour

In our restaurant website we used hex codes throughout:

#1a1a1a — very dark, almost black — used in the header background
#f0c060 — golden yellow — used for the restaurant name heading
#8b3a0f — dark brown — used for headings and borders
#fdf6ec — very light warm cream — used for the page background

💡 You can find hex colour codes at any colour picker website. Search for
'HTML colour picker' on Google.

6.5 Writing Styles the Modern Way

In our restaurant website all styles are written directly inside the style attribute on each tag. Here
are the most common style properties we use and examples of how they are written:
 13

Modern Style Equivalent

style="width: 100%;"
style="background-color: #1a1a1a;"
style="text-align: center;"
style="vertical-align: top;"
padding: 20px; on the td tag
border-spacing: 0; on the table tag

Open [Link] in Notepad++ and look at any table tag or td tag — you will see all the style
properties sitting right there on the tag, clearly visible.

Module 7 — The Table Tag

7.1 Why Tables?
Tables were originally designed to display data in rows and columns. In our restaurant website we
use tables to lay out the entire page — the header, navigation bar, banner, and content sections.

Three tags work together to build a table:

Tag What it does

<table> Creates the table — the outer container
<tr> Table Row — creates one horizontal row
<td> Table Data — creates one cell inside a row

7.2 A Simple Table

<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
This creates a table with 2 rows and 2 columns.
 14

7.3 Tables in Our Restaurant Website

Every single section of our restaurant website is built using a table. Here is how:

Section Table Structure

Header 1 table, 1 row, 1 column — dark background, centred text
Navigation bar 1 table, 1 row, 1 column — links separated by &nbsp;
Banner image 1 table, 1 row, 1 column — holds the img tag
Welcome section 1 table, 1 row, 1 column — centred text and button
Why Dine With Us 1 heading table + 1 separate table with 1 row, 3 columns
About Us 1 table, 1 row, 1 column — dark background
Footer 1 table, 1 row, 1 column — very dark background

7.4 The Most Important Table Rule

Never nest tables. Never put a table inside a table. Always use separate tables one below the
other like building blocks.

WRONG — table inside a table:

<table>
<tr><td>
<table> ← NEVER DO THIS
<tr><td>nested</td></tr>
</table>
</td></tr>
</table>

CORRECT — two separate tables:

<table> ... </table>
<table> ... </table>

7.5 Useful Table Style Properties

Style Property What it does
width: 100%; Makes the table stretch across the full page width
margin: 0 auto; Centres the table on the page — auto splits space equally
on left and right
 15

Style Property What it does

border-spacing: 0; Removes the default gap between cells
border-spacing: 16px; Adds a gap between cells — used in the menu dish cards
background-color: ... Sets background colour of the table or cell
padding: 20px; Adds space inside a table cell — put this on the td tag
vertical-align: top; Aligns content to the top of a cell
text-align: center; Centres text horizontally inside a cell

Module 8 — Images and Links

8.1 The img Tag
The img tag displays an image. It is one of the few tags that does NOT need a closing tag.
<img src="[Link]" alt="Chicken Biryani">

To add a border using inline style:

<img src="[Link]" alt="Chicken Biryani" style="border: 4px solid
#8b3a0f;">

The border property has three parts:

border: 4px solid #8b3a0f
SIZE STYLE COLOUR

Border Style How it looks

solid A solid straight line
dotted A dotted line . . . . .
dashed A dashed line - - - - -
double Two lines side by side

In our restaurant website, all dish images in [Link] have a 4px solid brown border using
style='border: 4px solid #8b3a0f;'

8.2 The a Tag — Links

The a tag creates a clickable link. It must have an href attribute to know where to go.
 16

<a href="[Link]">Our Menu</a>

Linking to another page in the same folder:

<a href="[Link]">Our Menu</a>

Linking to a section on the same page:

<a href="#fullmenu">View Full Menu List</a>

The target section must have a matching id:

<table id="fullmenu" style="...">

Making a link look like a button using inline style:

<a href="[Link]" style="background-color: #8b3a0f; color: #ffffff;
padding: 12px 30px; font-size: 16px;">View Our Menu</a>

In our restaurant website, the navigation bar uses a tags linking to [Link], [Link] and
[Link]. The View Full Menu List link uses href='#fullmenu' to jump to the list section on
the same page.

Module 9 — Lists
9.1 Two Types of Lists
Tag What it does
<ul> Unordered List — each item gets a bullet point •
<ol> Ordered List — each item gets a number 1. 2. 3.
<li> List Item — used inside BOTH ul and ol

9.2 Unordered List — ul

<ul>
<li>Creamy Soup — Rs. 180</li>
<li>Tomato Coriander Soup — Rs. 180</li>
<li>Sweet Corn Soup — Rs. 170</li>
</ul>

This produces:
 17

• Creamy Soup — Rs. 180

• Tomato Coriander Soup — Rs. 180
• Sweet Corn Soup — Rs. 170

9.3 Ordered List — ol

<ol>
<li>Continental Breakfast — Rs. 275</li>
<li>American Breakfast — Rs. 500</li>
<li>Indian Breakfast — Rs. 500</li>
</ol>
This produces:
6. Continental Breakfast — Rs. 275
7. American Breakfast — Rs. 500
8. Indian Breakfast — Rs. 500

9.4 When to Use ul vs ol?

List Type When to use it
ul (bullets) Use when order does not matter — e.g. a list of soups, a list
of features
ol (numbers) Use when order matters — e.g. steps, ranking, a numbered
menu

In our restaurant website, [Link] uses ul for soups, salads and beverages, and ol for the
breakfast menu and desserts — so students can see both types in the same page.

Module 10 — Forms
10.1 What is a Form?
A form collects information from the user. In our restaurant website, the Contact Us page has a
feedback form with fields for Name, Phone, Email and Feedback.

10.2 Form Tags and Their Attributes

Tag or Attribute What it does
<input type="text"> A single line text box — for name, phone, email
<textarea> A bigger multi-line box — for writing long feedback
 18

Tag or Attribute What it does

<input type="button"> A clickable button
placeholder="..." Light grey hint text shown inside the box before the user
types
onclick="..." Runs something when the button is clicked
alert("...") Shows a pop up box with a message

10.3 The Feedback Form in [Link]

The form in our restaurant website is laid out as a table with 2 columns — label on the left, input on
the right — exactly like the dish layout in [Link].

<table style="margin: 30px auto; border-spacing: 16px;">

<tr>
<td><b>Name</b></td>
<td><input type="text" placeholder="Enter your name"></td>
</tr>
<tr>
<td><b>Email</b></td>
<td><input type="text" placeholder="Enter your email"></td>
</tr>
<tr>
<td style="vertical-align: top;"><b>Feedback</b></td>
<td><textarea placeholder="Write your feedback..."></textarea></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="Submit"
onclick="alert('Thank you for your feedback!')">
</td>
</tr>
</table>

10.4 The onclick Alert

 19

When the Submit button is clicked, a pop up box appears saying: Thank you for submitting your
feedback!
onclick="alert('Thank you for submitting your feedback!')"

Part What it does

onclick An event — something that happens when you click
alert("") A JavaScript function — shows a pop up box with your
message

Module 11 — Putting It All Together

11.1 How Our Three Pages Link to Each Other
Our restaurant website has three pages. They are all linked through the navigation bar that appears
at the top of every page.

[Link] ──→ [Link] ──→ [Link]

↑_____________________↑_____________________↑
All three link back to each other

Every page has the same navigation bar:

<a href="[Link]">Home</a>
<a href="[Link]">Our Menu</a>
<a href="[Link]">Contact Us</a>

11.2 HTML Entity Codes — Special Symbols

Some characters cannot be typed directly in HTML. We use entity codes for them.
Code Symbol and Where We Used It
&copy; © — Copyright symbol — used in our footer
&nbsp; — Non-breaking space — one space. Five of them
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; means five spaces
between links in the navigation bar
&#8377; ₹ — Indian Rupee symbol
&#169; © — Another way to write copyright
&#9758; ☞ — Pointing hand symbol
 20

Code Symbol and Where We Used It

&#9660; ▼ — Down arrow — used in View Full Menu List link

Note: The same spacing between links can also be achieved by giving padding on the td tag or
margin on the a tag. This is one of the great things about HTML — there are always many ways to
achieve the same result. As you learn more you will find your own preferred approach.

11.3 The iframe Tag — Google Maps

The iframe tag embeds another webpage inside your page. In [Link] we used it to show
Google Maps. The great thing is you do not need to write this code yourself — Google Maps
generates the complete iframe code for you. All you have to do is copy and paste it into your HTML
file.
<iframe
src="[Link]
width="100%"
height="400"
style="border: 4px solid #8b3a0f;">
</iframe>

How to get the embed code: Search for your location on Google Maps. Click Share. Click
Embed a map. Copy the entire iframe code that appears. Paste it directly into your HTML file
inside a table td tag. Open [Link] to see exactly how it is used in our restaurant
website.

11.4 Good Habits for Writing HTML

• Always indent your code — press Tab to move nested tags inward
• Always close tags immediately after opening them before typing content
• Use comments to label every section — it makes your code easy to read
• Save your file with Ctrl+S every few minutes
• Open your file in a browser to check it — just double click the .html file
• Never put spaces in file names — use hyphens instead
• Keep all your files and images in the same project folder

11.5 If You Would Like to Learn More

If you enjoyed learning HTML and would like to pursue coding further, here are some topics that
might come of help:
 21

9. CSS in a separate style tag or external file — grouping all styles in one place instead of
writing them on every individual tag
10. External CSS — a separate .css file linked to your HTML
11. CSS classes and IDs — giving names to elements so you can style them from CSS
12. Responsive design — making your website look good on mobile phones
13. JavaScript basics — making your page interactive

💡 The entire restaurant website you studied — [Link], [Link] and

[Link] — uses only what you have learned in this guide. You now
understand every single line of that website.
 22

Quick Reference Card

Keep this page handy while writing HTML.

The Basic Framework

<html>
<head>
<title>Page Title Here</title>
</head>
<body style="background-color: #fdf6ec; font-family: Georgia, serif;">
<!-- Your content goes here -->
</body>
</html>

Most Used Tags

Tag What it does
<h1> to <h3> Headings — h1 biggest, h3 smallest
<p> Paragraph of text
<b> Bold text
<br> Line break — no closing tag
<a href=''> Link — href says where to go
<img src=''> Image — src says which file — no closing tag
<table> Table container
<tr> Table row
<td> Table cell
<ul> <li> Bullet point list
<ol> <li> Numbered list
<input> Form input box or button
<textarea> Large text box for forms
<iframe> Embeds another page — used for Google Maps
<!-- --> Comment — browser ignores this
 23

Most Used Style Properties

Property What it controls
color Text colour
background-color Background colour
font-size Text size in px
text-align left / center / right
padding Space inside the element
margin Space outside the element
margin: 0 auto; Centres a block element on the page
border size style colour — e.g. 4px solid red
width Width — e.g. 100% or 300px
vertical-align top / middle / bottom inside table cell
border-spacing Gap between table cells

The Grand Table Restaurant Website — HTML Basics