HTML stands for HyperText Markup Language.
HTML is used to describe the structure and meaning of content on a webpage.
For example, HTML can identify:
HTML does not need to describe exactly how each item should look.
Its first job is to describe what the content is.
A simple heading can be written as:
<h1>Wildcats Soccer Club</h1>
The opening tag is:
<h1>
The closing tag is:
</h1>
The content between them is:
Wildcats Soccer Club
Together, they form an HTML element.
The h1 element represents a top-level heading.
p ElementA paragraph can be written as:
<p>Welcome to the Wildcats team page.</p>
The browser recognizes the content as a paragraph because it is marked with the p element.
The markup provides structure.
A simple HTML document can look like:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Wildcats Soccer Club</title>
</head>
<body>
<h1>Wildcats Soccer Club</h1>
<p>Welcome to our team page.</p>
</body>
</html>
You do not need to memorize every line immediately.
Instead, understand the major sections.
html Contains the DocumentThe root element is:
<html lang="en">
The page's HTML content is contained inside the html element.
The lang="en" information tells software that the primary language of the page is English.
That can help browsers and accessibility tools interpret the content appropriately.
head Contains Information About the PageThe head section contains information used by the browser and other systems.
For example:
<head>
<meta charset="utf-8">
<title>Wildcats Soccer Club</title>
</head>
The page title appears in places such as the browser tab.
The head is not where the main visible article or profile content normally belongs.
body Contains the Main Visible Page ContentThe body contains the content displayed as the webpage itself.
For example:
<body>
<h1>Wildcats Soccer Club</h1>
<p>Welcome to our team page.</p>
</body>
Headings, paragraphs, lists, links, and images commonly appear inside the body.
HTML provides heading levels:
<h1>Main Page Title</h1>
<h2>Team Information</h2>
<h3>Practice Schedule</h3>
Heading levels should describe the organization of the content.
They are not simply tools for making text large.
A page with a clear heading structure is easier for people to scan and easier for assistive technology to navigate.
An unordered list can be written as:
<ul>
<li>Jordan</li>
<li>Casey</li>
<li>Morgan</li>
</ul>
The ul element represents the list.
Each li element represents one list item.
HTML gives the group a meaningful structure rather than representing it as several unrelated lines.
A link can be written as:
<a href="https://example.com">Visit the team site</a>
The visible text is:
Visit the team site
The href attribute identifies the destination.
A descriptive link is more useful than vague text such as:
click here
because the reader can understand the purpose of the link from its wording.
An image element can include alternative text:
<img src="team-photo.jpg" alt="Wildcats players standing together before a match">
The src identifies the image file.
The alt text communicates the important meaning of the image when the image cannot be seen or loaded.
If an image is purely decorative, its accessibility treatment can differ. For instructional work, think first about what information the image contributes.
HTML elements can contain other elements.
For example:
<section>
<h2>Team Information</h2>
<p>The Wildcats practice twice each week.</p>
</section>
The heading and paragraph are grouped inside one section.
Indentation helps people see that structure in the source.
HTML describes document structure.
It does not behave like C# source code.
HTML does not create objects with new, run if statements, or execute a sequence of program instructions in the same way.
The browser interprets the markup and creates the displayed page.
That distinction will become useful as you separate:
When creating a simple profile webpage, first ask:
Build the structure first.
CSS can then control how that structure is presented.