HTML: the structure of websites

Source: W3C’s HTML5 logo

Basic Concepts of HTML

What is HTML?

WordProcessors & Text syntax

HTML Elements

1. Headers

<h1>The biggest headline</h1>
<h2>A bigger headline</h2>
<h3>A big headline</h3>
<h4>A small headline</h4>
<h5>A smaller headline</h5>
<h6>The smallest headline</h6>

2. Paragraph

<p> This is a paragraph.</p>

3. Parent-child elements

<div>
<h3>This is a parent element.</h3>
<p>This is a child element.</p>
<p>This is a child element.</p>
</div>

4. List

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>

5. Body

<body>
<h1>The biggest title. Body is parent tag.</h1>
<p> Paragraph tag. Body is parent tag.</p>
<ul>
<li>list item tag. Parent is ul tag. Grandparent is body.</li>
<li></li>
</ul>
</body>

6. Comments

<!-- This Comment will not be displayed in the HTML document. -->
<!-- 
A multiline comment.
To explain a specific part of the code in more detail.
-->

7. Block and Inline Elements

<p>Hello world</p><p>Hello world</p>
<span>Hello world</span>
<span>Hello world</span>

8. Div and Span

<div>text division 1</div>
<div>text division 2</div>
<span>Span 1</span>
<span>Span 2</span>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
<div>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</body>

HTML Tags

<img src="images/firefox-icon.png" alt="My test image">
<div id="container">
<p class="title">Contents</p>
<ul class="list">
<li><a href="#First_Point_Header">1 First Point Header</a>
<ul>
<li><a href="#First_Sub_Point_1">1.1 First Sub Point 1</a></li>
<li><a href="#First_Sub_Point_2">1.2 First Sub Point 2</a></li>
</ul>
</li>
<li><a href="#Second_Point_Header">2 Second Point Header</a></li>
<li><a href="#Third_Point_Header">3 Third Point Header</a></li>
</ul>
</div>

HTML Attributes

<p class="note">text</p>
<p id="menu">text</p>
<img src="icon.jpg" id="icon-image" />
<a href="https://www.medium.com/">Visit Medium Homepage</a>
<a href="https://www.medium.com/" target="_blank"> Read Medium </a>

Basic HTML Document

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>

Debug HTML

Common HTML mistakes

<p> "</p" should be </p>.
<H1> </h2>.
<div>
<p></p>
</div>
<div>
<!-- section one -->
</div>
<div>
<!-- section two -->
</div>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store