Whether you are a website owner updating content or someone curious about how web pages work, understanding HTML fundamentals is incredibly valuable. HTML modifications are incredibly simple and do not require programming expertise. While HTML is technically a coding language, it is not a very powerful language on its own.
This guide delivers the beginner's tour of HTML as a language in the clearest way possible, enabling you to understand web page code structures like those found in content management systems.
Basic Concepts
Core Function of HTML
HTML tells browsers what content to display. It operates through tags formatted like this:
<p>This is some text.</p>
The "p" tag defines a paragraph. Tags come in pairs with opening and closing variants. Some tags are self-closing, like the image tag:
<img src="" alt="">
HTML Files
An HTML file is simply a plain text file ending in ".html" and can be created using basic text editors like Notepad, though specialized editors are preferable for more involved work.
Tag Attributes
Tags can include attributes for customization. The class attribute differentiates elements' appearance:
<p class="intro-text">This is an introductory paragraph.</p>
<p>This is a regular paragraph.</p>
CSS styling is required to make attributed elements visually distinct.
Your Very First Web Page
HTML5 Standard
Current HTML uses HTML5, designed to make the code easier to read for both humans and computers while providing contextual information about page content.
Basic Structure
<!DOCTYPE html>
<html>
<head>
<title>This is my awesome web page.</title>
</head>
<body>
</body>
</html>
The DOCTYPE declaration identifies the document as HTML5. The <html> tag marks the page boundaries.
The Head Section
The head contains page metadata rather than visible content. The <title> tag text appears in browser tabs. Additional head elements include:
- Link tags: Load external files like CSS stylesheets.
- Meta tags: Store information for search engines, including descriptions and keywords.
The Body Section
The body contains user-visible content:
<header>
<h1>Elephants Galore!</h1>
</header>
<section class="pagecontent">
<p>Here's some text about elephants!</p>
</section>
<footer>Copyright Elephants Galore!, 2467</footer>
Essential Content Tags
Headings and Subheadings
Six heading levels exist (h1 through h6), with h1 being the largest. h1 typically marks page titles, while h2 through h6 divide content sections for readability.
The Anchor Tag for Links
Links use the anchor tag with the href attribute:
<a href="https://google.com">Google</a>
URL Components:
- Protocol: HTTP or HTTPS
- Domain name: The website address
- Top-level domain: .com, .org, etc.
Internal Links: When linking within your site, use relative URLs:
<a href="about.html">About Us</a>
<a href="about-us/about.html">About Us</a>
Same-Page Links: Link to page sections using id attributes:
<a href="#content2">Jump to Content</a>
<div id="content2">
<p>Here's the content you want to link to.</p>
</div>
The Image Tag
The <img> tag displays images with two critical attributes:
<img src="images/elephants.jpg" alt="Picture of darned cute baby elephants." width="640px" height="480px">
The src attribute specifies the image location. The alt attribute describes images for accessibility and search engine purposes, helping screen reader users understand visual content.
Lists
Unordered lists (bullet points) use <ul> with <li> items:
<ul>
<li>This is a list item.</li>
<li>This is a list item.</li>
</ul>
Ordered lists (numbered) use <ol>:
<ol>
<li>This is a list item.</li>
<li>This is a list item.</li>
</ol>
Blockquote
The blockquote tag visually separates quoted material:
<blockquote>May the Force be with you. - Some Jedi, probably</blockquote>
Page Structure Tags
These building blocks define layout without directly visible user impact.
The Div Tag
Divs separate content groups. CSS styling converts them into functional layouts:
<div class="left-column">
<p>Here's some text in the left column.</p>
</div>
Header, Section, and Footer Tags
- Header: Begins content areas, typically containing titles.
- Section: Divides content into distinct areas.
- Footer: Closes content areas, often displaying copyright information.
<header>
<h1>Elephants Galore!</h1>
</header>
<section id="blog">
Put your blog posts here.
</section>
<footer>Copyright Elephants Galore!, 2467</footer>
The Article Tag
Articles group similar content such as blog posts and product listings:
<article>
<header>
<h3>This is a blog post title.</h3>
</header>
<section>
<p>Blog post content goes here.</p>
</section>
<footer>
<p>This post was published on Thursday, in the Elephant category.</p>
</footer>
</article>
Conclusion
While HTML can become more complex, these fundamentals enable confident content modifications. Here are a few tips to keep in mind:
- Carefully examine
classandidattributes to understand element functions. - Always back up original files before making changes.
- Use the undo button liberally.
- Enjoy the learning process.