DAY 12: Mastering HTML: From Syntax to Semantics

INTRODUCTION:

Hello September, it is a new month, and I wish you all a wonderful month.

Anyway, the days leading up to the new month have been filled with work; I've been swamped doing medical outreach to various communities in my state and many other things.

I am very happy to say that I have rounded up with the basics of HTML and I am slowly incorporating CSS into my codes. Yay me!!

As I am rounding up with HTML, I am going to be doing the final or one of the final explanations on HTML syntax and structure.

HTML Syntax & Structure

1. Nesting: This involves placing HTML elements within each other, therefore creating something like a parent-child relationship.

   Nested elements should be placed two (2) spaces further to the right of the element they are nested in.

   • An example is: list items (<li>) are nested within unordered (<ul>) or ordered (<ol>) lists.

     CODE EXAMPLE:

     <ul>

     <li>

     </ul>

2. Indentation: This is used to improve the readability of your HTML code, typically by aligning nested elements.

   It involves aligning nested elements to the right, typically by two spaces or a tab, to reflect their hierarchical structure. Proper indentation is also applied in CSS and JavaScript to format rules and functions.

HTML Attributes

1. Boolean Attributes: These are special types of HTML attributes that can be either true or false.

   These attributes don’t require a value; their presence alone enables the feature.

   Common examples are:

   • <checked>: For checkboxes and radio buttons.

   • <readonly>: For input fields to prevent modifications.

   • <required>: For form elements to indicate a required field.

2. Quotes: They are used around attribute values, and also URL references.

   Single (') or double (") quotes can be used, and both work the same way as long as it is consistently used. Although quotes are technically optional for simple attribute values like letters or digits, it is a good practice to always use quotes to avoid errors and improve readability.

   It becomes necessary when the value contains spaces, special characters, or more than one word.

   Common examples are:

   • Attribute values (e.g; 'class="myClass"', 'id="myId"')

   • URL references (e.g; 'href="https://example.com"', 'src="image.jpg"')

HTML Document Structure

1. Section Elements: This helps organize content into distinct parts, making your page more accessible and understandable.

   Common examples are:

   • <article>: Represents a self-contained piece of content, like; a blog post(like my blog for example. Ha ha!!) or news article.

   • <aside>: Represents content related to the main content, like; a sidebar or a note.

   • <nav>: Represents a block of navigation links.

   • <main>: Represents the main content of the document.

   • <footer>: Represents the footer of a document or section, typically containing copyright or contact information.

   • <header>: Represents the introductory content or a group of navigation links for a section, page, or the entire document.

   • <figure>: Represents self-contained content like; diagrams, images or code snippets, often with a caption.

   • <figcaption>: Provides a caption or description for the content within a '<figure>'.

   • <details>: Creates a collapsible widget that reveals hidden content.

   • <summary>: The visible heading for an '<details>' element, is used to toggle the hidden content.

HTML Semantics and Non-Semantics:

1. Semantics: This involves using elements that describe or convey the meaning of the content.

   For example, elements like; '<header>', '<footer>', '<article>', '<nav>', and '<section>' help provide context about their content; clearly describing their purpose, and improving both Search Engine Optimization (SEO) and user accessibility.

2. Non-semantics: They serve more general purposes, and are often used for styling without conveying specific meaning or information.

   For example, examples like; '<div>' and '<span>'.

Code Formatting & Readability:

1. Whitespace: This refers to the spaces, line breaks, and tabs used in code to improve readability. Although you might add extra spaces between words in your HTML, the browser usually displays only one space as it ignores most whitespace, maintaining it in your code helps in organizing sections and enhancing clarity.

   To preserve additional spaces or line breaks, you can use special tags like ' ' for an extra space or the '<pre>' tag to keep all spaces and line breaks exactly as they are typed. The primary function of whitespace in your code is to improve readability, making it easier to understand the structure and flow.

   NOTE: Tags like '<br>' can be used for formatting text, and blank lines can separate code blocks.

EXTRA NOTES:

1. I explained everything exactly the way I understood it, so read through carefully.

2. The picture I attached is just a sample of where I applied some of the elements discussed.