HTML Core & Essentials | Ian’s blog

type

status

date

slug

summary

What Exactly is HTML?

HTML stands for HyperText Markup Language. Let's quickly break that down:

HyperText: This refers to the links that connect web pages to one another. It's what makes the web a "web."

Markup Language: This means HTML uses "tags" to describe, or "mark up," the content. These tags tell the web browser (like Chrome or Firefox) how to display the text, images, and other elements.

HTML is the first and most critical part of the web development trio:

HTML: Provides the structure (the skeleton).

CSS: Handles the styling and presentation (the appearance).

JavaScript: Manages behavior and interactivity (the actions).

Without HTML, there is no webpage.

Your First HTML Page

Every HTML document follows a standard structure. Let's create our very first page. Open any text editor (like VS Code, Sublime Text, or even Notepad), create a new file, and save it as index.html.

Now, type or paste the following code into your file:

Let's understand each line:

<!DOCTYPE html>: This is a required declaration that tells the browser this is an HTML5 document.

<html>: This is the root element of the page. All other elements go inside it.

<head>: This element contains meta-information about the page (data that is not displayed directly).

<meta charset="UTF-8">: Specifies the character encoding. UTF-8 is the standard and ensures all text and symbols display correctly.
<meta name="viewport" ...>: This tag makes your website responsive, meaning it will adapt its layout to look good on all devices, from large desktops to small mobile phones.
<title>: This sets the title that appears in the browser tab.

<body>: This is where the visible content goes! Everything inside the <body> tag—headings, paragraphs, images, etc.—is what users see on the page.

Now, find your index.html file and open it in a web browser. You should see "Hello, World!" as a large heading. Congratulations, you've just built a webpage!

Core Text Elements

Webpages are primarily made of text. Here's how you structure it.

Headings

HTML gives us six levels of headings, from <h1> to <h6>. <h1> is the most important and should generally only be used once per page for the main title. The headings decrease in importance down to <h6>. Using them correctly is important for organization and SEO (Search Engine Optimization).

Paragraphs & Line Breaks

The <p> tag is for paragraphs. Browsers automatically add some space (a margin) between paragraphs.

If you need to force a line break inside a paragraph, use the <br> (break) tag.

Text Formatting (Semantic vs. Visual)

There are several tags to style text, and it's important to understand their meaning.

<strong> vs. <b> (Bold): Both make text bold. However, <strong> tells the browser that this text has strong importance. <b> is just a visual style with no added meaning. For accessibility (e.g., screen readers) and SEO, <strong> is preferred.

<em> vs. <i> (Italic): Similarly, <em> (emphasis) gives the text semantic importance, while <i> is purely a visual style. <em> is the modern, preferred choice.

Links (`<a>`) and Images (`<img>`)

The web is built on links. The anchor tag <a> creates them. Its most important attribute is href, which defines the link's destination.

To make a link open in a new browser tab, add the target="_blank" attribute. This is great for external links.

Images are added with the <img> tag. This is a self-closing tag. It requires two key attributes: • src: The source or URL of the image file. • alt: The alternative text. This text is displayed if the image cannot load and is read aloud by screen readers. Never skip the alt attribute!

(Note: I added the <i>width</i> attribute to control the image size directly, which is a simple option for now.)

Lists: Organizing Information

Lists are perfect for grouping related items.

Unordered List

An unordered list (<ul>) is for items where the order doesn't matter. It creates a bulleted list. Each list item is wrapped in an <li> tag.

Ordered List

An ordered list (<ol>) is for items where the sequence is important. It creates a numbered list.

Summary and Your First Challenge!

That's a wrap for Part 1! We've covered a lot of ground:

The basic structure of an HTML document (<!DOCTYPE>, <html>, <head>, <body>).

How to use headings (<h1>-<h6>) and paragraphs (<p>).

How to create links (<a>) and embed images (<img>).

How to structure content with unordered (<ul>) and ordered (<ol>) lists.

Now it's time to practice.

Your Challenge: Create a simple "About Me" page. It must include:

Your name as the main heading (<h1>).

A picture of yourself (or something you like). Don't forget the alt text!

A short paragraph about yourself using <strong> or <em> on a few words.

An ordered list of your top 3 favorite movies or books.

An unordered list of your hobbies.

A link to your personal social media profile or favorite website (make it open in a new tab).