Table of Contents

Introduction to HTML

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It serves as the backbone of any website, providing structure to content that browsers can interpret and display. HTML uses a series of elements, represented by tags, to define different parts of content like headings, paragraphs, links, images, and more.

HTML is not a programming language – it's a markup language that tells browsers how to structure the web content. When you create an HTML document, you're essentially creating a blueprint that browsers follow to render the page. The structure provided by HTML makes content accessible and meaningful both for browsers and for assistive technologies like screen readers.

In this comprehensive guide, we'll explore the fundamental concepts of HTML, starting with the basic document structure and gradually covering more complex elements and attributes. By the end, you'll have a solid foundation for creating well-structured web pages.

HTML Document Structure

Every HTML document follows a standard structure that includes several key components. Understanding this structure is crucial for creating valid HTML documents.

Basic HTML Document Structure 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
</body>
</html>

Key Components:

  • <!DOCTYPE html> - The document type declaration, informing the browser that this is an HTML5 document.
  • <html> - The root element that wraps all content on the page. The lang attribute specifies the document's language.
  • <head> - Contains meta-information about the document, such as character encoding, viewport settings, title, CSS links, and JavaScript references.
  • <body> - Contains all visible content that appears on the webpage, including text, images, links, and more.

The DOCTYPE Declaration

The DOCTYPE declaration must be the very first line in an HTML document. It tells browsers which version of HTML the page is using. For HTML5, the declaration is simple:

<!DOCTYPE html>

Older HTML versions had more complex DOCTYPE declarations, but the HTML5 version is clean and simple.

The <head> Section

The head section contains meta-information about your HTML document that isn't directly displayed on the page. This includes:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A brief description of your page">
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>
  • <meta charset="UTF-8"> - Specifies the character encoding for the document.
  • <meta name="viewport"> - Ensures proper responsive behavior on mobile devices.
  • <meta name="description"> - Provides a description for search engines.
  • <title> - Sets the page title that appears in the browser tab.
  • <link> - Links to external resources like CSS files.
  • <script> - Links to JavaScript files or contains inline scripts.

The <body> Section

The body section contains all the content that will be visible to users on the webpage. This includes text, images, links, and other HTML elements:

<body>
    <header>
        <h1>Website Title</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section>
            <h2>Welcome to our Website</h2>
            <p>This is the main content area.</p>
        </section>
    </main>
    
    <footer>
        <p>© 2023 My Website. All rights reserved.</p>
    </footer>
</body>

In this example, we've used semantic HTML5 elements like <header>, <nav>, <main>, <section>, and <footer> to create a structured layout.

HTML Elements and Attributes

HTML Elements

HTML elements are the building blocks of web pages. An element consists of a start tag, content, and an end tag:

<tagname>Content goes here...</tagname>

For example, a paragraph element looks like this:

<p>This is a paragraph.</p>

Some elements don't have content and don't need a closing tag. These are called "empty elements" or "self-closing elements":

<img src="image.jpg" alt="Description">
<br>
<hr>
<input type="text">

In HTML5, self-closing tags don't require a forward slash, but you can include it if you prefer:

<img src="image.jpg" alt="Description" />

HTML Attributes

Attributes provide additional information about HTML elements. They are always specified in the start tag and come in name/value pairs: name="value".

<tagname attribute1="value1" attribute2="value2">Content</tagname>

For example, the <a> element (anchor) uses the href attribute to specify the URL to link to:

<a href="https://www.example.com">Visit Example.com</a>

Some common attributes used in many HTML elements include:

  • id - Specifies a unique ID for an element
  • class - Specifies one or more class names for an element (used for CSS and JavaScript)
  • style - Contains inline CSS styling
  • title - Provides additional information, often shown as a tooltip
  • lang - Specifies the language of the element's content
  • data-* - Custom data attributes to store information
<div id="container" class="wrapper main" style="background-color: #f7f7f7;" title="Main container">
    <p lang="en">This is a paragraph with various attributes.</p>
    <button data-action="submit">Submit</button>
</div>

Global attributes can be used on any HTML element, while some attributes are specific to certain elements. For example, the src attribute is specific to elements like <img>, <script>, and <video>.

Basic HTML Elements

Headings

HTML provides six levels of headings, from <h1> (most important) to <h6> (least important). Headings help structure your content and are important for SEO and accessibility.

HTML Headings 
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>

Best Practices for Headings:

  • Use only one <h1> per page, typically for the main page title.
  • Don't skip heading levels (e.g., don't go from <h2> to <h4>).
  • Use headings to create a logical document outline.
  • Don't use headings just for styling - use CSS for that instead.

Paragraphs

The <p> element defines a paragraph of text. Browsers automatically add some margin space before and after paragraphs.

<p>This is a paragraph. It can contain text, links, images, and other inline elements.</p>

<p>This is another paragraph. Notice that browsers automatically add space between paragraphs.</p>

Line Breaks

The <br> element inserts a single line break. Unlike the <p> element, it doesn't add extra space. It's useful for addresses, poetry, or other content where line breaks are important.

<p>
123 Main Street<br>
Anytown, ST 12345<br>
United States
</p>

Horizontal Rules

The <hr> element creates a horizontal line that can be used to separate content sections:

<h2>Section One</h2>
<p>Content for section one.</p>

<hr>

<h2>Section Two</h2>
<p>Content for section two.</p>

Comments

HTML comments allow you to add notes to your code that won't be displayed in the browser. They're useful for documentation, organization, and temporarily disabling code.

<!-- This is a comment -->

<!-- 
    This is a multi-line comment
    that spans several lines
-->

<p>This text will be displayed.</p>
<!-- <p>This text won't be displayed.</p> -->

Text Formatting

HTML provides various elements for formatting text content. These elements help to emphasize text, define technical terms, mark citations, and more.

Text Formatting Elements 
<p><strong>This text is strong (bold)</strong></p>
<p><em>This text is emphasized (italic)</em></p>
<p><mark>This text is highlighted</mark></p>
<p><small>This text is smaller</small></p>
<p><del>This text is deleted</del></p>
<p><ins>This text is inserted</ins></p>
<p>This is <sub>subscript</sub> text</p>
<p>This is <sup>superscript</sup> text</p>
<p><code>This is code</code></p>
<p><kbd>Ctrl</kbd> + <kbd>C</kbd> to copy</p>
<p><abbr title="World Wide Web">WWW</abbr></p>
<p><q>This is a short quotation</q></p>
<p><cite>The Great Gatsby</cite> is a novel by F. Scott Fitzgerald</p>

Key Text Formatting Elements:

  • <strong> - Important text (typically bold)
  • <em> - Emphasized text (typically italic)
  • <mark> - Highlighted text
  • <small> - Smaller text
  • <del> - Deleted text (usually with a strikethrough)
  • <ins> - Inserted text (usually underlined)
  • <sub> - Subscript text
  • <sup> - Superscript text
  • <code> - Computer code
  • <kbd> - Keyboard input
  • <abbr> - Abbreviation or acronym
  • <q> - Short inline quotation
  • <cite> - Title of a work

It's important to note that HTML should be used to define the structure and meaning of content, not its appearance. While many formatting elements have default visual styles in browsers, you should use CSS for controlling appearance and use HTML elements for their semantic meaning.

Block Quotes

For longer quotations that are typically displayed as indented blocks, use the <blockquote> element:

<blockquote cite="https://www.example.com/quote-source">
    <p>This is a longer quotation that spans multiple lines or paragraphs. The blockquote element is used for longer quotes that are typically displayed as indented blocks of text.</p>
    <footer><cite>—Author Name</cite></footer>
</blockquote>

Preformatted Text

The <pre> element preserves both spaces and line breaks. It's often used for displaying code blocks or text with specific formatting requirements:

<pre>
    function greet(name) {
        return `Hello, ${name}!`;
    }
    
    console.log(greet('World'));
</pre>

The combination of <pre> and <code> is commonly used to display code blocks with preserved formatting:

<pre><code>
function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet('World'));
</code></pre>

Lists

HTML provides three types of lists: unordered lists, ordered lists, and description lists.

Unordered Lists

Unordered lists (<ul>) display items with bullet points. Each item is defined with a list item (<li>) element.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Ordered Lists

Ordered lists (<ol>) display items with numbering. You can control the numbering type and starting value with attributes.

<!-- Basic ordered list -->
<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

<!-- Ordered list with a specific starting value -->
<ol start="5">
    <li>Fifth item</li>
    <li>Sixth item</li>
</ol>

<!-- Ordered list with a specific numbering type -->
<ol type="A">
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
</ol>

The type attribute can have the following values:

  • "1" - Numbers (default)
  • "A" - Uppercase letters
  • "a" - Lowercase letters
  • "I" - Uppercase Roman numerals
  • "i" - Lowercase Roman numerals

Description Lists

Description lists (<dl>) associate terms (<dt>) with their descriptions (<dd>). They're ideal for glossaries, metadata, or key-value pairs.

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - the standard markup language for web pages.</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets - the language used to style web pages.</dd>
    
    <dt>JavaScript</dt>
    <dd>A programming language that enables interactive web pages.</dd>
</dl>

Nested Lists

Lists can be nested inside other lists to create hierarchical structures:

<ul>
    <li>Fruits
        <ul>
            <li>Apples</li>
            <li>Bananas</li>
            <li>Oranges</li>
        </ul>
    </li>
    <li>Vegetables
        <ul>
            <li>Carrots</li>
            <li>Broccoli</li>
            <li>Spinach</li>
        </ul>
    </li>
</ul>

HTML Best Practices

Following these best practices will help you create clean, maintainable, and accessible HTML code:

  1. Use semantic HTML elements - Choose elements that accurately represent the content's meaning, not just its appearance.
    • Use <header>, <footer>, <nav>, <main>, <section>, <article>, and other semantic elements.
    • Use heading elements (<h1> through <h6>) to create a logical document outline.
    • Use <button> for buttons, not <div> or <a> elements styled to look like buttons.
  2. Always include alt text for images - The alt attribute is essential for accessibility and SEO.
    • Decorative images can use alt="" (empty alt text).
    • Functional images (like buttons) should describe the function, not the image.
  3. Use proper document structure - Include all required elements in the correct order.
    • Start with the <!DOCTYPE html> declaration.
    • Include the lang attribute on the <html> element.
    • Include <meta charset="UTF-8"> in the <head>.
    • Add a viewport meta tag for responsive design.
  4. Separate structure from presentation - Use HTML for structure and CSS for presentation.
    • Avoid inline styles and deprecated presentational elements like <font>.
    • Use external CSS files instead of style attributes.
  5. Validate your HTML - Use tools like the W3C Validator to check for errors.
    • Fix validation errors to ensure browser compatibility.
    • Validation helps identify accessibility issues.
  6. Use proper indentation and formatting - Well-formatted code is easier to read and maintain.
    • Use consistent indentation (spaces or tabs).
    • Keep related elements together.
    • Add comments for complex sections.
  7. Optimize for accessibility - Ensure your content is usable by everyone.
    • Use ARIA attributes when necessary, but prefer native HTML semantics when possible.
    • Ensure proper keyboard navigation.
    • Provide proper text contrast.
  8. Keep it simple - Use the simplest markup that achieves your goals.
    • Don't over-nest elements unnecessarily.
    • Use classes instead of deeply nested selectors.

Next Steps

Now that you understand the basics of HTML, here are some next steps to continue your learning journey:

  • Explore HTML5 Semantic Elements - Learn about <header>, <footer>, <nav>, <section>, <article>, and other semantic elements that provide better structure to your documents.
  • Master HTML Forms - Forms are a critical part of interactive websites, allowing users to submit data.
  • Learn About Tables - HTML tables are used for displaying tabular data in rows and columns.
  • Dive into CSS - Cascading Style Sheets allow you to control the visual presentation of your HTML content.
  • Study JavaScript - JavaScript adds interactivity to your web pages, allowing for dynamic content and user interactions.
  • Understand Accessibility - Learn how to make your web content accessible to all users, including those with disabilities.
  • Practice Responsive Design - Create websites that work well on devices of all sizes.

Related Pages on HTMLCodeExamples.com: