HTML - Syntax

Ethan D. -

Basic HTML Document Structure

Every HTML document follows a basic structure that includes several key elements. Understanding this structure is necessary for creating well-formed and valid HTML pages.

The first element in an HTML document is the <!DOCTYPE> declaration. This declaration informs the web browser about the version of HTML being used. For HTML5, the current standard, the declaration is simply <!DOCTYPE html>. It should be placed at the very beginning of the document, before any other elements.

The next element is the <html> element, which wraps the entire content of the page. It is known as the root element of an HTML document. All other elements should be nested within the <html> tags.

Inside the <html> element, there are two main sections: the <head> and the <body>.

The <head> element contains metadata about the HTML document, such as the page title, character encoding, and links to external CSS and JavaScript files. This information is not visible on the webpage itself but is used by browsers and search engines. Important elements within the <head> include <title>, <meta>, <link>, and <script>.

The <body> element contains the visible content of the webpage, such as headings, paragraphs, images, lists, and tables. All the content that users see and interact with should be placed within the <body> tags.

Example: Basic HTML Document Structure

<!DOCTYPE html>
<html>
<head>
    <title>My Webpage</title>
</head>
<body>
    <h1>Welcome to my webpage!</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

HTML Tags

HTML tags are the building blocks of web pages, allowing you to structure and format content. Tags define elements such as headings, paragraphs, lists, and links. Using tags properly is important for creating well-structured and semantic HTML.

Most HTML tags have an opening tag and a closing tag, which surround the content they define. Opening tags start with <, followed by the tag name and >. Closing tags are similar but include / before the tag name. For example, a paragraph is defined using the <p> tag, like this: <p>This is a paragraph.</p>.

Some HTML tags, known as self-closing or empty tags, do not need a closing tag. These tags represent elements that have no content within them. Examples of self-closing tags include <br> for line breaks, <img> for images, and <meta> for metadata. In HTML5, it is optional to include the closing / for self-closing tags, so both <br> and <br /> are valid.

When using multiple tags to define the structure of your content, nest them properly. This means closing tags in the reverse order they were opened. For example, if you have a <strong> tag inside a <p> tag, close the <strong> tag before the <p> tag:

Example: This is a paragraph with nested tags

<p>This is a <strong>paragraph</strong> with nested tags.</p>

Improperly nested tags can lead to unexpected results and make your HTML invalid. Always ensure your tags are properly nested and closed to maintain a well-structured document.

HTML Elements

An HTML element is a part of an HTML document that has an opening tag, content, and a closing tag. Elements structure and give meaning to the content within a webpage. The opening tag shows the start of an element, while the closing tag marks its end. The content between these tags can be text, other HTML elements, or both.

HTML elements can also have attributes. Attributes give extra information about the element and are placed within the opening tag. They have a name and a value, separated by an equals sign (=). The attribute name shows the property being set, while the attribute value gives the value for that property. For example, the <a> element, which makes a hyperlink, uses the href attribute to specify the link's destination:

Example: Anchor element with href attribute

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

Common attributes include class and id, which are used for styling and targeting elements with CSS and JavaScript. The class attribute lets you group elements together based on shared characteristics, while the id attribute gives a unique identifier for a specific element within the document.

Some HTML elements, known as empty elements or void elements, do not have a closing tag and cannot contain any content. These elements are self-closing and are used to insert or embed content into the page. Examples of empty elements include:

Element Description
<br> Inserts a line break
<hr> Creates a horizontal rule or thematic break
<img> Embeds an image into the page
<input> Creates an input field for user interaction
<meta> Provides metadata about the HTML document

When using empty elements, remember that they do not have a closing tag. In HTML5, the closing forward slash (/) is optional for empty elements, so both <br> and <br /> are valid.

Case Sensitivity

In HTML, tag and attribute names are not case-sensitive. This means that whether you use uppercase or lowercase letters, the web browser will understand the tags and attributes the same way. For example, <div>, <DIV>, and <Div> will all be treated as the same <div> tag by the browser.

However, it is a common convention to use lowercase letters for all tag and attribute names in HTML. This practice improves code readability and consistency, making it easier for developers to understand and maintain the code. Using lowercase also adheres to the HTML5 specification, which recommends lowercase for tags and attributes.

Example of tag cases

<!-- Valid but not recommended -->
<DIV class="content">
    <P>This is a paragraph.</P>
</DIV>

<!-- Recommended -->
<div class="content">
    <p>This is a paragraph.</p>
</div>

When writing attribute names within tags, the same convention applies. Lowercase attribute names are preferred for consistency and readability. For instance, when using the class attribute, write it as class="example" instead of CLASS="example".

Example of attribute cases

<!-- Valid but not recommended -->
<a HREF="https://www.example.com">Visit Example.com</a>

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

While HTML is not case-sensitive, it's important to note that other related technologies, such as CSS and JavaScript, are case-sensitive. When referencing HTML elements in CSS or JavaScript, make sure to use the correct case for selectors, properties, and variables.

Adhering to the lowercase convention for HTML tags and attributes helps maintain consistency, improves readability, and makes your code more compliant with web standards.

Whitespace and Indentation

In HTML, whitespace between elements, such as spaces, tabs, and new lines, is largely ignored by web browsers when rendering the page. This behavior is known as whitespace collapse. Multiple spaces, tabs, or line breaks are treated as a single space, and the browser will automatically adjust the layout of the elements based on the available space and CSS styles applied.

Example: Multiple spaces collapsed

<!-- Multiple spaces are collapsed into a single space -->
<p>This    is    a    paragraph.</p>

Even though the browser collapses whitespace, it is still important to use proper indentation and spacing in your HTML code for readability and maintainability. Well-organized code is easier to read, understand, and debug, especially when working on larger projects or collaborating with other developers.

To improve code readability, follow these best practices for indentation:

Best Practice Description
Use consistent indentation Use either spaces or tabs for indentation, but stick to one method for consistency throughout your HTML document.
Indent nested elements Indent nested elements to show their hierarchy and relationship to parent elements. Each level of nesting should be indented by a consistent amount, such as 2 or 4 spaces.
Use blank lines Use blank lines to separate distinct sections of your code, such as between different elements or groups of related elements. This makes it easier to visually identify the structure of your document.
Break long lines When dealing with long lines of code, consider breaking them into multiple lines for better readability. For example, if an element has many attributes, you can place each attribute on a new line and indent them for clarity.

Indentation example

<div>
  <h1>Main Heading</h1>
  <p>This is a paragraph.</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
</div>

Example: Breaking long lines

<img src="image.jpg"
     alt="Example image"
     class="responsive-image"
     width="500"
     height="300">

Remember that while proper indentation and spacing do not affect how the browser renders the page, they are essential for making your code more readable and maintainable. It's a good habit to develop early on, as it will help you write cleaner and more organized code, especially as your projects grow in complexity.

Comments in HTML

Comments in HTML add notes, explanations, or reminders within the code without affecting the content displayed on the webpage. They help document your code, making it easier to understand and maintain, especially when working with other developers or returning to a project after some time.

HTML supports two types of comments: single-line comments and multi-line comments.

Single-line comments start with <!-- and end with -->. They are used for brief notes or explanations that fit on a single line. Web browsers ignore the content between the opening and closing comment tags.

Single-line comment example

<!-- This is a single-line comment -->
<p>This is a paragraph.</p>

Multi-line comments also start with <!-- and end with -->, but they can span multiple lines. They are useful for longer explanations, temporarily removing sections of code, or adding detailed documentation.

Multi-line comment example

<!--
  This is a multi-line comment.
  It can span across multiple lines.
  Use it for longer explanations or to temporarily remove code.
-->
<div>
  <h1>Heading</h1>
  <p>This is a paragraph.</p>
</div>

When using comments in your HTML code, follow these best practices:

Best Practice Description
Use comments sparingly While comments can be helpful, too many comments can clutter your code and make it harder to read. Use comments only when necessary to clarify complex or non-obvious parts of your code.
Keep comments concise Comments should be brief and to the point. Avoid writing lengthy explanations or repeating information that is already clear from the code itself.
Update comments when updating code If you make changes to your code, make sure any related comments are updated to reflect those changes. Outdated comments can be misleading and cause confusion.
Remove unnecessary comments before deployment Before deploying your code to a production environment, remove any comments that are no longer needed, such as those used for debugging or temporary code removal. This helps keep your final code clean and optimized.

Inline comment examples

<!-- TODO: Add form validation script -->
<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Submit</button>
</form>

<!--
<div class="deprecated-section">
  <p>This section is no longer in use and will be removed in a future update.</p>
</div>
-->

Common Syntax Mistakes

When writing HTML, you can make syntax mistakes, especially as a beginner. These mistakes can lead to unexpected results or cause your webpage to not display correctly. Here are some common syntax mistakes to watch out for:

Mistake Description
Forgetting closing tags Most HTML elements need both an opening and a closing tag. Failing to include the closing tag can cause the browser to read the structure of your document incorrectly.
Improperly nested tags HTML elements should be nested so that the inner elements are closed before the outer elements. Improperly nested tags can cause the browser to read the structure of your document incorrectly.
Mismatched opening and closing tags The tag name in the closing tag must match the tag name in the opening tag. Mismatched tags can cause the browser to read the structure of your document incorrectly, leading to elements not being closed properly.
Incorrect use of quotes in attributes Attribute values should always be enclosed in quotes, either single (') or double ("). Failing to use quotes or using mismatched quotes can cause the browser to misread the attribute value.

Examples:

Example: Forgetting closing tags

<!-- Incorrect -->
<p>This is a paragraph.

<!-- Correct -->
<p>This is a paragraph.</p>

Example: Improperly nested tags

<!-- Incorrect -->
<p><strong>This is a paragraph.</p></strong>

<!-- Correct -->
<p><strong>This is a paragraph.</strong></p>

Example: Mismatched opening and closing tags

<!-- Incorrect -->
<p>This is a paragraph.</div>

<!-- Correct -->
<p>This is a paragraph.</p>

Example: Incorrect use of quotes in attributes

<!-- Incorrect -->
<img src=image.jpg alt=Example image>

<!-- Correct -->
<img src="image.jpg" alt="Example image">

To avoid these common syntax mistakes, follow best practices such as:

  • Always include closing tags for elements that need them
  • Properly nest elements and close them in the reverse order they were opened
  • Double-check that opening and closing tag names match exactly
  • Consistently use quotes around attribute values and make sure they are properly matched

HTML Entities

HTML entities are special codes used to represent characters that have a specific meaning in HTML or cannot be easily typed using a standard keyboard. These entities make sure the browser interprets the characters correctly and shows them as intended on the webpage.

Entities are useful when working with reserved characters in HTML, such as <, >, &, ", and '. These characters define the structure and syntax of HTML elements, so using them directly in your content can lead to parsing errors or unexpected behavior. To include these characters in your text, you need to use their HTML entities.

Here are some common HTML entities for reserved characters:

Character Entity Name Entity Number
< &lt; &#60;
> &gt; &#62;
& &amp; &#38;
" &quot; &#34;
' &apos; &#39;

To use an HTML entity, you can use its entity name or entity number. Entity names start with an ampersand (&) and end with a semicolon (;), while entity numbers start with an ampersand and hash (#) and end with a semicolon.

Example: Using entity names

<!-- Using entity names -->
<p>This is a &lt;p&gt; element.</p>
<p>To display an ampersand, use &amp;amp;.</p>

Example: Using entity numbers

<!-- Using entity numbers -->
<p>This is a &#60;p&#62; element.</p>
<p>To display an ampersand, use &#38;amp;.</p>

HTML entities are not limited to reserved characters. They can also represent special characters, such as symbols, accented letters, and emoji, that may not be available on all keyboards or could be difficult to type. Some common special character entities include:

Character Entity Name Entity Number
© &copy; &#169;
® &reg; &#174;
™ &trade; &#8482;
€ &euro; &#8364;
£ &pound; &#163;
¿ &iquest; &#191;
ñ &ntilde; &#241;

Example: Special character entities

<p>Copyright &copy; 2021 Example Company.</p>
<p>The price is &euro;9.99.</p>
<p>The Spanish word for "year" is "a&ntilde;o".</p>

Using HTML entities when necessary helps make sure your content is shown accurately and consistently across different browsers and devices. It also prevents parsing errors and makes your code more readable and maintainable.