Contents

1. Contents
2. Format Examples
3. Explaination
   1. Fonts
   2. Meaurements
   3. Structures

Format Examples

Elements' Formats

Label Name	Effect	Example	Remark
a	Hyperlink	Hello World!	/
abbr	Abbreviation	Abbr	/
address	Address	Author: Acan Email: xie.zeyu20@gmail.com Address: Forskarbacken 7, Universitet, Stockholm, Sweden	/
area / map	An area of an image / Define an image map		In the left image, the top-left corner is clickable.
article	Article	The Title of the Article The content of the article.	/
aside	Aside		/
b	Bold	Hello World!	/
bdi	Bi-Directional Isolation	Apple is an English word, while 苹果 is a Chinese word.	/
bdo	Bi-Directional Override	Hello World! 你好，世界！	/
blockquote	Long quotation	Hello World!	/
button	Button	Hello World!	/
canvas	Canvas	Your explorer doesn't support canvas.	/
cite	Title of books, articles etc.	La Traviata	/
code	Code	Please input console.log("Hello World! ") to ask your computer to output "Hello World! ".	/
data	Readable translation for machine	Tomato Potato Sugar	/
datalist	Pre defined list for input label	Choose your explorer	/
dd / dl / dt	Description / Description list / Descripted object	Beijing Capital of China Stockholm Capital of Sweden	/
del	Deleted contents	Sharon, Lisa and Ada are my wives.	/
details / summary	Details / The title of details	CCP Chinese Communist Party (CCP) is the party governing Chinese people.	/
dfn	Defination	HTML, or Hyper Text Markup Language for long, is the standard markup language for creating Web pages.	/
dialog	Dialog window	Hello World!	/
div	Division	Hello World!	/
em	Stress the content	You must go quickly!	/
fieldset / form / legend	Divide the forms / Forms / Title of each fieldset	Basic Information NAME SEX Education Information SCHOOL GPA	/
figcaption / figure	Title of a figure / Figure		/
footer	Footer		/
h1 - h6	Titles	First Level Title Second Level Title Third Level Title Fourth Level Title Fifth Level Title Sixth Level Title	/
header	Headers of articles or pages	This is the title By Acan Xie 2023-12-18 This is the main part of the article.	/
hgroup	A title and several paragraphs	This is a title Paragraph 1 starts from here. Paragraph 2 starts from here. This is the last paragraph.	/
hr	Divide different topics		/
i	Texts in special tones	The company named Apple introduced the first smartphone.	/
iframe	Inner frames		/
img	Images		/
input	Input	Different kinds of input Button Checkbox Color Date Datetime-Local Email File Hidden Image Month Number Password Radio Range Reset Search Submit Tel Text Time Url Week	/
ins	Inserted texts	Sharon, Amy and Lisa are my wives.	/
kbd	Keyboard	Please press Enter to submit your answer.	/
label	Define the label of inputs	Example Label	/
li / ol / ul	List items / Ordered lists / Unordered lists	Apple Banana Apple Banana	/
main	Define the main part of the page	Hello World!	/
mark	Marked texts	Don't forget to buy milk tomorrow.	/
menu	List without order	Apple Banana Coconut	/
meter	Define a meter within a known range	Car Speed 120 km/h	/
nav	Navigation Links		/
noscript	Define contents for explorers not supporting scripts		/
optgroup / option / select	Groups for dropdown menus / Options / Dropdown menus	Audi Mercedes Benz Toyota Nissan	/
output	Output value	+ =	/
p	Paragraph	Hello World!	/
picture	Multiple images		Reset the size of windows and the explorer can display different kinds of photos.
pre	Pre formatted texts	Hello World! Hello World!	/
progress	Progress	Download Progress 64 %	/
q	Short quotes	Hello World!	/
rp / rt / ruby	Provide support for "()" on those explorers not supporting ruby display / Define some east Asian characters' appearance and pronounciation / Ruby notations	漢 ( ㄏㄢˋ )	/
s	Words which are no longer correct	There are 15 tickets left only! No tickets!	/
samp	Sample output from computers	That's what on my screen: Sorry! No available rooms for you! What should I do now?	/
search	A group of contents related to search	Search Texts Here	/
section	A part of the page	Hello World!	/
small	Small texts	Hello small World!	/
source	Media sources		/
span	A part of text or page	Hello World! Hello World!	/
strong	Important texts	This is Mr. Rubin, a very famous mathematician.	/
sub / sup	Subscript text / Supscript text	Water is written as H2O in chemistry. Suppose a is the width of a square, then a2 is the area of it.	/
template	Something temporarily hidden or to be shown as a template		Explorer supports templates:
time	Time	We work from 10:00 to 21:00. I have a date on the Valentine's Day with my girlfriend.	/
u	Underline	Hello World!	/
var	Var	So we have a is equal to 1.	/
video	Video		The explorer plays the first source it supports.
wbr	Web break opportunity	To learn AJAX, you must be familiar with the XML Http Request Object.	/

Table 4.1: Elements' Formats

Explanation

This page serves as a guide for my upcoming webpage design, emphasizing flexibility over static templates or other rigid structures. In essence, it allows for necessary modifications. I simply need to adhere to the overarching style of this page and create similarly styled pages.

Fonts

The text size is rigorously controlled, adhering to the fundamental principle that 1em corresponds to 16px at the root of the DOM. Consequently, we have specified sizes such as 32px for h1, 24px for h2, 18.72px for h3, 16px for h4, 13.33px for h5, and 10.67px for h6. Texts within small labels are set at 13.33px, while sub and sup texts are sized at 12px. Additionally, it's noteworthy that texts in label captions match the size of h3 titles.

Font choices are quite regulated around here. Essentially, we stick to "Times New Roman", Times, serif; as the primary font. When it comes to code snippets and output samples, we opt for "Courier New", Courier, monospace;. No other font families make an appearance on our pages.

In terms of font styles, several labels may appear similar in appearance, despite harboring distinct semantic effects. Consider hyperlinks, inserted texts, and abbreviations, which exhibit solid underlines; however, hyperlinks and inserted texts have solid lines, and abbreviations have dotted underlines. Deleted texts, on the other hand, feature strikethrough lines. Additionally, we employ bold formatting for strong labels, while addresses, blockquotes and citations are presented in italics.

Prior to proceeding, I wish to cite the words of Ockham in order to underscore the fundamental thoughts of the principle:

Non sunt multiplicanda entia sine necessitate. (English: Entities are not to be multiplied without necessity)

In accordance with this principle, the following three guidelines are established:

1. The semantic meaning of HTML tags should be adhered to rigorously.
2. The structure of HTML code should conform precisely to the outlined specifications.
3. All blank areas must be regarded with precision to avoid errors on screens of varying sizes.

Meaurements

Now, let's discuss the measurements. We advise against any alterations, except for adhering to the natural flow of text. In other words, simply jotting down HTML codes, akin to Markdown codes, is a prudent choice. The template file index.css will generate blank spaces automatically.

By default, we exclusively apply padding to the body—specifically, padding-inline: 16px;. While there might be other elements with non-zero paddings, these are solely defaults set by Explorer. None of them have been incorporated into the index.css file.

When it comes to borders, they are primarily essential in table-related elements such as table, thead, tbody, tr, th, and td. By default, we establish the width of the table's outer border as 2px, consistent with the line between thead and tbody. Other borders within tables have a default width of 1px. Nonetheless, all these borders manifest as solid lines in the default color (#000000). Certain other elements also feature nonzero borders; for instance, fieldsets have 1px-wide borders matching the borders of inputs.

Margins can be quite intricate for us, as they coexist with most block elements. To enhance the overall appearance, the margin of most block elements is configured using margin-block: 1em; , allowing them to dynamically adjust based on the font size of their parent elements. We refrain from adding margin-inline properties to them, with the exception of the body, which is designated as margin-inline: auto; to ensure centered display.

We aim for the default spacing between elements to be determined by the margin value. Consequently, manually resetting margins or introducing line breaks is not advisable. In instances where margin overlap is eliminated, such as in flex display mode or with floating elements, it is permissible to manually remove the outermost margin-block-start and margin-block-end to maintain page standardization.

Structures

We don't impose restrictions on the length of the page—it's of no concern. However, we do uphold a somewhat stringent rule regarding its width. Initially, taking into account the contents, we must specify: width: auto; . Subsequently, we establish the middle page size as the baseline, denoted by $md: 728px; , and set it as the maximum width for our pages: max-width: $md; . Additionally, with an eye on smaller screens, we require max-width: 100%; .

	Large Screens (PC)	Small Screens (Smart Phones)
Wide Contents	728px	100%
Thin Contents	Auto	Auto / 100%

Table 5.3.1: Body's Measurements

It's important to emphasize the significance of titles. In this guidance, we recommend using h1 for the page title and h2 for section titles. These titles hold considerable weight on a page, so their numbers should be limited. We highly recommend including a maximum of one h1 title and no more than ten h2 titles. Exceeding these limits may result in a page that appears overly complex.

H3 represents the third-level heading, intended for smaller subsections within sections. Meanwhile, h4 is notable for its equivalent size to regular text but with increased boldness. H5 and h6 are currently inactive due to their respective sizes. In essence, we contend that four levels suffice to convey the page's structural arrangement.