Tech Learning

HTML Learning Part One - Basics

📢 This article was translated by gemini-2.5-flash

Intro

HTML Learning Part One - Basics: https://blog.yexca.net/archives/146 HTML Learning Part Two - Lists, Tables, and Forms: https://blog.yexca.net/archives/150 HTML Learning Part Three - Web Page Layout: https://blog.yexca.net/archives/195

Basic Structure

1
2
3
4
5
6
7
8

<html>
    <head>
        <title>Webpage Title</title>
    </head>
    <body>
        Webpage Body
    </body>
</html>

Usually generated by software. For example, in VS Code, create a new .html file, type ! then hit TAB to auto-generate.

The head tag is generally for the browser, while the body tag is for users.

Comments

1

<!-- Comment content -->

In VS Code, select a line and use Ctrl + / to toggle comments.

Browsers won’t display comment content.

Headings and Paragraphs

1
2
3
4
5
6
7
8

<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<p>Paragraph content</p>
<p>Paragraph content</p>

Heading tags display bold text and take up a full line.

Paragraph tags take up a full line, with spacing between paragraphs.

Line Breaks and Horizontal Rules

Line breaks within paragraph tags won’t render visually. Use a line break tag if you need one.

1

<br />

Here’s the horizontal rule tag:

1

<hr />

Looks like this:

Text Formatting Tags

EffectTag NameAbbr.
Boldstrongb
Italicemi
Underlineinsu
Strikethroughdels

Generally, abbreviations aren’t recommended. Here’s an example:

1
2
3
4

<p>
    Hello, I'm <em>yexca</em>. <strong>Welcome</strong> to <ins>this blog</ins><br />
    <del>What should I write next?</del>
</p>

Looks like this:

Hello, I'm yexca. Welcome to this blog
What should I write next?

Image Tag

The image tag requires you to specify the image’s location in the src attribute.

1

<img src="path" alt="Content to display if image fails to load" />

Paths can be absolute or relative. Let’s say your current path (on Linux) is:

1
2
3

/home/yexca/code
	index.html
	photo.jpg

If the code is in index.html, the relative path is:

1

<img src="./photo.jpg" />

The absolute path is:

1

<img src="/home/yexca/code/photo.jpg" />

1

<a href="target page" target="method">Link text</a>

This tag creates links to other web pages. To open a page in a new window, just set the target attribute to _blank. For instance:

1
2
3
4
5

<p>
    Jump to
    <a href="https://yexca.net">yexca</a><br />
    This opens in a new tab: <a href="https://yexca.net">yexca</a>
</p>

Looks like this:

Jump to yexca
This opens in a new tab: yexca

Audio/Video Tags

1
2

<audio src="path">Audio tag</audio>
<video src="path">Video tag</video>

Here are the audio tag attributes:

AttributeFunctionDescription
srcAudio pathRequired attribute, supports mp3, ogg, wav
controlsDisplays audio controls
loopLoops playback
autoplayAutoplaysBrowsers usually block autoplay

Here are the video tag attributes:

AttributeFunctionDescription
srcVideo pathRequired attribute, supports mp4, webm, ogg
controlsDisplays video controls
loopLoops playback
mutedPlays silently
autoplayAutoplaysBrowsers support autoplay when muted

Suppose your current path is:

1
2
3
4

/home/yexca/code
	index.html
	audio.mp3
	video.mp4

For example, this code:

1
2
3
4
5
6
7
8

<audio src="./audio.mp3" controls loop></audio>
<!-- Shows controls, loops back to start after playing -->
<video src="./video.mp4" controls loop></video>
<!-- Shows controls, loops back to start after playing -->
<video src="./video.mp4" controls muted autoplay></video>
<!-- This code will autoplay -->
<video src="./video.mp4" controls autoplay></video>
<!-- This code will NOT autoplay -->

Layout Tags

These tags don’t have inherent semantic meaning but are used for page layout, dividing areas, or placing content.

  • div: Takes up a full line
  • span: Does not break line

For example, this code:

1
2
3
4
5
6
7
8

<div>
    div1
</div>
<div>
    div2
</div>
<span>span1</span>
<span>span2</span>

Looks like this:

div1
div2
span1 span2
## Character Entities

Used to display reserved characters on a webpage, like spaces, < or >.

ResultDescriptionEntity NameEntity Number
non-breakingspace&nbsp;&#160;
<less than&lt;&#60;
>greater than&gt;&#62;
&ampersand&amp;&#38;
“double quotation mark&quot;&#34;
‘single quotation mark (apostrophe)&apos;&#39;
¢cent&cent;&#162;
£pound&pound;&#163;
¥yen&yen;&#165;
€euro&euro;&#8364;
©copyright&copy;&#169;
®registered trademark&reg;&#174;

For example, to display <p>:

1
2
3

<p>
    &lt;p&gt;
</p>

Reference: Differences between HTML Character Entities &Nbsp; &Ensp; &Emsp;