Frontend Development 9 min read

Master Essential HTML Tags, Layouts, and Frames – A Practical Guide

This guide explains the fundamentals of HTML, covering standard tags, formatting elements, semantic layout structures, deprecated frames, and best practices for using absolute and relative file paths, complete with code examples for each concept.

Lin is Dream

May 14, 2020

Master Essential HTML Tags, Layouts, and Frames – A Practical Guide

HTML (HyperText Markup Language) runs in browsers, which parse and display the code, allowing you to create webpages such as personal sites. Writing HTML according to W3C standards involves structural HTML, styling with CSS, and behavior with JavaScript.

Common Tag Elements

The <!DOCTYPE html> declaration tells the browser which specification to use. <meta> tags describe the document and provide keywords for search engines; the charset attribute sets the character encoding (commonly utf-8 or gb2312), while name="keywords" and name="description" supply page keywords and a description. Content inside the <body> tag forms the page body.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="keywords" content="html,网页制作" />
  <meta name="description" content="如何制作网页" />
  <title>HTML实例</title>
</head>
<body>
  <p>主体</p>
</body>
</html>

Formatting tags include <br /> (line break), <hr /> (horizontal rule), <strong> (bold), <del> (deleted), <big> (large, deprecated in HTML5), <small> (small), <sub> (subscript), <sup> (superscript), <ins> (inserted), <em> and <i> (italic), as well as character entities such as  , ©, ", >, and <.

Images use <img src="..." alt="..." />, and hyperlinks use <a href="#" target="_blank">content</a>. Anchor links can be created with name or id attributes for intra‑page navigation.

Tables are defined with <table border="1" cellpadding="0" cellspacing="0">, rows with <tr>, and cells with <td>. Cell merging uses colspan (columns) and rowspan (rows). Lists include unordered <ul> with <li>, ordered <ol>, and definition lists <dl> with <dt> and <dd>.

HTML Layout

Elements are either block‑level (e.g., <h1>, <div>, <ul>) which occupy the full line, or inline (e.g., <span>, <img>, <input>) which flow with surrounding content. HTML5 introduces semantic layout tags that appear in pairs: <header> – document header <nav> – navigation bar <section> – thematic grouping <footer> – document footer <aside> – side content such as sidebars

HTML Frames (Deprecated in HTML5)

The <frameset> element creates a frameset, allowing multiple pages to be displayed within one window. It uses rows or cols to define the size of each frame and must not be combined with <body>. Example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<frameset cols="15%,*">
  <frame src="2.html" noresize="noresize" />
  <frame src="http://www.baidu.com" name="showframe" />
</frameset>
</html>

Inside 2.html you might place links that target the named frame:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <p><a href="http://www.baidu.com" target="showframe">百度一下</a></p>
  <p><a href="http://www.bilibili.com" target="showframe">哔哩哔哩</a></p>
  <p><a href="http://weibo.com/" target="showframe">新浪</a></p>
</body>
</html>

Inline frames ( <iframe>) embed another page within the current page:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <p>下面是内联框架</p>
  <iframe src="http://www.baidu.com" width="1000" height="500"></iframe>
</body>
</html>

File Path References

Use absolute URLs (including the protocol, e.g., http://example.com/image.png) for resources outside the site, and relative paths for internal resources. Common relative forms are: src="img/eyes.png" – image in an img folder under the current directory. src="eyes.png" – image in the current directory. src="/img/eyes.png" – image in the img folder at the site root. src="../eyes.png" – image in the parent directory of the current folder.