CS306 - Web Programming: HTML

1. Basic HTML elements

ΛΏ Back to homepage

1.1. HTML document structure

    <!doctype html>
    <html lang="en-US">
        <head>
            <meta charset="utf-8" />
            <title>My Webpage</title>
        </head>
        <body>
            <p>Hello, world</p>
        </body>
    </html>

An HTML document is structured into two main parts: the <head> and the <body>. The <head> contains metadata like the character encoding (<meta charset="utf-8">) and the page title (<title>). The <body> holds the visible content, such as text, images, and other elements. The entire document starts with <!DOCTYPE html> to declare it as an HTML5 file and is wrapped in the <html> tag. This structure makes the page easy for browsers to read and display.

1.2. Headers and paragraphs

    <h1>Main Header</h1>
    <h2>Subheader</h2>
    <h3>another subheader</h3>
    <h4>another subheader</h4>
    <h5>another subheader</h5>
    <h6>another subheader</h6>
    <p>This is a paragraph</p>

Main Header

Subheader

another subheader

another subheader

another subheader
another subheader

This is a paragraph

HTML headers and paragraph elements are fundamental building blocks for structuring content on a webpage. Headers, defined by the <h1> to <h6> tags, are used to create hierarchical headings, with <h1> being the most important (usually the main title) and <h6> the least important. They help organize content, improve readability, and assist search engines in understanding the page structure. Paragraphs, defined by the <p> tag, are used to group blocks of text into readable sections. Together, headers and paragraphs create a clear and logical flow of information.

1.3. Strong and Emphasis

<p>
<strong>Lorem ipsum dolor sit amet consectetur</strong> adipisicing elit. Assumenda laudantium dignissimos eum, ipsum iure ut hic quibusdam, reprehenderit nobis obcaecati quod aspernatur cum nemo quaerat laborum natus nam quis quasi.Hic eligendi quae, explicabo ipsa tenetur <em>dolor pariatur autem molestiae odit com similique maxime ratione cupiditate omnis at non aperiam officia doloribus provident quasi?</em> Vero id at saepe totam omnis.
</p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda laudantium dignissimos eum, ipsum iure ut hic quibusdam, reprehenderit nobis obcaecati quod aspernatur cum nemo quaerat laborum natus nam quis quasi. Hic eligendi quae, explicabo ipsa tenetur dolor pariatur autem molestiae odit cum similique maxime ratione cupiditate omnis at non aperiam officia doloribus provident quasi? Vero id at saepe totam omnis.

The <strong> and <em> elements in HTML are semantic tags used to add meaning and emphasis to text. The <strong> tag indicates that the enclosed text is of strong importance, typically displayed in bold by browsers, while the <em> tag emphasizes text, usually rendered in italics. These elements not only enhance visual presentation but also improve accessibility, as screen readers interpret them to convey emphasis or importance to users. Alongside other semantic elements like <header>, <article>, <section>, and <footer>, they help create a well-structured and meaningful document. Semantic elements like these make HTML more readable for developers and more understandable for both browsers and assistive technologies, ensuring a better user experience.

1.5. Lists

<!-- Unordered List -->
<p>My Shopping List</p>
<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Milk</li>
    <li>Bread</li>
</ul>

<!-- Ordered List -->
<p>My Top 3 Favourite Programming Languages</p>
<ol>
    <li>JavaScript</li>
    <li>Python</li>
    <li>Java</li>
</ol>

<!-- Definition List -->
<p>Web Development Terms</p>
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - The standard language for creating web pages.</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets - Used for styling and formatting web pages.</dd>
    <dt>JavaScript</dt>
    <dd>A programming language used to add interactivity to web pages.</dd>
</dl>

My Shopping List

  • Apples
  • Bananas
  • Milk
  • Bread

My Top 3 Favourite Programming Languages

  1. JavaScript
  2. Python
  3. Java

Web Development Terms

HTML
HyperText Markup Language - The standard language for creating web pages.
CSS
Cascading Style Sheets - Used for styling and formatting web pages.
JavaScript
A programming language used to add interactivity to web pages.

HTML provides several elements for creating lists, which are essential for organizing and presenting information in a structured way. Unordered lists (<ul>) are used for items without a specific order, typically displayed with bullet points. Ordered lists (<ol>) are used for items that follow a sequence, displayed with numbers or letters. Definition lists (<dl>) are used for terms and their descriptions, with <dt> for the term and <dd> for the definition. Lists improve readability, enhance accessibility, and help users navigate content more effectively. Proper use of these elements ensures a clean and logical structure for web pages.