Hello World!

Welcome to Web Dev Pro Glo, your Website Development Progressive Glossary!

Please pardon our dust during our construction!
Check back for updates to this page, as there is a lot in the works!

Here you will find a comprehensive list of all the fundamentals you need to get started with Web Development in no time!
But don't let this rudimentary look scare you away! it's intentional ;)

The most prominent pedagogical component of the site is its demonstration of Progressive Enhancement, where the glossary is intentionally published in the following 3 progressive layers:

HTML-Only: - A fully functional HTML-Only static page explaining essential HTML elements (this page).
HTML & CSS - Adds visual styling and structure to the previous page while introducing key CSS concepts.
HTML & CSS & JavaScript - Completes the fully interactive website demonstrating and teaching dynamic behavior and real-time features dependant on Javascript code logic.

Getting Started: Structuring Your HTML Code

The following code is one of the simplest HTML codes you can have:

 
<!DOCUTYPE html>
 
<html>

<body>

        <main>

            <P>Hello, World!</p>

        </main>

</body>

</html>

Which simply prints out the following:

Hello, World!

Definitions

The words between angle brackets (< >) are called Tags₁, representing the structure and meaning of the content on the page. They instruct the browser on how to interpret and/or display the content between the brackets.

When a tag is used, it will generally appear twice; once in the opening statement <p> and another in the closing statement </p>. Notice how the closing statement has a "/" before the tag name.

Some tags are Self-Closing Tags₂, meaning they only require the opening statement. <!DOCUTYPE html> is a common example of a self-closing tag, for example.

<!DOCUTYPE html>

Definition and Use

This tag is used at the beginning of every HTML file and instructs the browser to use the most recent version of HTML (currently HTML5) to ensure proper interpretation and processing of the contents.

Technically, more can be added to this tag to tell the browser to interpret the code in a specific context or in a specific version of HTML, but this is not very important and we'll come back to it later.

<html>

Definition and Use

This tag tells the browser that this is an HTML document and holds all of the contents on the webpage, from the visuals displayed on the site to the behind-the-scenes data, like links and styles.

It is required for every html file to be properly structured and for the browser to properly interpret the code.

<main>

Definition and Use

This tag describes the main focus of the webpage itself and includes things that are unique to the page and are not repeated on other pages.

The <main> tag is useful for making your site more modular and separating items recurring on all pages, like headers, footers, site menus, etc.

<body>

Definition and Use

<body> is also a very important tag that is used in almost every html document.

It is used to define and wrap all of the visual contents of the site, including text, images, buttons, links, etc.

<p>

Definition and Use

The "p" stands for paragraph and represents a normally sized and formatted text printed to the screen.

This is one of the most commonly used tags and is typically used for normal lines or bodies of text, such as for articles, blogs, definitions, etc.

(The text in this definition is printed using the <p> tag)

Structural Tags

<!DOCUTYPE html>, <html>, <main>, <body>, and <p> are all examples of Structural Tags₃, which are used to define the structure and purpose of each piece of the webpage.

In this section, we will list and explain the rest of the structural tags:

<head>

Definition and Use

This tag comes before and outstide of the <body> tag is is used to provide the browser with important Metadata₄ (which we will talk about in detail later).

Though it is a common mistake, this tag should NOT be confused with:

<header>

Definition and Use

This tag comes after and inside of the <body> tag and is used for items that will always appear on the top of the screen and can even be fixed in place.

The contents of this tag are typically kept the same across all pages on a website and are typically reserved for branding (Logos, Names, etc.), Site Menus, and Search Bars, etc.

<footer>

Definition and Use

This tag also comes after and inside of the <body> tag and is used for items that will always appear on the bottom of the screen.

The contents of this tag are also typically kept the same across all pages on a website and are typically reserved for Copyright and Ownership Mentions, Contact Information, Miscellaneous Links, Legal Documents (Privacy Policies, etc.), etc.

<section>

Definition and Use

This tag is used to make your page more modular. You can separate the page into related sections. These sections can also be linked to navigational buttons throughout the page.

This not only helps you organize your source code, it is a Semantic Tag₅, which allows you to use dynamic functions and greatly helps Search Engine Optimization₆.

<article>

Definition and Use

This tag is used to group a piece of self-contained content that can stand alone outside of the context of the webpage and still be understood.

This tag is very helpful for Search Engines₇ to be able to recall and reference these bodies of text which include Blog Posts, Articles, Definitions, Product Descriptions, etc.

<aside>

Definition and Use

This tag is used to identify tangently related content.

This can be used for commentary, fun facts, and Did you know? sections (like the one I have above)

<nav>

Definition and Use

This tag is used to establish a navigation menu, either to other websites or to sections of the current webpage, like the menu below:

<div>

Definition and Use

This is just a generic semantic tag, used when no other tag category quite fits the contents therewithin.

Still is just used to help make your site modular and well organized for the developer and the Search Engines.

<span>

Definition and Use

This tag is used for styling purposes to print something inline that would normally be printed on a separate line by default.

For example, if you imbeded an image and then used <p> to print text, they would normally be on different lines, unless you use <span> to instruct the browser to display them ont he same line.

<h#>

Definition and Use

This tag is used to print large, bold heading text of different sizes, there are <h1> through <h6>, with h1 being the largest and h6 being the smallest.
See below for an example:

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

<blockquote>

Definition and Use

This indents the text and styles it for quoted text and other tangent information
like the text below:

"Without HTML, there is no web—only raw data.”

<br>

Definition and Use

<br> stands for break and is used for formatting to move text onto new lines when they normally wouldn't.
For example, this whole block of text is within one <p> block, which doesn't normally allow for tabs or "enter" to display,
but if I put four <br> tabs,

I can move the subsequent text down here!

<hr>

Definition and Use

<br> stands for horizontal rule, which is a fancy way of saying "horizontal line", like the one below:

You can even put them close to eacother for styling:

Lists

Definition and Use

<ul> stands for unorderd list, which is just a fancy way of saying that it defines a bulleted list.

<ol> stands for ordered list, which is a fancy way of saying that it defines a numbered List (1. 2. 3. etc.).

<li> stands for list item and is the tag you use to define the listed items within a determined list block.

            
            <ul>
                <li>Apples</li>
                <li>Oranges</li>
                <li>Bananas</li>
            </ul>

            <ol>
                <li>Apples</li>
                <li>Oranges</li>
                <li>Bananas</li>
            </ol>

The above code prints the following:

Apples
Oranges
Bananas

Apples
Oranges
Bananas

Descriptive Lists

Definition and Use

<dl> stands for descriptive list, which defines block of code for a list of terms and their definitions or descriptions.

<dt> stands for description term, which defines one of the terms in the list.

<dd> stands for descriptive definition and is the tag you use to mark the defintion or description list term that comes before it.

            
            <dl>
                <dt>Apples</dt>
                <dd>A juicy red fruit that comes from a tree.</dd>

                <dt>Oranges</dt>
                <dd>An orange citrus fruit.</dd>

                <dt>Bananas</dt>
                <dd>A tropical yellow berry fruit that comes from palm trees.</dd>
            </dl>

The above code prints the following:

Apples: A juicy red fruit that comes from a tree.
Oranges: An orange citrus fruit.
Bananas: A tropical yellow berry fruit that comes from palm trees.

Tables

Definition and Use

Pay Attention Here, because tables have a lot of moving parts in their code.

<table> establishes the table block.

<thead> stands for table head, which establishes the header of the table, where the title and column lables will be, and is centered by deafault.

<caption> defines the description or title of the table. It is centered by default and normally appears above the column labels

<th> stands for table head item and is used to define each individual header item, usually the column label

<tbody> establishes the table's body, where all of the data cells will be.

<tr> establishes a new table row, and the data cells within it go between the <tr> tags.

<td> is used to label each table data cell that will appear in the table.

<tfoot> is optional on most tables, but defines a labeled bottom area of the table, typically where you would find a Total: section, etc.

            
            <table>
                <thead>
                    <caption><b>Price of Fruit</b></caption>
                    <tr>
                        <th>Fruit</th>
                        <th>Color</th>
                        <th>Cost</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Apples</td>
                        <td>Red</td>
                        <td>$2.50</td>
                    </tr>
                    <tr>
                        <td>Oranges</td>
                        <td>Orange</td>
                        <td>$1.50</td>
                    </tr>
                    <tr>
                        <td>Bananas</td>
                        <td>Yellow</td>
                        <td>$0.80</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td><pre>   </pre></td>
                        <td><b>Total Price:</b></td>
                        <td>$4.80</td>
                    </tr>
                </tfoot>
            </table>

The above code prints the following:

**Price of Fruit**
Fruit	Color	Cost
Apples	Red	$2.50
Oranges	Orange	$1.50
Bananas	Yellow	$0.80
	Total Price:	$4.80

Text Styling Tags

Certain tags deal with Text Semantics₈, meaning that instead of organizing or categorizing anything, they simply tell the browser how to display the specific text between the tags.

In this section, we will list and explain the most important Text-Semantic Tags

Bold

Definition and Use

<b> is used to style text into bold.
For example, the following code:
<b>This is bold!</b>
Will print:
This is bold!

<strong> is also used to style text into an emphatic font and tell the browser "this is important!" and is also typically output as bold on most browsers, however, it also instructs accessibility screenreaders to provide an emphatic tone upon reading the text within the <strong> tags.
For example, the following code:
<strong>This is also bold!</strong>
Will print:
This is also bold!

In summary, use <b> for visual, purely stylistic output, and use <strong> to signal to the browser of the importance of the word(s) and add an extra layer of accessibility for visually-impaired site visitors.

Italic

Definition and Use

i is used to style text into Italic.
For example, the following code:
<i>This is italic.&l;/i>
Will print:
This is italic.

<em> is also used to style text into an emphatic font and is also typically output as Italic on most browsers, however, it also instructs accessibility screenreaders to provide an emphatic tone upon reading the text within the <em> tags.
For example, the following code:
<em>This is also italic.</em>
Will print:
This is also italic.

In summary, use <i> for visual, purely stylistic output, and use <em> to signal to the browser of the importance of the word(s) and add an extra layer of accessibility for visually-impaired site visitors.

<pre>

Definition and Use

<pre> stands for Preformatted Text, let me explain just what this means.

Text editors, (like Visual Studio Code, which I'm using right now) ignore most empty spaces like tabs and new lines by default, as these are used to format code to make it more readable, and not necessarily because you want that extra space to be displayed on the screen.
But what if you did want your text to appear exactly how you spaced and formatted it in the editor, like if you were displaying a block of code, perhaps?
That's when <pre> comes into play, like in the following code:

                <pre>
                    <div>
                        <p>
                            Hello World!
                                This text is pre-formatted!
                                    With spaces, and tabs, and all. 
                        </p>
                    </div>
                </pre>

Which will print:

                    
                        
                            Hello World!
                                This text is pre-formatted!
                                    With spaces, and tabs, and all.

Other Text Styling

Definition and Use

<u> underlines text, like in the following code:
<u>This is underlined.</u>
Will print:
This is underlined.

<mark> highlights text, like in the following code:
<mark>This is highlighted.</mark>
Will print:
This is highlighted.

<del> ~~adds a strikethrough to text~~, like in the following code:
<del>This is deleted.</del>
Will print:
~~This is deleted.~~

<small> makes text slightly smaller than surrounding text, like in the following code:
<p><small>This is smaller</small> than this.</p>
Will print:

This is smaller than this.

<ins> is used to mark inserted text, usually to show edits and version history. It is often also paired with <del> to show if text was removed in lieu of the edit. <ins> is usually output as underlined in most browsers.
For example, the following code:
<ins>This is an edit.</ins>
Will print:
This is an edit.

<sub> is used for_subscripts such as footnotes, logarithms, etc.
For example, the following code:
<p>The answer is 3Log<sub>2</sub></p>
Will print:

The answer is 3Log₂

<sup> is used for^superscripts such as footnotes, exponents, etc.
For example, the following code:
<p>The answer is 3<sup>2</sup></p>
Will print:

The answer is 3²

<code> is used for making text look like it is in a coding editor.
For example, when I show code snippets, I wrap the contents in the <code> tag like so:
<code><p>This is what it looks like when I format the code snippets in the html File</p></code>

Attributes

Some tags need extra information in order to completely fulfill their function; Attributes will be added to the opening tag to guide them. These attributes are always added to the opening tag and have the formula name_of_attribute="value it modifies".

Take the <a> tag for example. Its purpose is to create hyperlinks to websites, pages, or sections of the current page, so you will pretty much never see it on its own.
Instead, you'll typically see it containing the "href" attribute which tells it where to link to:
<a; href="html.jakerayon.com">html.JakeRayon.com</a> will print this hyperlink: html.JakeRayon.com

In this section, we will list and define all of the most important attributes that you're going to be using.

Hello World!

Welcome to Web Dev Pro Glo, your Website Development Progressive Glossary!

Please pardon our dust during our construction! Check back for updates to this page, as there is a lot in the works!

Getting Started: Structuring Your HTML Code

Definitions

<!DOCUTYPE html>

<html>

<main>

<body>

<p>

Structural Tags

<head>

<header>

<footer>

<section>

<article>

<aside>

<nav>

<div>

<span>

<h#>

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

<blockquote>

<br>

<hr>

Lists

Descriptive Lists

Tables

Text Styling Tags

Bold

Italic

<pre>

Other Text Styling

Attributes

Please pardon our dust during our construction!
Check back for updates to this page, as there is a lot in the works!