Introduction to Front-End Development
Introduction to HTML
The Skeleton of the Web
Every website you visit, from a simple blog to a massive online store, is built on a foundation of HTML. Think of HTML as the skeleton of a webpage. It provides the basic structure and organizes all the content, like text, images, and links. Without it, a webpage would just be a jumble of words with no form.
HTML, or HyperText Markup Language, provides the skeleton for your web content.
HTML isn't a programming language. It's a markup language. This means it uses a system of tags to define the different parts of a document. Let's break down the basic vocabulary.
tag
noun
An HTML instruction, usually appearing in pairs, that marks the beginning and end of an element. An opening tag looks like <h1> and a closing tag has a forward slash: </h1>.
element
noun
A complete piece of content in an HTML document, consisting of an opening tag, the content itself, and a closing tag.
So, an opening tag like <p> tells the browser, "A paragraph starts here." The text that follows is the content. A closing tag, </p>, says, "The paragraph ends here." Together, they form a complete paragraph element.
Basic Page Structure
Every HTML page has a fundamental structure. It tells the browser that it's reading an HTML document and separates the invisible metadata (in the <head>) from the visible content (in the <body>).
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first paragraph.</p>
</body>
</html>
Let's quickly go over these core tags:
<!DOCTYPE html>: Declares that this is an HTML5 document.<html>: The root element that wraps everything on the page.<head>: Contains meta-information, like the page title that appears in the browser tab.<body>: Holds all the content that users actually see on the page.
Everything you want to display on your webpage—headings, paragraphs, images—must go inside the
<body>element.
Organizing Text
The most common use of HTML is to structure text. Two of the most important elements for this are headings and paragraphs.
Headings are used to create an outline for your content. There are six levels, from <h1> (the most important) to <h6> (the least important). Using headings correctly not only makes your page easier to read but also helps search engines understand its structure.
<h1>This is the main title</h1>
<h2>This is a subtitle</h2>
<p>This is a regular paragraph. It's used for the main body of text.</p>
<p>Here's another paragraph. Browsers automatically add space between them.</p>
Paragraphs are created with the <p> tag. They are the workhorses of your webpage, containing the bulk of your written content.
Lists, Links, and Images
Beyond basic text, HTML allows you to create lists, link to other pages, and display images. These elements make your content more engaging and useful.
Lists are great for organizing information. You can create an unordered list (like a bulleted list) with the <ul> tag, or an ordered list (a numbered list) with the <ol> tag. Each item within either list is marked with the <li> tag for "list item."
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
<ol>
<li>First, mix the ingredients.</li>
<li>Second, bake for 30 minutes.</li>
<li>Third, let it cool.</li>
</ol>
What makes the web a "web" are hyperlinks. The anchor tag, <a>, creates links. It needs an attribute to work.
attribute
noun
Extra information provided within an HTML tag that modifies the element's behavior or provides metadata. Attributes are always specified in the opening tag.
For a link, the href (hypertext reference) attribute tells the browser where to go when the link is clicked.
<a href="https://www.example.com">Visit Example.com</a>
Finally, to embed an image, we use the <img> tag. This is a self-closing tag, meaning it doesn't need a separate closing tag like </img>.
It requires two key attributes:
src: The source of the image file, which is its URL or file path.alt: Alternative text that describes the image. This text is crucial for accessibility (screen readers read it aloud) and will display if the image fails to load.
<img src="cute_puppy.jpg" alt="A golden retriever puppy playing in the grass.">
Now you have the building blocks. By combining these simple elements—headings, paragraphs, lists, links, and images—you can create a well-structured and informative webpage.