How to Understand Basic HTML

So, you want to learn about HTML? Awesome! It's the very foundation of the web. Think of it as the skeleton that holds everything together. Without it, websites would be… well, just plain text. Yikes!

What is HTML Anyway?

Basically, HTML is like a set of instructions for your browser. It uses special tags to tell the browser how to show text, pictures, and other things on a web page. Think of it as a blueprint. HTML gives you the structure. CSS gives it style. And JavaScript? That makes it move!

Key Things to Know

Tags: These are super important. They're like bookends. You have a start tag and an end tag. They tell the browser what to do with the stuff in between.
Elements: An element is the whole thing! The start tag, the content, and the end tag. For example: <p>This is a paragraph.</p>
Attributes: These add extra info to your tags. They go inside the start tag. Like this: <img src="image.jpg" alt="Picture of a flower">. See how src tells us where the image is?

The Basic HTML Setup

Every HTML page has a basic setup. You need to know this. It's like the secret handshake. Let's break it down.

Read Also: How to Use HTML and CSS

The `<!DOCTYPE html>` Part

This goes at the very top. It tells the browser, "Hey, I'm using HTML5!" Just write <!DOCTYPE html>. Easy peasy.

The `<html>` Part

This tag wraps everything else (except the <!DOCTYPE>). It's like the main container for your website.

The `<head>` Part

This is where you put behind-the-scenes info. Things like the page title, how to handle letters and symbols and where to find the styles for your page. This stuff doesn't show up on the page itself.

Important Stuff Inside `<head>`

<title>: This is the title that shows up in the browser tab. Example: <title>My Cool Website</title>
<meta>: This gives extra info about your page. Like what kind of characters you're using or a short description. Example: <meta charset="UTF-8">. Another one: <meta name="description" content="My awesome website.">
<link>: This connects your HTML to other files, especially CSS (which makes your site look good!). Example: <link rel="stylesheet" href="style.css">

The `<body>` Part

This is where all the content goes! The text, the pictures, the videos… everything you want people to see. This is the main event!

Some Common HTML Things

Okay, now that you know the basic setup, let's look at some of the most used tags. These are your bread and butter.

Heading Things (`<h1>` to `<h6>`)

These are for headings! <h1> is the most important, like the title of a book. <h6> is the least important, like a tiny subtitle. Use them to organize your content. It also helps search engines find your page.

For Example:

<h1>My Main Title</h1><h2>A Subtitle</h2><h3>A Smaller Subtitle</h3>

Paragraph Thing (`<p>`)

This is for paragraphs of text. The browser automatically adds some space before and after. Keeps things readable!

For Example:

<p>This is a paragraph. You can write a bunch of sentences here. It's how you break up your content into readable chunks.</p>

Link Thing (`<a>`)

This makes links! You know, the things you click on to go to other pages. The href attribute tells the link where to go.

For Example:

<a href="https://www.example.com">Go to Example.com</a>

Picture Thing (`<img>`)

This puts pictures on your page! The src attribute tells it where to find the picture. The alt attribute is super important. It's what shows up if the picture can't load, and it helps people who can't see the picture understand what it is.

For Example:

<img src="my-awesome-picture.jpg" alt="A picture of a sunset">

List Things (`<ul>`, `<ol>`, `<li>`)

These make lists! There are two main kinds:

Unordered Lists (<ul>): These have bullet points.
Ordered Lists (<ol>): These have numbers.

Each thing in the list goes inside an <li> tag.

For Example:

Unordered List:

<ul><li>First thing</li><li>Second thing</li><li>Third thing</li></ul>

Ordered List:

<ol><li>First step</li><li>Second step</li><li>Third step</li></ol>

Division Thing (`<div>`)

This is a general container. It doesn't do anything on its own. But you can use it to group things together so you can style them or move them around. It takes up the whole width of the page.

For Example:

<div><p>Some text in a div.</p></div>

Span Thing (`<span>`)

This is like <div>, but it only takes up as much space as it needs. It's good for styling parts of text.

For Example:

<p>Some text with a <span style="color: blue;">blue word</span> in it.</p>

Important and Emphasized Things (`<strong>` and `<em>`)

<strong> makes text important (usually bold). <em> makes text emphasized (usually italic).

For Example:

<p>This is <strong>very important</strong> and this is <em>emphasized</em>.</p>

The Break Thing `<br>`

The <br> tag inserts a single line break. It's useful for creating short lines of text without starting a new paragraph.

For Example:

<p>This is the first line.<br>This is the second line.</p>

More About HTML Attributes

Attributes give tags extra information. They always go in the start tag. They have a name and a value, separated by an equals sign (=).

Some Common Attributes

src: Where to find an image (for <img>).
href: Where a link should go (for <a>).
alt: Text to show if an image can't load (for <img>).
style: Lets you add styles directly to an element.
class: Gives an element a "class" name (for styling with CSS).
id: Gives an element a unique ID (for styling with CSS or using with JavaScript).

For Example:

<img src="sunset.jpg" alt="Beautiful sunset" class="my-image" id="main-image">

HTML Entities Explained

Some characters have special meanings in HTML. Like < and > Those are used to make tags! So, how do you show them on the page? HTML entities to the rescue!

Common HTML Entities

<: < (less than)
>: > (greater than)
&: & (ampersand)
": " (double quote)
': ' (single quote)
:   (non-breaking space)

For Example:

<p>To show <p>, use <p>.</p>

Newer HTML5 Semantic Things

HTML5 added some new tags that help give meaning to your page structure. They help search engines and other programs understand your content better.

Common Semantic Things

<header>: The top part of your page or a section.
<nav>: A section with links to other parts of your site.
<article>: A self-contained piece of content (like a blog post).
<section>: A section of your page.
<aside>: Content that's related to the main content, but not part of it.
<footer>: The bottom part of your page or a section.

For Example:

<header><h1>My Amazing Website</h1><nav><a href="#">Home</a><a href="#">About</a><a href="#">Contact</a></nav></header><article><h2>My Awesome Article</h2><p>This is the article content.</p></article><footer><p>Copyright 2023</p></footer>

HTML Form Things

Forms let you collect information from people! Things like their name, email, etc. You make forms using the <form> tag.

Common Form Things

<input>: A box where people can type stuff.
<textarea>: A big box for typing lots of text.
<select>: A drop-down list.
<button>: A button you can click.
<label>: A label for an input field. Always use labels! It's good for accessibility.

For Example:

<form action="/submit" method="post"><label for="name">Name:</label><input type="text" id="name" name="name"><br><br><label for="email">Email:</label><input type="email" id="email" name="email"><br><br><button type="submit">Send it!</button></form>

HTML Table Things

Tables let you show data in rows and columns. Use the <table> tag to make a table.

Common Table Things

<table>: Makes a table.
<tr>: A row in the table.
<th>: A header cell (usually at the top).
<td>: A regular data cell.
<caption>: A title for the table.

For Example:

<table><caption>My Cool Table</caption><tr><th>Name</th><th>Age</th></tr><tr><td>John Doe</td><td>30</td></tr></table>

Good Ways to Write HTML

Writing clean, well-organized HTML is important. It makes your site easier to maintain, helps people with disabilities use it, and helps search engines find it. Here are some tips:

Indent your code: Use spaces to indent your code. This makes it much easier to see the structure.
Use lowercase tags and attributes: It's just a good habit.
Close all your tags: Make sure every start tag has a matching end tag.
Add comments: Explain what your code does! It helps you and others understand it later.
Check your HTML: Use a tool to make sure your HTML is correct.
Keep it organized: Use the semantic tags to give your content meaning.

Where to Learn More

Want to learn even more about HTML? There are tons of great resources online. Here are a few I like:

MDN Web Docs: Super detailed documentation from Mozilla.
W3Schools: Lots of tutorials and examples.
Codecademy: Interactive courses.
freeCodeCamp: Free coding bootcamps.

In Conclusion...

HTML is the foundation of web development. Knowing HTML lets you build websites. Practice and explore to learn even more! Learning HTML is the first step towards mastering the web!