HTML Structure and CSS Styling Fundamentals

Posted on Jan 11, 2026 in Naval Systems and Technology Engineering

HTML Tags and Attributes

Tags are keywords (like <p> or <img>) enclosed in angle brackets that mark the start and end of HTML elements, defining the structure and type of content.

Attributes provide additional information about an HTML element. They are placed within the opening tag (e.g., href="url", src="image.jpg") and specify properties or characteristics of the element.

Ordered vs. Unordered Lists

Here is the short difference between ordered and unordered lists with examples:

Ordered List (<ol>)

Used when the order of items matters. Items are typically numbered.

<ol>
    <li>First step</li>
    <li>Second step</li>
</ol>

Output:

  1. First step
  2. Second step

Unordered List (<ul>)

Used when the order of items does not matter. Items are typically bulleted.

<ul>
    <li>Item A</li>
    <li>Item B</li>
</ul>

Output:

  • Item A
  • Item B

Basic HTML Document Structure Example

This snippet demonstrates the fundamental structure of an HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Simple HTML Page</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a simple HTML page demonstrating headings, paragraphs, and hyperlinks.</p>

    <h2>About This Page</h2>
    <p>Here you will find some basic information and links to other interesting places on the web.</p>

    <h3>Topics Covered</h3>
    <ul>
        <li>Headings</li>
        <li>Paragraphs</li>
        <li>Hyperlinks</li>
    </ul>

    <h2>Useful Links</h2>
    <p>Below are some external links you might find helpful:</p>
    <ul>
        <li><a href="https://www.google.com" target="_blank">Visit Google</a> - A popular search engine.</li>
        <li><a href="https://www.wikipedia.org" target="_blank">Explore Wikipedia</a> - The free encyclopedia.</li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">Learn HTML on MDN Web Docs</a> - Great resource for web development.</li>
    </ul>

    <h2>Contact Us</h2>
    <p>If you have any questions, feel free to <a href="mailto:example@example.com">send us an email</a>.</p>
    <p>Thank you for visiting!</p>
</body>
</html>

Key Features of HTML5

Here are the key features of HTML5, in short:

  • Semantic Elements: New tags like <header>, <nav>, <article>, <section>, <footer> for better structure and meaning.
  • Multimedia Support: Native <audio> and <video> tags for embedding media without plugins.
  • Graphics: <canvas> for 2D drawing and better integration with SVG for vector graphics.
  • Enhanced Forms: New input types (e.g., email, date, number) and attributes (e.g., placeholder, required) for improved validation and user experience.
  • Offline & Storage: localStorage, sessionStorage, and IndexedDB for client-side data storage and offline capabilities.
  • Geolocation API: Access to user’s geographical location.
  • Web Workers: Background JavaScript threads to prevent UI freezing.
  • WebSockets: Full-duplex communication for real-time applications.
  • Drag and Drop API: Native support for drag-and-drop functionality.
  • Simplified Doctype: <!DOCTYPE html> makes it easier to write and read.

CSS Fundamentals: Styling Web Content

CSS (Cascading Style Sheets) is a language used to style the presentation of HTML documents. It controls colors, fonts, layout, and how elements are displayed, separating the content (HTML) from its visual design.

There are three main types of CSS:

1. Inline CSS

  • Where: Applied directly to a single HTML element using the style attribute.
  • Example: <p style="color: blue;">This is blue text.</p>
  • Use Case: Quick, one-off styling for a specific element. Not recommended for general use as it clutters HTML.

2. Internal (or Embedded) CSS

  • Where: Defined within the <style> tags inside the <head> section of an HTML document.
  • Example:
    <head>
  <style>
    h1{color:purple}
  </style>
</head>
  • Use Case: Styling a single HTML page that has unique styles not shared with other pages.

3. External CSS

  • Where: Defined in a separate .css file and linked to the HTML document using the <link> tag in the <head> section.
  • Example:
    • index.html: <link rel="stylesheet" href="styles.css">
    • styles.css: body { background-color: lightgray; }

CSS Selectors: ID vs. Class

Here’s a short breakdown of the differences between CSS class and ID selectors:

ID Selector (#)

  • Unique: Must be used only once per HTML document.
  • Purpose: To style a single, specific element or serve as a unique hook for JavaScript.
  • Specificity: Very high.

Class Selector (.)

  • Reusable: Can be applied to multiple HTML elements on the same page. An element can also have multiple classes.
  • Purpose: To apply reusable styles to any number of elements that share a common visual characteristic.
  • Specificity: Medium (lower than ID, higher than element tags).

The CSS Box Model Concept

The CSS Box Model is a fundamental concept in CSS that describes how HTML elements are structured and how their dimensions are calculated. It essentially treats every HTML element as a box, and this box has several layers:

  1. Content: This is the innermost part of the box, where the actual content of the element (text, images, etc.) is displayed. Its dimensions are determined by the width and height properties.
  2. Padding: This is the space around the content. It’s transparent and is used to create space between the content and the element’s border. You can control the padding on each side (top, right, bottom, left) using the padding-top, padding-right, padding-bottom, and padding-left properties, or use the shorthand padding property.
  3. Border: This is a line that surrounds the padding (and the content). It can have a style (solid, dashed, etc.), a width, and a color, which you can set using the border-style, border-width, and border-color properties, or the shorthand border property.
  4. Margin: This is the outermost layer, and it represents the space outside the border. It’s used to create space between the element and its neighboring elements. Like padding, you can control the margin on each side using margin-top, margin-right, margin-bottom, and margin-left, or the shorthand margin property. The margin is always transparent.

+—————————————————–+ | Margin | (Outside spacing) +—————————————————–+ | +———————————+ | | | Border | | | +———————————+ | | | +——————–+ | | | | | Padding | | | | | +——————–+ | | | | | Content | | | | | +——————–+ | | | +———————————+ | +—————————————————–+