DEV Community

Cover image for HTML Course
igbojionu
igbojionu

Posted on • Updated on

HTML Course

Introduction to HTML

HTML (Hypertext Markup Language) is the standard language for creating web pages. It describes the structure of web pages using markup.

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 Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • <!DOCTYPE html> declares the document type and version.
  • <html> is the root element.
  • <head> contains meta-information about the HTML document.
  • <meta charset="UTF-8"> sets the character encoding.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> ensures proper rendering on various devices.
  • <title> sets the title of the web page.
  • <body> contains the content of the HTML document.
  • <h1> to <h6> are heading tags.
  • <p> is a paragraph tag.

HTML Elements and Attributes

HTML elements are the building blocks of a webpage, and they can have attributes.

<a href="https://www.example.com" target="_blank">Visit Example</a>
<img src="image.jpg" alt="Description of the image">
Enter fullscreen mode Exit fullscreen mode
  • <a> is an anchor (link) element.
  • href is an attribute specifying the link's destination.
  • target="_blank" opens the link in a new tab.
  • <img> is an image element.
  • src is an attribute specifying the image source.
  • alt provides alternative text for accessibility.

Lists and Tables

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

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

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>
Enter fullscreen mode Exit fullscreen mode
  • <ul> creates an unordered list.
  • <ol> creates an ordered list.
  • <li> is a list item.
  • <table> creates a table.
  • <tr> defines a table row.
  • <th> defines a table header cell.
  • <td> defines a table data cell.

Forms and Input Elements

<form action="/submit" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>

    <input type="submit" value="Submit">
</form>
Enter fullscreen mode Exit fullscreen mode
  • <form> creates a form.
  • action specifies where the form data should be sent.
  • method defines the HTTP method (e.g., "post").
  • <label> creates a label for an input field.
  • for associates the label with the input field.
  • <input> is an input element.
  • type defines the input type (e.g., "text", "password").
  • id provides a unique identifier.
  • name specifies the name for form submission.
  • required makes the input mandatory.
  • <submit> is a submit button.

HTML5 Semantic Elements

HTML5 introduced semantic elements for better page structure.

<header>
    <h1>Website Header</h1>
</header>

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

<section>
    <article>
        <h2>Article Title</h2>
        <p>Content goes here.</p>
    </article>

    <article>
        <h2>Another Article</h2>
        <p>More content.</p>
    </article>
</section>

<footer>
    <p>&copy; 2024 My Website</p>
</footer>
Enter fullscreen mode Exit fullscreen mode
  • <header> defines a header for a section or a page.
  • <nav> represents a navigation menu.
  • <section> groups related content.
  • <article> defines independent, self-contained content.
  • <footer> contains footer information.

Conclusion

I Hope this course provides a foundational understanding of HTML and HTML5. Practice by creating your own HTML pages in Visual Studio Code, exploring additional elements, and diving into CSS for styling will be our next watch out>> :). Happy coding!

Top comments (0)