HTML Basics

The Structure of a Web Page

Every website you visit, from a simple blog to a complex news site, is built on a skeleton. This skeleton is called HTML, which stands for HyperText Markup Language. It's not a programming language; instead, it's a way to structure content using a system of tags.

HTML (Hypertext Markup Language) defines the structure and contents of a web page – where things go, how they are laid out, and what’s on the page

Think of HTML tags like containers. You place your content—text, images, links—inside these containers, and the tags tell the web browser what each piece of content is. Is it a heading? A paragraph? A list? Tags answer these questions.

An opening tag, the content, and a closing tag together form an element. For example, <p>This is a paragraph.</p> is a paragraph element.

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>This is where my content goes.</p>
  </body>
</html>

This is the basic structure of any HTML document. Let's break it down:

<!DOCTYPE html>: This is a declaration. It tells the browser that the document is an HTML5 page.
<html>: This is the root element that wraps all the content on the page.
<head>: This container holds metadata—information about the page, like its title. This information isn't displayed on the page itself.
<body>: This is where the visible content lives. All your headings, paragraphs, and images go here.

Adding Text and Links

Once you have your basic structure, you can start adding content. The most common types of content are headings and paragraphs.

Headings are defined with <h1> through <h6> tags. <h1> is the most important heading, typically used for the main title of a page, while <h6> is the least important. Search engines use headings to understand the structure of your content.

Paragraphs are created with the <p> tag. The browser automatically adds some space before and after each paragraph, separating the blocks of text.

To organize information, you can use lists. An unordered list (<ul>) is for bullet points, and an ordered list (<ol>) is for numbered items. Each item in either list is created with a list item tag, <li>.

<h1>Main Title</h1>
<h2>A Subheading</h2>
<p>This is the first paragraph of text.</p>

<h3>Key Features</h3>
<ul>
  <li>First feature</li>
  <li>Second feature</li>
</ul>

<h3>Instructions</h3>
<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>

What makes the web a web are hyperlinks. To create a link, you use the anchor tag <a>. The text between the opening and closing tags is what becomes clickable. But where does the link go? For that, we need an attribute.

attribute

noun

Provides additional information about an HTML element. Attributes are always specified in the start tag and usually come in name/value pairs like name="value".

The anchor tag's most important attribute is href, which stands for "hypertext reference." This is where you put the URL you want to link to.

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

Working with Images

Images make web pages more engaging. To add an image, you use the <img> tag. This tag is a bit different because it's a self-closing, or empty, element. It doesn't have a closing tag because it doesn't wrap any content.

Instead, it uses attributes to function. The two essential attributes for an image are src and alt.

Attribute	Purpose
`src`	Specifies the source, or URL, of the image file.
`alt`	Provides alternative text for the image if it cannot be displayed.
`width`	(Optional) Sets the width of the image in pixels.
`height`	(Optional) Sets the height of the image in pixels.

The alt text is crucial for accessibility. Screen readers read it aloud to users who are visually impaired, and it's also displayed if the image fails to load. It should be a concise description of the image.

<img src="images/cat.jpg" alt="A fluffy orange cat sleeping on a chair.">

In the example above, the browser will look for an image named cat.jpg inside a folder named images.

Quiz Questions 1/6

What does HTML stand for?

Quiz Questions 2/6

What is the primary purpose of the <head> element in an HTML document?

With just these few tags, you can create a well-structured and informative web page. This is the foundation upon which all websites are built.

HTML and CSS Fundamentals