<!DOCTYPE html> <!--Declare the doctype as the html standard of HTML 5-->
<html lang="en-us"> <!--Lang Attribute to declare the language of a webpage-->
<head> <!--Every html doc needs a head which contains important information for viewing the code on different devices.-->
<meta charset="UTF-8"> <!--The declaration of correct character encoding ensures proper interpretation and indexing for search purposes.-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--Another default meta definition sets the user's device display area to a default.-->
<title>Men need multiple mental health options. The content on this site holds no claim to expertise in the mental health profession.</title> <!--Primarily used for SEO, accurate titles help algorithms do their thang.-->
</head>
<body> <!--The body serves as the main content of your page.-->
<h1>Pitfalls</h1> <!--h1 represents a section of the body (a heading); the primary heading, followed by lower-priority additional headings in ascending order.-->
<p>Nearly every man deals with major pitfalls in life <strong>--</strong> <em>depression, sorrow, rage, lonliness, jealousy, resentment </em></p> <!--A p tag represents a style, similar to a paragraph, and visually separates elements.-->
<p>A pitfall is concealed.</p>
<p>A pitfall takes work to maintain.</p>
<p>A pitfall can ruin your life.</p>
<p>You don't have to fall victim these traps. You can learn skills to overcome them, so that when you're faced with decisions that may lead to pitfalls, you can avoid them.</p>
<p>The most important thing to remember is, the choice is yours.</p>
</body>
<footer><a href="/Users/******/Documents/bmi/page2.html">Learn more..</a></footer> <!--Sometimes important links or references are necessarily included in a footer, similar to a research document.-->
</html>
I want to make sure everything is proper with regards to HTML style and coding conventions, and comments. Indents are two (2) spaces. I took notes on each line to help me learn and remember.
1 Answer 1
HTML isn't intended for humans to read (but still it can be read), so that's more of a training, not real work. Real production HTML is better stripped of comments and spaces, minified and zipped to save network traffic. But if you need it to be readable...
Use validator
The only formal error here can be found immediately by an online validator: <footer> tag is out of <body>.
<strong> is not bold
The <strong> HTML element indicates that its contents have strong importance, seriousness, or urgency. It is shown in bold, but if you need bold font - use CSS, not <strong> tag.
Line width
If you need the code to be read by humans, limit string width. Traditional maximum width is somewhere near 80 symbols per line (80 or 78), but with modern wide screens you can make it some wider; check out how you see your code on this site. Break long lines.
Use same indentation for comments
If comments start at the same distance, it makes clear for reader they are of the same kind. Like
<!DOCTYPE html> <!--Declare the doctype as the html standard of HTML 5-->
<html lang="en-us"> <!--Lang Attribute to declare the language of a webpage-->
<head> <!--Every html doc needs a head which contains important
information for viewing the code on different devices.-->
<meta charset="UTF-8"> <!--The declaration of correct character encoding ensures
proper interpretation and indexing for search purposes.-->
–,—). Also usingstrongon it seems wrong. \$\endgroup\$