Skip to content

The HTML is not modern #5

Description

@0xdefoliate

The HTML here is not very modern and up-to-date.
We're talking about 1990's style here.

Why did you put a <body> tag in the <head>; I am genuinely curious why you did!
You also put stylesheets outside <head> as well.

And you mix UPPERCASE and lowercase tags as well, which is legal HTML, but is frowned upon; keep it lowercase -- that's the standard.

Although I could go on and on, I also want to point out that you forgot to terminate the <html>.


All these are not intended as insults, but I think you better get in the habit of writing modern HTML5.

So, instead of this tag soup:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stratos Apps</title>
    <link rel="icon" type="image/png" href="favicon.png">
    <BODY TEXT="#F2F2F2" LINK="#7069F2" VLINK="#7069F2" BGCOLOR="#02132E">
  </head>
  <link rel="stylesheet" href="styles.css">
  <img src="logo.png" alt="Logo" width="600" height="500">
  <h1 align=center><p>Stratos Apps is a collection of Open Source computer apps and tools coded in Python, empowering you with the tools you need to get the job done.</p>
  <BR>
  <h1 align=center><p>Find the apps on <a href="https://github.com/stratos-apps">GitHub</a></p>
  <BR>
  <h1 align=center><p>CONTACT THE PROJECT</p>
  <BR>
  <h1 align=center><p>If you wish to contact the project, please send an email to: <a href="mailto:stratosapps@duck.com">stratosapps@duck.com</a></p>

Structure it more like below, but do not copy-paste it since the markup is still soup.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stratos Apps</title>
    <link rel="icon" type="image/png" href="favicon.png">
    <link rel="stylesheet" href="styles.css">
  </head>
  
  <!-- NOTE: <body> does not belong in <head>, it belongs in <html> -->
  <body>
    <h1 align=center><p>Stratos Apps is a collection of Open Source computer apps and tools coded in Python, empowering you with the tools you need to get the job done.</p>
    <BR>
    <h1 align=center><p>Find the apps on <a href="https://github.com/stratos-apps">GitHub</a></p>
    <BR>
    <h1 align=center><p>CONTACT THE PROJECT</p>
    <BR>
    <h1 align=center><p>If you wish to contact the project, please send an email to: <a href="mailto:stratosapps@duck.com">stratosapps@duck.com</a></p>
    <img src="logo.png" alt="Logo" width="600" height="500">
  </body>
</html>  

The formatted markup here that I somewhat improved for you still has a bunch of problems, namely:

  • many unterminated <p> and <h1> tags.
  • nested content in <h1>, which is bad because <h1> is only intended for headings, i.e. simple text, not structuring or styling.
  • you use inline styles (i.e. align=center) instead of dedicated CSS.

Again, these are not insults, but I hope you gained some insight as to where you should improve.

NOTE: I am on my phone, so I obviously cannot properly rewrite HTML, and I instead just lightly formatted it for demonstration.

Metadata

Metadata

Assignees

No one assigned

    Labels

    PlannedPlanned feature or fix

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions