How to Make a Basic Website in HTML

Want to build your first website? It all starts with HTML. That's HyperText Markup Language, but don't let that scare you! It's the basic language for building web pages. Think of it as the skeleton of your site. This guide will walk you through building a basic HTML website. Perfect for beginners who want to learn to code.

Why Learn HTML?

Why bother with HTML? Because it's the foundation of the web. Everything you see online uses HTML.

Here's why it's crucial:

Read Also:How to Design a Website for SEO

Want a Web Development Job? You need HTML. Plain and simple.
Want to Tweak Your Site? Website builders are great, but HTML lets you go further.
Want Good Search Rankings? Search engines use HTML to understand your site.
Want to Understand the Internet? HTML is key to understanding how the web works.

Your Toolbox

To get started, you'll need two things:

A Text Editor: This is where you'll write your code. VS Code, Sublime Text, and Notepad++ are popular choices. I highly recommend VS Code. It's got lots of cool features for web development.
A Web Browser: Chrome, Firefox, Safari, Edge... you probably already have one! You'll use it to see your website.

Don't worry about fancy software. Your computer already has a basic text editor, but a dedicated one is way better for coding.

The Basic HTML Recipe

Every HTML page has the same basic structure. Think of it like a recipe.

The <!DOCTYPE html> Declaration

This goes at the very top of your page. It tells the browser you're using HTML5. Just type <!DOCTYPE html>. Easy, right?

The <html> Element

This is the root element. Everything else goes inside it. It marks the start and end of your HTML.

The <head> Element

This section contains info about your page. It's not visible on the page itself.

Inside the <head>, you'll find things like:

<title>: This is the title that shows up in the browser tab.
<meta>: This includes things like the character set, description, and keywords.
<link>: This is used to link to CSS stylesheets (more on that later).
<style>: You can put CSS styles right in your HTML here, but it's usually better to use a separate file.

The <body> Element

This is where all the visible content of your page goes. Headings, paragraphs, images, links... everything the user sees.

Let's Write Some Code!

Ready to build your first website? Open your text editor and type this:

<!DOCTYPE html> <html> <head> <title>My First Website</title> </head> <body> <h2>Welcome to My Website!</h2> <p>This is my first attempt at creating a website using HTML.</p> </body> </html>

Save it as index.html. Make sure you save it as .html, not .txt! index.html is a common name for the main page of a website.

See Your Website!

Time to see your creation! Open index.html in your browser.

You can:

Double-click the file.
Right-click and choose "Open With" your browser.
Drag the file into your browser window.

You should see a webpage with a heading and a paragraph. Congrats! You've built your first basic HTML website!

Essential HTML Building Blocks

Let's look at some common HTML tags.

Headings (<h1> to <h6>)

These are for titles and subtitles. <h1> is the most important, and <h6> is the least. Use them to organize your content.

<h1>Main Heading</h1> <h2>Subheading</h2> <h3>Another Subheading</h3>

Paragraphs (<p>)

The <p> tag is for paragraphs of text. Browsers add space before and after paragraphs automatically.

<p>This is a paragraph of text. It can have lots of sentences!</p>

Links (<a>)

The <a> tag creates links to other pages or places on the same page. The href attribute is where you put the URL (web address).

<a href="https://www.example.com"&gt;Visit Example.com</a>

Use the target attribute to make the link open in a new tab: target="_blank".

Images (<img>)

The <img> tag shows an image. The src attribute points to the image file. The alt attribute provides text if the image can't be loaded. Always use good alt text. It helps with SEO!

<img src="image.jpg" alt="Description of the image">

Lists (<ul>, <ol>, <li>)

HTML has two kinds of lists:

Unordered lists (<ul>): Bullet points!
Ordered lists (<ol>): Numbers!

Each item in the list goes in a <li> tag.

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ol> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ol>

Bold, Italic, and Strong (<b>, <i>, <strong>)

These change how text looks:

<b>: Makes text bold.
<i>: Makes text italic.
<strong>: Makes text bold and important.

<p>This is <b>bold</b> text.</p> <p>This is <i>italic</i> text.</p> <p>This is <strong>important</strong> text.</p>

<strong> is better than <b> because it also tells search engines the text is important.

Making it Pretty with CSS

HTML is the structure, CSS is the style. CSS controls colors, fonts, and layout.

You can add CSS in three ways:

Inline CSS: Right inside the HTML tag. Not a great idea for big projects.
Internal CSS: Inside the <style> tag in the <head>. Okay for small sites.
External CSS: In a separate .css file. Best for larger projects. Keeps your code organized.

Let's try external CSS. Create a file named style.css and save it in the same folder as index.html. Add this CSS code:

body { font-family: sans-serif; background-color: #f0f0f0; } h2 { color: navy; } p { line-height: 1.5; }

Now, link it to your HTML by adding this to the <head> of index.html:

<link rel="stylesheet" href="style.css">

Save both files and refresh your browser. The page should look different now! New font, background color, and heading color.

Level Up Your Website

Want to make your website even better?

Use Semantic HTML: Use tags like <article>, <nav>, and <footer>. This helps with accessibility and SEO.
Check Your Code: Use an HTML validator to find errors.
Shrink Your Images: Smaller images load faster.
Make it Responsive: Use CSS to make your site look good on phones, tablets, and computers.
Learn JavaScript: JavaScript makes your site interactive.

Where to Learn More

Keep learning! Here are some great resources:

MDN Web Docs: A huge library of info about HTML, CSS, and JavaScript.
w3schools.com: Interactive tutorials and examples.
FreeCodeCamp: Free coding courses and certifications.
Codecademy: Interactive coding lessons.

You Did It!

You've built your first basic HTML website! This HTML tutorial has given you the basics. Practice, explore, and experiment! You're on your way to becoming a web developer!