How can the code be optimized to avoid using outdated HTML attributes like bgcolor and center?

To optimize the code and avoid using outdated HTML attributes like bgcolor and center, you can use CSS for styling and positioning instead. By separating the content (HTML) from the presentation (CSS), you can create a more maintainable and modern codebase. Use CSS properties like background-color for setting background color and text-align for centering content.

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: #f0f0f0;
            text-align: center;
        }
        .container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
            background-color: #ffffff;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome to our website</h1>
        <p>This is a paragraph of text.</p>
    </div>
</body>
</html>