Scribd
Upload
3 views2 pages

HTML Reference

This document serves as a beginner reference for HTML structure and content tags. It outlines the basic structure of an HTML document, including essential tags and their functions, as well as providing examples of content tags like headings, paragraphs, lists, and links. Additionally, it includes a visual skeleton diagram of a complete HTML document.

Uploaded by

Lulama J Khosa
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
3 views2 pages

HTML Reference

This document serves as a beginner reference for HTML structure and content tags. It outlines the basic structure of an HTML document, including essential tags and their functions, as well as providing examples of content tags like headings, paragraphs, lists, and links. Additionally, it includes a visual skeleton diagram of a complete HTML document.

Uploaded by

Lulama J Khosa
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