Scribd
Upload
2 views2 pages

HTML Reference

This document provides a beginner's reference for HTML structure and content tags. It includes a breakdown of essential HTML elements, their functions, and examples, as well as a visual skeleton diagram of a basic HTML document. Key components covered include the document type declaration, metadata, headings, lists, hyperlinks, images, and containers.

Uploaded by

nosiphophungula28
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views2 pages

HTML Reference

This document provides a beginner's reference for HTML structure and content tags. It includes a breakdown of essential HTML elements, their functions, and examples, as well as a visual skeleton diagram of a basic HTML document. Key components covered include the document type declaration, metadata, headings, lists, hyperlinks, images, and containers.

Uploaded by

nosiphophungula28
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML Skeleton – Beginner Reference

1. HTML Document Structure


Tag Function / Description
<!DOCTYPE html> Declares the document type as HTML
<html> Root element containing the whole page
<head> Meta-information about the page (not visible)
<title> Page title shown in browser tab
<meta> Metadata (e.g., charset, description)
<link> Links external files (CSS, favicon, etc.)
<body> All visible content goes here

2. Content Tags
Tag Function / Description Example
<h1> … Headings <h1>Main
<h6> Heading</h1>
<p> Paragraph <p>This is a
paragraph.</p>
<ul> Unordered (bulleted) list <ul><li>Item</li>
</ul>
<ol> Ordered (numbered) list <ol><li>Item</li>
</ol>
<li> List item (inside <ul> or <ol>) <li>Item 1</li>
<a> Hyperlink <a
href="[Link]
[Link]">Click</
a>
<img> Image <img
src="[Link]"
alt="Description"
>
<div> Container for grouping elements <div>Content
here</div>
<span> Inline container for styling <span>Text</span>
<br> Line break <p>Line1<br>Line2
</p>
<hr> Horizontal line <hr>
Tag Function / Description Example
<strong> Bold / important text <strong>Important
</strong>
<em> Italic / emphasis <em>Emphasized</e
m>

3. Visual Skeleton Diagram


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="[Link]">
</head>

<body>
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a paragraph.</p>

<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>

<ol>
<li>First item</li>
<li>Second item</li>
</ol>

<img src="[Link]" alt="Description">


<a href="[Link] me</a>

<div>
<p>More content inside a div</p>
<span>Inline text styling</span>
</div>
</body>
</html>

You might also like