As HTML is the soul of the web, we must know how it works (we will focus on writing HTML).
Even though the HTML has different versions in his family, we only speak in the updated version, which is HTML5. So let's start wondering about HTML5.
So this is the basic HTML page structure:
<!DOCTYPE html>
<html>
<head>
<title>Title of the Page</title>
</head>
<body>
<h1>A Heading</h1>
<p>A paragraph.</p>
</body>
</html>
There you go with your first HTML code.
But wait a minute 😗, what is that? I got the 'Title of the Page', 'A Heading', and 'A Paragraph', but what are those in <..>..</..>?
Right these are HTML tags. Let me break it down.
First,
<!DOCTYPE html>
is telling the browser, "Hey, look, I am an HTML5 document. So don't try to read me like other versions of my family, Just read me like me (HTML5)".
So, the browser hears the soul and reads the rest.
Then,
<html></html>
This tag is the root element of the HTML page. So whatever you are seeing right now is in between this tag.
Next, we have,
<head></head>
Which tells the browser some useful information about your website/page that you and I don't see so often. In between, we declare the title, description, keywords that appear in the search result. It also holds the CSS and JavaScript contents, character set declarations, and more. Which we will be discussing later on. let's move on to the
<title></title>
tag. Oh, man! Shouldn't you give your page a name? And if you are saving the page to the bookmark, what is the name your browser should remember(save)/reference it? So this is how the web knows the name of your web or HTML page. Like
Oh, that's a lot we don't see, do we?
Now, time to discover what viewers are seeing on the website.
<body></body>
This tag tells the browser, "Browser, listen, I've given you a lot of information that viewers can't see. Now whatever declared in between me, show that to the viewers."
Let's declare some,
<h1>A Heading</h1>
<p>A paragraph.</p>
Which gives us,
With <h1></h1> you the browser give me a big size of heading.
And with <p></p> you just declared a simple text.
Note, Html doesn't care about extra spaces. Extra spaces will be removed automatically by the browser.
With everything we just discussed, the web page looks like,
To know even more, visit: MDN Doc
Subscribe to LinkedIn News Letter
To see everything in one place, Check and install this web app: Web App
Top comments (0)