Literally Everything You Need to Get Started with HTML

If you’re looking to get into web development, HTML is a pretty important thing to understand. HTML stands for Hyper-Text Markup Language and it’s a way of annotating text to indicate to web browsers how it should be interpreted. It’s used to define the content and structure of a webpage and as such, is one of the three pillars of the modern web (the others being CSS for styling, and JavaScript for functionality).

An HTML file consists of two parts; the head and the body. The head contains information about the page for web browsers and search engines (think title, description, etc). The body of a webpage consists of snippets of HTML called elements that represent the different parts of the page. When you load a page, what you see is the body; that’s what we’re going to focus on today.

The two main concepts to understand are tags and attributes.

Tags

The core concept of HTML is something called “tags”. Tags are basically labels you wrap around some text that tell your browser how to display different elements on a page. A typical tag consists of two angle brackets (< and >) surrounding a keyword (the “tag name”). For example, <p> is an opening tag for a paragraph.

Tags come in pairs – an opening tag and a closing tag – which are used to define the start and end of an element on your page. The opening tag tells your browser what kind of element this is (e.g., a header, image, or paragraph), while the closing tag indicates that you’re ending that element.

Attributes

Wrapped up in tags (pun intended) are additional bits of information called attributes. Attributes are name-value pairs that help your browser understand how to display an element correctly. For example, if you have a <p> tag with the attribute style="color: blue;", this tells your browser to make that paragraph blue.

Attributes can also include things like IDs (unique identifiers) and classes (groups of elements), which are useful for styling and scripting purposes later on.

That’s it! That’s HTML in a nutshell. Let’s go over some common tags and attributes so you can get building.

Common HTML Tags and Their Use

Here are a few examples of common tags and how they’re used. We’ll start with text related ones.

1. Headings: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>

These tags define headings in your content, with <h1> being the most important (usually used for titles) and <h6> being the least. You can nest headings within each other to create a hierarchical structure.

Example:

<h1>This is a Heading</h1>
<h2>This is a Subheading</h2>
<p>This is some paragraph text. It's also foreshadowing.</p>

2. Paragraphs: <p>

The p tag is used for general text content, such as paragraphs of information or descriptions.

Example:

<p>This is a paragraph of text.</p>
<p>This is another paragraph of text.</p>

3. Images: <img>

Add images to your page with the img tag. It has two required attributes. src specifies the image path, and alt sets a text description for accessibility purposes.

Example:

<img src="https://cooldogpics.com/dog.jpg" alt="A cool dog">

You can also add additional attributes like width, height, or style to customize your images.

4. Links: <a>

The a tag lets you link to other pages on your site (or anywhere else). The href attribute is the link. You can also use the title attribute for a tooltip (description on hover) and the target attribute to specify where the link should open (e.g., “_blank” to open in a new tab).

Example:

<a href="https://example.com" target="_blank">Visit Example Website</a>

5. Divisions: <div>

The div tag is a container that groups other elements together for styling or scripting purposes. You can use it to create sections of your page.

Example:

<div>
    <h2>This is a section title</h2>
    <p>This is some text in the section.</p>
</div>

6. Spans: <span>

The span tag is used to group small sections of content together, often for styling or scripting purposes.

Example:

<p>This is a paragraph with a <span style="color: blue;">highlighted section</span>.</p>

Those are the bulk of the most commonly used HTML tags. You can build a bunch of cool pages with these but in case you’d like to read more, here’s a good reference for HTML elements in general – including a list of all of them, with descriptions and usage examples.

The Head

Admittedly, I’ve left out a pretty important section. In HTML, the head section (defined with <head>...</head>) contains metadata about your web page – like its title, author, and other details. While it’s not directly visible to users, the head is crucial for search engines and other crawlers that need this information. The thing is, basically any platform for building a website will have tools to generate this for you. If you’d like to learn more, here’s some good info on it. Otherwise, might as well just learn the methodology for whatever platform/framework you’re using.

For instance, I cover it in my intro to Next.js post, here.

Where Do We Go from Here?

Now that you’ve got a solid foundation in HTML, you’re ready to get stylish and learn about CSS. If you’d like to do that, hop on over to that post, here.

If you want to get started with a practical project right away, here’s my post on making a headless blog with Next.js and WordPress. It assumes no prior knowledge with Next or React, so it’s great for those just getting started.

Have fun, y’all 🙂