What is HTML
HTML is the backbone of web development. It stands for HyperText Markup Language and it helps set the structure of the content in our web pages.
If you want to, watch the video instead!
What does it actually mean??
- HyperText: means the links that you include on your web page.
- Markup: the special element tags that identify the content in them; we'll see more in the next section.
Without it, browsers wouldn't know the actual structure of your web page or how to display elements like texts, audio or images. The file extension is .html, ex: index.html.
Elements Structure
Before we learn what type of tags we have at our disposal, we need to learn the structure a common HTML document file will have.
Elements have both opening and closing tags that identify the content of said element. Let's make a heading, the tag to identify said element is h1.
Let's say if we wanted to add a paragraph and a header, we can do it like:
<h1> This is the heading </h1>
<p> This is a looooooooooong paragraph. Not really, but we can pretend. </p>
Attributes and Id's
Elements can also have attributes, they're ways of adding extra information to the elements, they won't show in the content of the page and are made of attribute name followed by the attribute value.
Let's add a class attribute to our h1 heading from the previous example:
<h1 class="first-heading"> This is the heading </h1>
<p> This is a looooooooooong paragraph. Not really, but we can pretend. </p>
The attribute name is class, and the attribute value is first-heading.
Why would i ever need attributes?
They can help you target elements for styling or with JavaScript to add functionality. You can repeat classes since it's not necessary that they're unique. But that's not the case with id's.
Elements can also have id's, with the important distinction that they need to be unique not like the class attributes. Like classes, they help you target specific elements for styling or adding behavior.
<h1 class="heading"> This is the heading element </h1>
<h2 class="heading"> This is another heading element with the same class as the h1 </h2>
<p id="first-paragraph"> This is a paragraph element with an unique id. </p>
<p id="second-paragraph"> This is another paragraph element with an unique id </p>
HTML Document File Structure
HTML can be considered to be the skeleton of the web page; this would let us assume that the elements, -or bones- by themselves won't mean much; that's why we need a file structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Example Page</title>
</head>
<body>
<div class="content">
<h1>This is an example HTML5 example page</h1>
</div>
</body>
</html>
- We start the file with <!DOCTYPE html>: It tells the browser what type of document to expect; in this case it is an HTML document.
html lang="en" : Its the language attribute and it tells the browser the default language. In this case english -eng.
The tag: Is a container element for metadata elements, as in the data of the document. It contains the title, script, the style sheet location, and meta tags.
- meta charset means the page will understand the universal compilation of characters UTF-8(8-bit Unicode Transformation Format). It includes almost every language.
- meta http-equiv="X-UA-Compatible" content="IE=edge" : Helps support old legacy browsers.
- meta name="viewport": The viewport meta-tag tells the browser how to control the viewport, which is the way its presented on screens. The width=device-width is the width of the page according to the device, and initial-scale=1.0 part sets the initial zoom to the page when it is loaded by the browser.
The title tag : Here you set the title that will be visible on the browser tab.
The body tag: Defines the body of the page as in the content of the web page. Including headings, paragraphs, images, tables, lists, and other tags we'll see in the next section.
Remember to always use the closing tags!
Element Tags
Now that we're more familiar with the common structure of an HTML file, we can see some of the basic element tags that ultimately make up web pages.
HTML is built on elements with both opening and closing tags that give the elements certain attributes that influence the way they appear. Check my article on semantic HTML and good practices to see more tags and to know where and when to apply them.
- Headings They go from h1 to h6, becoming smaller.
<body>
<h1>I am a header!</h1>
<h2>Wohoo! I am a header!</h2>
<h3>Me too! I am a header!</h3>
<h4>I am a header too!</h4>
<h5>I am a header woo</h5>
<h6>I am the last header!</h6>
</body>
This will result in:
- a tags: Means anchor tag, for hyperlinks, could be inside the same document or link to out sources. It must have the href attribute.
<a href="https://yuricodesbot.hashnode.dev/">My blog page!</a>
- p tags: Is for pharagraphs, which pages often have multiple.
<p>This is a single paragraph</p>
- img tags: Contains the image source to the image file, as in where in our directory the file can find that image we want, and alternate text or "alt" that will help screen readers know what that element is and what it contains.
<img src="images/hashnode-icon.png" alt="Hashnode logo image"/>
- lists : We have two types, ordered list -with numbers- and unordered list -with bullet points- :
<h1>This is an Ordered list</h1>
<ol>
<li>This is an</li>
<li>Ordered List</li>
</ol>
<h2>This is an Unordered List</h2>
<ul>
<li>This is an</li>
<li>Unordered List</li>
</ul>
</body>
So what would a basic HTML page look like??
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>HTML5 Article</title>
</head>
<body>
<header>
<nav>
<a href="index.html"> Home </a>
<a href="about.html"> About </a>
<a href="doge.html"> Doge stuff </a>
</nav>
</header>
<section class="main-content">
<img
src="https://i.pinimg.com/564x/13/73/ac/1373acc716eb02ff0df75655b19aa01b.jpg"
alt="Doge picture"
/>
<p>
Doge is a slang term for "dog" that is primarily associated with
pictures of Shiba Inus (nicknamed "Shibe") and internal monologue
captions on Tumblr. These photos may be photoshopped to change the dog's
face or captioned with interior monologues in Comic Sans font. Starting
in 2017, Ironic Doge formats gained prevalence over the original
wholesome version.
</p>
</section>
<section class="list-section">
<h1>This is an Ordered list</h1>
<ol>
<li>This is an</li>
<li>Ordered List</li>
</ol>
<h2>This is an Unordered List</h2>
<ul>
<li>This is an</li>
<li>Unordered List</li>
</ul>
</section>
<hr />
<footer>
<p>This is an eggcelent eggxample</p>
</footer>
</body>
</html>
What can you do once you learn HTML???
You might think that HTML only pages look a bit off, but that doesn't mean they're not an efficient way of displaying content and even making a portfolio. Look at some portfolio examples by some of the brightest minds in computer sci and authors:
Why over-engineer when HTML can get the job done, right?!
Now my friend, with this knowledge go and Hack Nasa!! I believe in you! :]
Thank you so much for reading!! :)!!
Also a big thanks to Shawn for requesting this article, i hope you found it useful.
☕If you enjoy my content Buy me a coffee It'll help me continue making quality blogs💕
💙Follow me on Twitter to know more about my self-taught journey!
💜Web Design for Beginners Series
❤️ Also subscribe to my Youtube Channel !
🖤And for more content and tips on TikTok !