Using “semantic” elements means choosing HTML tags that describe the purpose of the content rather than just how it looks. Think of it like labeling boxes in a moving truck: labeling a box “Kitchen Utensils” is much more helpful than just labeling it “Box 1.”
Instead of using generic tags for everything, using specific elements provides several big wins:
<header> or a <footer> in CSS than it is to manage a dozen generic <div> tags.HTML gives us six levels of headings, from <h1> down to <h6>. You can think of these like the chapters and sub-sections of a non-fiction book.
<h1>: The main subject of the page. You should generally only have one of these per page.<h2> through <h6>: These are sub-topics. For example, if your <h1> is “Healthy Recipes,” your <h2> might be “Breakfast Ideas,” and an <h3> under that could be “Oatmeal Toppings.”Pro Tip: Try to stick to just two or three heading levels (<h1>, <h2>, and <h3>) to keep your page from becoming too cluttered or confusing.
Sometimes text needs to be smaller and shifted up or down. We use <sup> (superscript) and <sub> (subscript) to handle this professionally.
1<sup>st</sup>.H<sub>2</sub>O.5<sup>2</sup>.When you use an abbreviation or an acronym that people might not know, use the <abbr> tag. To make it helpful, add a title attribute.
When a user hovers their mouse over the text, the full meaning will pop up. This is great for technical terms or organization names.
Example:
<abbr title="National Aeronautics and Space Administration">NASA</abbr>
External stylesheets:
These are separate files with a .css extension linked to the HTML document using a <link> element inside the <head>. This is the most efficient method because one file can style multiple pages.
<style> element placed inside the HTML <head>.style attribute on a specific HTML element.You should avoid using inline styles whenever possible because they are considered bad practice for several reasons:
Maintenance Inefficiency: It is the least efficient way to implement CSS because a single styling change might require many individual edits across a webpage.
Here is a breakdown of the following CSS code block:
h2 {
color: black;
padding: 5px;
}
h2. This is an element (or type) selector that targets all <h2> elements in the document.color: black; and padding: 5px;.color and padding. These define which feature of the element is being styled.JavaScript is the “brain” of a website. While HTML provides the structure, JavaScript handles the logic and the data.
In programming, any sequence of characters (letters, numbers, or symbols) used as text is called a String.
Think of a String like a “string” of beads, where each bead is a character. To tell the computer where the text starts and ends, we wrap it in quotes.
"Hello World", 'User123', or even "1234" (which is treated as text, not a number).An operator is a symbol that performs an action on your data. Here are four essential types you will use constantly:
| Operator | Name | What it does | Example |
|---|---|---|---|
+ |
Addition | Combines two numbers or joins two strings together. | 10 + 5 or "Cold" + "Brew" |
- |
Subtraction | Takes one value away from another. | 100 - 20 |
! |
Logical NOT | Flips a value (True becomes False). Useful for “If NOT logged in…” | !true |
=== |
Strict Equality | Checks if two things are exactly the same. | userChoice === "Option A" |
A function is a “recipe” for code. You write the instructions once, and then you can “cook” that recipe whenever you need it without rewriting the steps.
Functions are used to solve common website challenges, such as:
JavaScript uses “Conditionals” to decide which code to run. It works exactly like a flow chart: if a certain door is open, the code walks through it; if not, it tries the next one.
if Statement:
This is your primary test. It checks a specific condition. If that condition is true, the code inside the curly braces { } runs. If it’s false, JavaScript simply skips over it.
else if Statement:
Think of this as your “Plan B” or “Plan C.” You use these to chain multiple choices together. You can have as many else if blocks as you want to handle different scenarios between your first choice and your final fallback.
To make decisions, JavaScript needs to compare different pieces of data. Here are the tools it uses to do that:
| Tool | What it checks | Example |
|---|---|---|
=== and !== |
Equality & Inequality: Is this exactly the same, or is it definitely different? | status === "active" |
< and > |
Size Comparison: Is one number smaller or larger than the other? | price < 50 |
<= and >= |
Limits: Is a value within a certain range (including the number itself)? | age >= 18 |
Sometimes one test isn’t enough. You might need to check two or three things at once before making a decision. This is where Logical Operators come in.
&& (The “AND” Operator):
This operator is strict. For the whole thing to be true, every single part must be true.
if (hasKey && hasGas) { ... }|| (The “OR” Operator):
This operator is more relaxed. The whole thing is true if at least one part is true.
if (frontDoorOpen || backDoorOpen) { ... }