Folders and files structure
In this part of the master, we will introduce you to new terms used in the description of folders and HTML elements.
Note: a folder is also often referred to as a directory.
Site structure
Do not keep all files in the same folder. Even small sites are much easier to manage if you decompose HTML documents, images, and other resources into different folders, thus creating a specific layout of the different files. Structuring files as you want, you can choose a fairly flexible system of file organization, given that the site can grow, the file system will remain clear and understandable. The directory structure (hierarchy) in which the various files reside can usually be seen as a tree. Consider the following image as an example.
As you can see, the structure is just a diagram showing the nesting of one directory into another. In the example, we used only three directories, but that would be enough to describe all the necessary information. Catalogs are often described using the terms of hereditary (family) relationships. We have a folder called Bananas
, it is located inside the folder Fruit
. The Fruit
folder is the parent of the Bananas
directory, and the Bananas
Directory is a child (subdirectory) of the Fruit
folder. Also we have another folder Pears
, which is also a child of the catalogue Fruit
.
To better remember, let's describe the terms separately:
- Child directory this is the folder over which the hierarchical tree has a parent directory.
- Parent Directory this is a folder that contains a different directory.
- There is still such a concept as
root directory
is the main folder where all other directories and files are located.
Structure of elements
You can also represent the structure of elements as a diagram that shows the nesting of one element in another. Let's look at a simple example:
<html> <head> <title></title> <style></style> </head> <body> <p></p> </body> </html>
The diagram showing the nesting of elements can be represented as follows:
- Child element this is the element on which the parent element is in the hierarchical tree. The child element is also called a child.
- Related element this is another child of the same parent at the same branch level. Such elements are also called sister, in the example, such elements are
<head>
and<body>
,<title>
and<style>
. - Root element the topmost element in the hierarchy (
<html>
), all other elements are its descendants. - Parent element this is an element that contains another element. Sometimes it's called just a parent.
- Descendant can be directly a child element, but it is usually a common name for all elements that are nested in other elements, regardless of how deep they are nested, such as
<head>
,<title>
,<body>
,<p>
, and<style>
are descendants of an element<html>
.
With this theme look: