An Introduction to HTML and the Building Blocks of Modern Web Development - part 2
Introduction to HTML
HTML, which stands for HyperText Markup Language, is a standardized markup language used to create the structure and content of web pages.
HTML is not a programming language; instead, it’s a markup language that describes the structure of content on the web.
HTML is built using a series of elements, which are represented by tags and attributes.
Tags
HTML uses tags to define elements within a document.
<p>This is the content.</p>Most HTML tags open with a opening tag:
<p>
and are closed with a corresponding closing tag:
</p>
The information within is called content.
Some tags are self closing. A self-closing tag ends with the forward slash /> at the end of the opening tag.
examples of self closing tags:
<img src="image.png" alt="describes the image" />
<input type="checkbox" />
Elements
An element refers to the entire tag structure from the opening tag, with the content, to the closing tag.
<p>This is the content.</p>Attributes
Attributes are used to provide additional information about HTML elements, they can modify or customize the behavior of that element.
Attributes are always included within the element’s opening tag.
for example:
<a href="https://google.com">Google</a>Here the Anchor tag (represented by <a></a>) is used to create a link to another page. The href attribute (which stands for hyperlink reference) is where the link points to.
HTML Comments
Comments allow developers to hide content and elements from being rendered by the browser.
Comments can be a useful tool for organizing and documenting your HTML code. They can be used to explain complex sections of code, provide instructions, or temporarily disable code for testing purposes.
<!-- This is not seen by the user -->
<!-- <a href="https://google.com">Google</a> -->An HTML comment is written with an opening <!-- and a closing -->.
HTML Code Formatting
HTML code formatting refers to how you should write your code to enhance readability and maintainability. Properly formatted code makes it easier for developers to understand the structure of the document and will promote consistent coding practices.
Here are some HTML code formatting guidelines:
Indentation
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<header>
<h1>Main Heading</h1>
</header>
<main>
<p>The main content.</p>
</main>
</body>
</html>
- Use consistent indentation to visually represent the hierarchy of elements
- Typically, an indentation is one tab click, or 2 or 4 spaces
- Indent child elements within their parent elements
HTML Heirarchy
The terms “child” and “parent” elements refer to the hierarchical relationship between HTML elements within the structure of a web page.
<div> <!-- This is the parent element -->
<p>Child element 1</p> <!-- This is a child element -->
<p>Child element 2</p> <!-- Another child element -->
</div>The parent element <div></div> contains one or more child elements <p></p>.
While child elements <p></p> is contained within its parent element <div></div>.
note: The parent-child relationship in HTML is essential for applying styles, scripting interactions, and structuring content effectively. CSS and JavaScript target and manipulate elements based on their positions in this hierarchy.
Attribute Formatting
<a
href="https://www.example.com"
target="_blank"
rel="noopener noreferrer"
>
Visit Example.com
</a>- If an element has multiple attributes, consider placing each attribute on a new line for better readability.
Quotation Marks
<img src="image.jpg" alt="Description">
<!-- is the same as -->
<img src='image.jpg' alt='Description'>- HTML allows for the use of double or single quotation marks
- But an opening single quotation mark must be closed by a single quotation mark. This is the same for double quotations.
Lower Case Tag Names
<section>
<h2>Section Title</h2>
<p>Section content.</p>
</section>
- HTML is not case-sensitive
- Keep tag names in lowercase for code consistency.
Putting it all together
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Web Page</h1>
</header>
<div>
<p>This is a simple paragraph.</p>
<a href="https://www.darrylch.com">Visit DarrylCh.com</a>
</div>
<footer>
<p>© 2024 My Web Page</p>
</footer>
</body>
</html>Which would look like this:
Next Steps
Before you go the next chapter in the series you should read about the HTML Skeleton Code. The HTML skeleton code is the starting point for all webpages, and will give you a better understanding of how a browser renders a webpage.