Fading Coder

One Final Commit for the Last Sprint

Home > Tech > Content

Essential HTML Tags You Need to Know

Tech May 13 2

HTML Syntax Fundamentals

Basic Syntax Rules

  1. HTML tags consist of keywords wrapped in angle brackets, such as <html>
  2. Most tags come in pairs: an opening tag <html> and a closing tag </html>. These are called paired tags.
  3. Certain tags are self-closing (void tags), like <br/>, requiring no closing counterpart.

Tag Relationships

Paired tags fall into two categories: nesting and sibling relationships.

Nesting (parent-child):

<head>
    <title></title>
</head>

Sibling (brother-brother):

<head></head>
<body></body>

Document Structure Tags

Every HTML document requires a basic structure comprised of skeleton tags.

Tag Purpose
<html></html> Root element, the outermost container
<head></head> Contains metadata, not visible content
<title></title> Defines the pagee title shown in browser tab
<body></body> Contains all visible page content 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
</head>
<body>
    Welcome to web development
</body>
</html>

DOCTYPE and Document Metadata

Document Type Declaration

The <!DOCTYPE> declaration tells the browser which HTML version to use. For modern web development, HTML5 is standard.

<!DOCTYPE html>

Important notes:

  • The DOCTYPE declaration must be the very first line of the document
  • It is not an HTML tag but rather a document type declaration

Language Declaration

The lang attribute specifies the document's language, helping browsers and search engines:

<html lang="en">  <!-- English -->
<html lang="zh-CN">  <!-- Simplified Chinese -->

Character Encoding

The charset attribute ensures proper display of text characters:

<head>
    <meta charset="UTF-8">
</head>

UTF-8 (Unicode Transformation Format) supports virtually all characters from languages worldwide.

Common HTML Tags

Semantic Tagging

Using tags appropriately means choosing the right tag for its intended purpose. Proper semantic markup creates clearer, more accessible page structure.

Heading Tags

HTML provides six heading levels from <h1> through <h6>:

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<h4>Sub-subsection Title</h4>
<h5>Level Five Heading</h5>
<h6>Lowest Heading Level</h6>

Behavior characteristics:

  • Headings appear bold with decreasing font sizes from h1 to h6
  • Each heading occupies its own line (block-level element)

Paragraph Tags

The <p> tag defines text paragraphs:

<p>This is a paragraph of text that will wrap automatically based on the browser window width.</p>

Behavior characteristics:

  • Text wraps automatically within the paragraph boundaries
  • Consecutive paragraphs maintain vertical spacing between them
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>University Profile</title>
</head>
<body>
    <p>Northeastern University is located in Shenyang, Liaoning Province, China. Founded in 1923, it has grown into a comprehensive research university with strong engineering programs.</p>
    
    <p>The university emphasizes practical education and innovation, preparing students for global challenges in technology and industry.</p>
</body>
</html>

Line Break Tags

The <br/> tag creates a hard line break within text:

<br/>

Behavior characteristics:

  • Single, self-contained tag with no content
  • Unlike paragraphs, does not add vertical spacing
  • Creates immediate line termination and starts new line
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Information</title>
</head>
<body>
    <p>Technical Support Center<br/>
        123 Innovation Drive<br/>
        Building A, Floor 5</p>
</body>
</html>

Text Formatting Tags

These tags modify text appearance for emphasis and styling:

Effect Tags Recommendation
Bold <strong></strong> or <b></b> Prefer <strong> for semantic emphasis
Italic <em></em> or <i></i> Prefer <em> for semantic emphasis
Strikethrough <del></del> or <s></s> Prefer <del> for semantic meaning
Underline <ins></ins> or <u></u> Prefer <ins> for semantic meaning 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Formatting Examples</title>
</head>
<body>
    <strong>Strong emphasis</strong><br>
    <b>Bold text</b><br>
    <em>Italic emphasis</em><br>
    <i>Italic text</i><br>
    <del>Deleted text</del><br>
    <s>Strikethrough text</s><br>
    <ins>Inserted text</ins><br>
    <u>Underlined text</u>
</body>
</html>

Division and Span Tags

The <div> and <span> tags serve as generic containers with no inherent semantic meaning:

  • <div>: Block-level container, each occupies full width on new line
  • <span>: Inline container, multiple can fit on same line
<div>This is a section block</div>
<span>This is an inline segment</span>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Container Tags Demo</title>
</head>
<body>
    <div>Container One - full width</div>
    <div>Container Two - full width</div>
    <span>TechCorp</span>
    <span>GlobalSystems</span>
    <span>InnovateTech</span>
</body>
</html>

Image Tags and Paths

Image Element

The <img> tag embeds images in HTML documents:

<img src="image.jpg" alt="description">

Core attributes:

Attribute Value Description
src path/URL Required - image location
alt text Alternative text when image fails to load
title text Tooltip shown on hover
width pixels Image width
height pixels Image height
border pixels Border thickness 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Demonstration</title>
</head>
<body>
    <h4>Basic Image Display</h4>
    <img src="hero-banner.jpg" alt="Hero Banner">

    <h4>Alt Text - Displays When Image Fails</h4>
    <img src="missing-image.jpg" alt="Placeholder Description">

    <h4>Title Tooltip - Shown on Mouse Hover</h4>
    <img src="hero-banner.jpg" title="Welcome Banner">

    <h4>Setting Explicit Dimensions</h4>
    <img src="hero-banner.jpg" width="300">
    <img src="hero-banner.jpg" height="400">

    <h4>Image with Border</h4>
    <img src="hero-banner.jpg" width="300" height="400" border="10">
</body>
</html>

Key considerations:

  • Attributes follow the tag name, separated by spaces
  • Attribute order does not matter
  • Attribute values use key="value" format

Path Types

Relative Paths

Paths relative to the HTML file's location:

Type Syntax Application
Same directory filename.jpg Image in same folder as HTML
Subdirectory images/filename.jpg Image in child folder
Parent directory ../filename.jpg Image in parent folder 
<body>
    <!-- Same level -->
    <img src="logo.png">
</body>

<body>
    <!-- In subfolder -->
    <img src="assets/images/logo.png">
</body>

<body>
    <!-- From parent folder -->
    <img src="../media/logo.png">
</body>

Absolute Paths

Full filesystem or web URLs:

<body>
    <!-- Full URL -->
    <img src="https://example.com/images/hero.jpg">
    <!-- Local filesystem path -->
    <img src="C:/projects/website/images/logo.png">
</body>

Hyperlink Tags

The <a> tag creates clickable links to other pages or resources:

<a href="destination" target="opening_method">Link Text</a>

Attribute functions:

Attribute Purpose
href Required - destination URL or file path
target _self opens in current tab (default), _blank opens in new tab

Link Categories

1. External links to other websites:

<a href="https://www.example.com" target="_blank">Visit Example</a>

2. Internal links to pages within the same site:

<a href="about.html">About Us</a>

3. Empty links for placeholder navigation:

<a href="#">Coming Soon</a>

4. Download links pointing to downloadable files:

<a href="document.pdf">Download PDF</a>
<a href="archive.zip">Download Package</a>

5. Element links attaching links to any HTML element:

<a href="https://example.com"><img src="button.jpg"></a>

6. Anchor links for navigation within a page:

Step 1: Create anchor point

<a href="#section-two">Jump to Section 2</a>

Step 2: Add id to target element

<h3 id="section-two">Section 2 Content</h3>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Link Types Demo</title>
</head>
<body>
    <h4>External Website</h4>
    <a href="https://www.wikipedia.org" target="_blank">Wikipedia</a>

    <h4>Internal Page</h4>
    <a href="services.html">Our Services</a>

    <h4>Placeholder Link</h4>
    <a href="#">Under Construction</a>

    <h4>Download File</h4>
    <a href="manual.pdf">User Manual</a>

    <h4>Linked Image</h4>
    <a href="https://example.com"><img src="banner.jpg"></a>

    <h4>Page Anchor</h4>
    <a href="#chapter-three">Go to Chapter 3</a>
    <p id="chapter-three">Chapter Three Content</p>
</body>
</html>

HTML Comments and Special Characters

Comments

Comments are developer notes ignored by browsers:

<!-- This is a comment and will not appear in the rendered page -->

Comments improve code readability and maintainability without affecting page display.

Special Character Entities

HTML reserves certain characters for syntax. Use entity codes to display them:

Character Description Entity Code
Non-breaking space &nbsp;
< Less than &lt;
> Greater than &gt;
& Ampersand &amp;
¥ Yen symbol &yen;
© Copyright &copy;
± Plus-minus &plusmn;
× Multiplication &times;
÷ Division &divide;
² Superscript 2 &sup2;
³ Superscript 3 &sup3; 
<body>
    <p>Use &lt;strong&gt; for emphasis</p>
    <p>Price: &yen;100</p>
    <p>Copyright &copy; 2024</p>
</body>
Tags: HTMLWeb DevelopmentHTML TagsfrontendHyperlinks
Back to List

Prev: Containerized Jenkins Deployment with Docker Compose

Next: Docker Buildx: Multi-Architecture Image Building with Enhanced Cache Control

Related Articles

Understanding Strong and Weak References in Java

Strong References Strong reference are the most prevalent type of object referencing in Java. When an object has a strong reference pointing to it, the garbage collector will not reclaim its memory. F...

Comprehensive Guide to SSTI Explained with Payload Bypass Techniques

Introduction Server-Side Template Injection (SSTI) is a vulnerability in web applications where user input is improper handled within the template engine and executed on the server. This exploit can r...

Implement Image Upload Functionality for Django Integrated TinyMCE Editor

Django’s Admin panel is highly user-friendly, and pairing it with TinyMCE, an effective rich text editor, simplifies content management significantly. Combining the two is particular useful for bloggi...

Leave a Comment

Anonymous

◎Feel free to join the discussion and share your thoughts.

Copyright © fadingcoder.top