Fundamentals of HTML Basics
Understanding the fundamental building blocks of HTML (HyperText Markup Language) is crucial for web development and mastering these basics can greatly enhance your ability to create structured content on the internet. In this guide, we'll explore some essential components that every beginner should know about when starting with HTML:
HTML (HyperText Markup Language) is a standard markup language for creating web pages and web applications. Its main goal is to structure the content on your webpage in an organized manner, making it easily navigable by both humans and machines like search engines or screen readers used by visually impaclated users.
HTML documents are made up of elements which include:
- `` - This is the declaration that informs web browsers about what version of HTML the page is written in. For most modern websites, it's good to specify an HTML5 doctype like this one ``.
- Head and Body Tags (``,``, ``): The main building blocks for any html document where content resides or gets displayed on a web browser when the user navigates your page. Content inside body is what users see, whereas head section defines important information about resources such as CSS links, JavaScripts and Meta-tags etc., that enhances rendering performance of HTML elements within them like images/videos in webpage (in Body).
- The `html` tag represents the root element which wraps all other html tags. This is mandatory to create a valid document structure for web browsers.
* ``: Specifies language of content and initializes an empty CSS style block in case no styles are defined yet or if you want custom styling (for example, `lang` attribute).
- The `head` tag encapsulates meta-information about your webpage that doesn't display to users directly. It includes the title (``), character set declaration for proper encoding/displaying of text on screen etc., and linking external resources like stylesheets or scripts which are necessary to render elements within body tags effectively by enhancing user experience through dynamic changes in UI with animations, transitions, pop-ups etc.
* `<title>`: Represents the title shown atop browser tabs/window that helps users identify your page among other similar websites they have open or bookmarked; should be unique for every website and can include only alphabets & numbers(no spaces).
* Character Encoding (`<meta charset="utf-8">`): This tag ensures the browser will display text properly as it specifies which character encoding standards you are using. `UTF-8` is a universal standard for web content that supports all languages and characters across most platforms, making your website compatible with global audience effectively (easy to debug & maintain).
* Page Description (`<meta name="description"...>`) - Brief summary of page's contents which appears in search engine results as snippet alongwith the title; it should be concise but informative. 255 characters max for a single line, and maximum three lines required at most to keep reader engaged quickly & easily understandable by google crawlers that index your webpages into their database (can increase click-through rate).</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="h4">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#c4"
aria-expanded="false" aria-controls="c4">
Essential HTML Elements (2)
</button>
</h2>
<div id="c4" class="accordion-collapse collapse " aria-labelledby="h4">
<div class="accordion-body">* Author of document (`<meta name="author"...>`): Name/company details used as identifier should be mentioned for copyright and credibility. It's optional but good to include with nonprofit or community pages where you want readers familiarity & trust on your content, while corporate websites might use a placeholder like `© 2021 My Company Ltd`.
* Title of the document (`<title>`): Represents page title shown atop browser tabs/windows. It's essential for SEO and should include relevant keywords (e.g., `"About Us - YourCompanyName"`) to rank higher in search engine results; always unique & descriptive enough that user can understand content without even clicking on it, also helps with backlinking when shared across social media platforms or blogger sites etc.(Google prefers length 51-60 characters for best SEO practices).
- The `body` tag encapsulates the main visible contents of your webpage that gets displayed in users' browsers; all other elements like headings, paragraphs & images are placed inside here and styled accordingly using Cascading Style Sheets (CSS) or inline styles which we will learn next.
* `<p>`: Represents a simple block-level text element for creating structured content into readable sections/paragraphs; always include closing `</p>` tag after each paragraph to differentiate them visually & stylistically, and maintain consistency throughout your document (avoid using multiple consecutive spaces).
* `<h1>`,`<h2>`,`<h3>`: These heading elements are used for structuring content hierarchically with titles or headings that represent the main purpose of each section. `H1` is typically reserved as highest-level title (e.g., `"About Us"`), followed by subtitles like `h2`/`subheading`, and finally, supporting info in lower order such as paragraphs under them; ensure you only use 1 or two main headings per page for clear communication of content purpose while ensuring unique titles to avoid duplicate indexing across search engines.
* `<a href="">`: Allows users inside your webpage link externally with different websites, either directing towards other related topics within same domain (`"#"` as placeholder hash-tag) or external sources (e.g., `"https://www.examplewebsite.com/"`) - ensure to include descriptive alt text for images/icons which are also accessible by screen readers used commonly on public sites; always remember not all browsers support `mailto:` links in modern days & it's best use only inside email marketing pages or contact forms with proper fallback methods like using form submit button instead (e.g., `"Contact Us"`).
* `<div>` and/or`<section>`: Container elements for grouping together visually-similar components which can be styled independently allowing creative freedom to break your content into multiple `sections`; they help in structuring the page better without disturbing DOM flow when navigating using screen readers or keyboard arrows.
* `<img src="">` & ` ` : Used for embedding images on a webpage (e.g., `"<img src='path-to/yourimagehere.png' alt='description'>"`) while keeping consistent with accessibility guidelines by including concise, unique `alt` text which describes image contents or purpose visually impaired users might appreciate; use ` ` for white space inside body elements without any visible characters (only CSS should manage spacing) but note that modern browsers no longer require it.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="h5">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#c5"
aria-expanded="false" aria-controls="c5">
Essential HTML Elements (3)
</button>
</h2>
<div id="c5" class="accordion-collapse collapse " aria-labelledby="h5">
<div class="accordion-body">* `<ul>`,`<ol>` & `#list`: Presenting structured, ordered/unordered lists which enhance content readability by grouping related points together under headings or sections; bullet styles can be altered using CSS for visual distinction (e.g., `".bullet-point:before {content:"• ";}";`) while maintaining semantic meaning to assist SEO & accessibility standards effectively if used correctly in context with their respective parent div/section element(s).
* `<table>`: Represents a tabular data set (e.g., product or course details) which should only be implemented when necessary as tables are not inherently semantic elements of HTML5 markup language but still useful for displaying structured datasets like grids, charts etc.; ensure accessibility guidelines by using `th` tag to define header content & setting consistent table style/layout with CSS; always avoid inline styles due to limited flexibility while maintaining readability across different devices' screen sizes.
* `<form>`: Used for collecting user input or data submission (e.g., `"<input type='text'>"`), these elements should be labeled clearly via `label` tag which is associated by default with the same element id; provide placeholders (`"type=username&placeholder="`) as additional hints to users who might need assistance while using forms effectively on mobile devices or screen readers (e.g., `"Enter Username"`).
* `<script>` and/or`<link rel='stylesheet'>`: Allows incorporation of external resources like Javascript files, stylesheets which can be added at any point within the body tag but prefer to place it right before `</body>`. It improves page rendering performance as browsers load them after main content; always link directly from reputable sources for security purposes.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="h6">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#c6"
aria-expanded="false" aria-controls="c6">
Conclusion ✅
</button>
</h2>
<div id="c6" class="accordion-collapse collapse " aria-labelledby="h6">
<div class="accordion-body">Learning HTML fundamentals equips you with essential skills required in web development journey while ensuring effective communication of information across different platforms & devices effectively - maintaining the highest level accessibility, compatibility and SEO best practices simultaneously!</div>
</div>
</div>
</div>
<div class="text-center mt-4">
<button id="doneBtn" class="btn btn-primary" type="button">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade thankyou-modal" id="thankYouModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content text-center">
<div class="modal-body">
<h5 class="mb-2">Quality, Reliability & Service</h5>
<div class="fw-semibold mb-1">Thank You For Visiting</div>
<div class="mb-2">Brooks Computing Systems - Jacksonville</div>
<div class="mb-3">
Visit <a href="https://bcs.archman.us" target="_blank" rel="noopener">https://bcs.archman.us</a>
</div>
<button class="btn btn-primary" type="button" data-bs-dismiss="modal">Done</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const body = document.body;
const mainEl = document.getElementById('mainModal');
const thankEl = document.getElementById('thankYouModal');
const mainModal = new bootstrap.Modal(mainEl);
document.getElementById('themeToggle').onclick = () => {
body.classList.toggle('dark-mode');
};
document.getElementById('doneBtn').onclick = () => {
mainModal.hide();
};
mainEl.addEventListener('hidden.bs.modal', () => {
new bootstrap.Modal(thankEl).show();
});
mainModal.show();
</script>
</body>
</html>