Hypertext Markup Language, also known as HTML, is one of the basic programming languages that designers and developers are starting to learn from here.
I have introduced HTML for the previous article. I highly recommend you read Intro HTML for Designers before coming to this article. Intro HTML for Designer.
In this article, I will raise the level of advanced HTML, which will make you more confident and help you reach another level of your design, or maybe you can create a website portfolio by yourself. Now let’s get started on our topic.
HTML Elements
The HTML elements start with the start tag <element_name> and end with the end tag </element_name>. And all the time, you need to follow the rule by starting tag and ending tag. However, some elements are self-sufficient enough and don’t need the ending tag.
Here’s an example of an HTML element:
<element_name> Content Here </element_name>
<h1> My First Heading</h1>
Empty HTML element
This empty HTML element is unique among other elements because it doesn’t have content between the start and end tags. But they perform specific functions or display particular attributes on the page.
Example:
<meta charset="UTF-8">- <meta>: This HTML tag is for the metadata element.
- charset=”UTF-8”: This attribute specifies the character encoding for an HTML document, ensuring that it is interpreted correctly by web browsers. In this case, “UTF-8” is a widely used character encoding that supports a wide range of characters from different languages and scripts.
Some elements, such as the <img> tag for display images, the <br> tag for line breaks, and the <input> tag for form fields, have no content to wrap; these elements are self-closing and don’t require a separate closing or end tag.
Block element
Most content that you see on a website is mostly wrapped in a block. The purpose is to organize and make it easy to modify and control. In HTML, if you want to wrap some content into a block, we usually use the <div> tag.
Example:
<!DOCTYPE html>
<html>
<head>
<title> New Article </title>
</head>
<body>
<div>
<h1>Advance HTML for Designers</h1>
<p>Learning HTML to be another level of you.</p>
</div>
</body>
</html>Output
<div> elements can’t be seen until you set a value to their background color ( <div style=”background-color: blue;”>…</div>). This is related to CSS. You can try something like this and tell me in the comment below this article what you see in the output:
<!DOCTYPE html>
<html>
<head>
<title> New Article </title>
</head>
<body>
<div style="background-color: blue;">
<h1>Advance HTML for Designers</h1>
<p>Learning HTML to be another level of you.</p>
</div>
</body>
</html>Popular HTML elements
- <p>: This HTML element defines a paragraph of text. It is used everywhere on the website.
- <a>: This element is used to create hyperlinks, allowing users to click on the link and navigate to different web pages or resources.
- <img>: This element is used to embed images into a webpage. It requires a ’src’ attribute to specify the URL of the image file. I will explain more about ‘attribute’ section later on.
- <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>: These elements represent headings at different levels. The highest level is <h1>, and the lowest is <h6>.
- <ul> and <ol>: These elements are used to create unordered (bulleted) and ordered (numbered) lists. <ul> is for lists where the order of items does not matter, while <ol> is for lists where the order is significant.
- <li>: This element is used to define individual items within a list of (<ul> or <ol>).
- <table>: This element is used to create tabular data structures. It consists of rows <tr> and columns <td> or <th> table headers.
- <form>: It is used to create interactive forms on a webpage. It can contain various input elements, such as text fields, checkboxes, radio buttons, and submit buttons.
- <input>: It is used to create various types of input fields within a form, such as text fields, checkboxes, radio buttons, and more.
In HTML, you can make comments, which means that the comments will be ignored. The purpose of comments is to indicate what this element is doing. A good programmer always comments on their code. A comment look like this <! — say something — >
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Elements Example</title>
</head>
<body>
<!-- This is a div container or box or block -->
<div>
<!-- This is an h1 heading -->
<h1>Welcome to My Website</h1>
<!-- This is a paragraph -->
<p>This is a paragraph of text.</p>
<!-- This is an unordered list -->
<ul>
<!-- This is a list item -->
<li>Item 1</li>
<!-- This is another list item -->
<li>Item 2</li>
<!-- This is a nested list -->
<ul>
<!-- This is a nested list item -->
<li>Subitem 1</li>
<!-- This is another nested list item -->
<li>Subitem 2</li>
</ul>
</ul>
<!-- This is an ordered list -->
<ol>
<!-- This is a list item -->
<li>First item</li>
<!-- This is another list item -->
<li>Second item</li>
</ol>
<!-- This is an anchor link -->
<a href="https://www.example.com">Visit Example.com</a>
<!-- This is an image -->
<img src="example.jpg" alt="Example Image">
<!-- This is a form -->
<form action="submit.php" method="post">
<!-- This is a text input -->
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<!-- This is a password input -->
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<!-- This is a submit button -->
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>Output
See? It’s not that hard, right?
Everything is possible until you do it now!
You can check out more HTML elements here: https://www.w3schools.com/tags/default.asp
Attribute Value
The attribute value comes after the equality symbol and is enclosed within quotation marks. It looks like this: <element_name attribute_name=”value_here”> Content Here </element_name>
Example
<!-- This is an anchor link -->
<a href="https://www.example.com">Visit Example.com</a>This is the <a> tag or anchor link that has the attribute href = https://www.example.com, and this is also the URL of the link that the browser will redirect users to when clicked.
There are many more attributes, such as title, src, width and height, alt, style, and lang. I will explain each of these below:
- title: This attribute is used to provide additional information about an element. It is commonly used with elements like <a> (anchor links) and <img> (images) to provide tooltips that appear when the user hovers over the elements.
- src: This attribute specifies the URL of the resource to be embedded, such as an image, video, audio file, or iframe. It is used with elements like <img>, <video>, <audio>, and <iframe>.
- width and height: These two attributes specify the width and height of an image or other media element. They are used to define the dimensions of the displayed content.
- style: This attribute allows you to apply inline CSS styles to an element. It can be used to control various visual aspects such as colors, fonts, margins, padding, and more. In the next article, I will introduce you to CSS.
- lang: This attribute specifies the primary language of the content within an element. It is particularly useful for screen readers and search engines to understand the language of the text. I will try to create an article about search engines as well, if you like the topic.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title of the page -->
<title>My Web Page</title>
</head>
<body style="font-family: Arial, sans-serif; background-color: #f0f0f0; color: #333;">
<!-- Header section -->
<header>
<!-- Heading with custom color -->
<h1 style="color: #007bff;">Welcome to My Website</h1>
<!-- Navigation menu -->
<nav>
<ul>
<!-- List of navigation links -->
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Main content section -->
<main>
<!-- Home section -->
<section id="home">
<h2>Home Section</h2>
<p>This is the home section of my website.</p>
</section>
<!-- About section -->
<section id="about">
<h2>About Section</h2>
<p>This is the about section of my website.</p>
</section>
<!-- Contact section -->
<section id="contact">
<h2>Contact Section</h2>
<p>This is the contact section of my website.</p>
</section>
</main>
<!-- Footer section -->
<footer>
<!-- Footer text -->
<p>© 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>Output
If you wish to explore more attribute, please visit this link: https://www.w3schools.com/tags/ref_attributes.asp
Conclusion
These are all the important things to know in HTML, such as element tags, attributes, and the purpose of each of them. Please let me know by commenting on this article so that I can know how much you understand. I will try to create another article about CSS and JavaScript in the next article. Wish you the best. Cheer!!!
Hey 👋 , thanks for your time. I create regular content, so please follow me for more.
