Sub-topic 2.1: Understanding Basic HTML for Your Personal Website
Your personal brand needs a digital home. A personal website or portfolio is crucial for showcasing your skills, experience, and personality. While design and content are key, understanding the foundational language of the web – HTML – can empower you to create a more effective and professional online presence. This section will introduce you to the essential concepts of HTML.
What is HTML?
HTML stands for HyperText Markup Language. It's the standard markup language used to create web pages. Think of it as the skeleton of your website. HTML defines the structure and content of your page, telling the browser what elements are present (like headings, paragraphs, images, links) and how they are organized.
HTML uses tags to structure content.
HTML documents are built using elements, which are made up of tags. Tags are keywords surrounded by angle brackets (e.g., <p>). Most tags come in pairs: an opening tag and a closing tag (e.g., <p>...</p>). The content goes between these tags.
An HTML element consists of a start tag, content, and an end tag. For example, the paragraph element is represented as <p>This is a paragraph.</p>. Some elements, like the image tag (<img>), are self-closing and don't require a closing tag. These are often called void elements. The browser reads the HTML file and renders the content according to these tags, creating the visual layout you see.
Essential HTML Tags for Your Portfolio
To build a basic personal website, you'll need to know a few fundamental HTML tags that will form the backbone of your content.
| Tag | Purpose | Example |
|---|---|---|
<html> | The root element of an HTML page. | <html>...</html> |
<head> | Contains meta-information about the HTML document, like title and character set. | <head>...</head> |
<title> | Specifies the title for the HTML document, shown in the browser's title bar or tab. | <title>My Portfolio</title> |
<body> | Contains the visible page content. | <body>...</body> |
<h1> to <h6> | Define headings. <h1> is the most important, <h6> is the least. | <h1>About Me</h1> |
<p> | Defines a paragraph. | <p>Welcome to my professional website.</p> |
<a> | Defines a hyperlink, used to link from one page to another. | <a href="https://www.linkedin.com">LinkedIn</a> |
<img> | Embeds an image into the HTML page. | <img src="my-photo.jpg" alt="A photo of me"> |
| <ul> | Defines an unordered list (bullet points). | <ul><li>Item 1</li><li>Item 2</li></ul> |
| <ol> | Defines an ordered list (numbered list). | <ol><li>First</li><li>Second</li></ol> |
| <li> | Defines a list item. | <li>My Skill</li> |
Structuring Your Portfolio Page
A typical personal website structure involves a header, navigation, main content sections (like About Me, Portfolio, Contact), and a footer. You'll use HTML tags to delineate these sections.
Loading diagram...
The alt attribute in the <img> tag is crucial for accessibility and SEO. It provides alternative text for an image if it cannot be displayed, and screen readers use it to describe the image to visually impaired users.
Attributes: Adding More Information
Tags can have attributes, which provide additional information about an element. Attributes are always specified in the start tag and usually come in name/value pairs like name="value". For example, the
href
src
Consider the structure of an HTML document as a hierarchical tree. The <html> tag is the root. Its direct children are typically <head> and <body>. The <head> contains metadata, while the <body> contains all the visible content. Within the <body>, you'll have various elements like headings (<h1>), paragraphs (<p>), lists (<ul>, <ol>), and links (<a>), each potentially containing other elements or text. This nested structure allows for organized and semantic content presentation.
Text-based content
Library pages focus on text content
Putting It Together: A Simple Example
Here's a very basic HTML structure for a personal portfolio page:
Jane Doe - Portfolio Jane Doe
Web Developer & Designer
About Me
Welcome to my professional website. Here you can find information about my skills and projects.
My Work
HTML defines the structure and content of web pages.
The <head> section (for metadata) and the <body> section (for visible content).
The <a> tag is used for hyperlinks, and the href attribute specifies the destination URL.
Learning Resources
The definitive guide to HTML from Mozilla Developer Network, covering fundamental concepts and syntax.
A comprehensive and beginner-friendly tutorial with interactive examples for learning HTML from scratch.
Learn HTML and CSS through interactive coding challenges and projects, focusing on building responsive websites.
Video lessons explaining the basics of HTML and CSS, ideal for visual learners and beginners.
A straightforward tutorial that breaks down essential HTML concepts and tags for beginners.
An interactive platform to learn HTML by writing code directly in the browser.
While not strictly HTML code, this article discusses the essential elements and structure of an effective personal website, providing context for HTML usage.
Provides a broad overview of HTML, its history, and its role in the World Wide Web.
A modern and comprehensive guide to HTML, focusing on best practices and accessibility.
A classic article that explains the fundamental principles and importance of semantic HTML.