Basics of Web Pages
Praveen Kumar
Software Engineer II @ JPMorgan Chase | Mentor for Python, Java, Node.js, Microservices | Interview Coach | Guiding Professionals on the Latest Tech Trends
HTML, defines the content of every web page on the internet. By "marking up" our raw content with HTML tags, we are able to tell web browsers how we want our different parts of our content to be displayed. Creating a HTML document with properly marked up element is the first step in developing a web page as shown below
Now we are going to build our first web page. It will look like crap because it won't have any CSS attached to it, it will serve as a thorough introduction to HTML elements with which web developers work on daily basis.
Setup for the first Project [Basic Web Page]
Let's get started by creating a new project with V S code as basic-web-pages.
Then we will make a file called basics.html inside the project folder.
This basics.html file represents a single web page, and it is the place where we will put all our code for the web page.
<!DOCTYPE html>
<html>
<head>
<!--Meta data goes here-->
</head>
<body>
<!-- Content goes here-->
</body>
</html>
First we need to tell browsers that this is an HTML5 web page with the <!DOCTYPE html> line.
This is just a special string that browsers looks for when they try to display our web page, and it always need to look exactly like it does above.
Then, our entire web page needs to be wrapped in <html> tags.
The actual <html> text is called an "opening tag", while </html> is called a "closing tag".
Everything inside of these tags are considered part of the <html> element, which is this internal thing are those things which are created when a web browser parses our HTML tags as shown in below picture
Inside of <html> element we have to add two more elements
A web page's head contains all of its metadata, like the page title, any CSS stylesheet, and other things that are required to render the page but we don't want the user's to see it.
The bulk of HTML markup will live in the <body> element, which represents the visible content of the page.
Note: opening up our page in a web browser won't display anything since it has an empty body as below
We are going to understand the purpose of <body> and <head> in some times
We should also notice the HTML comment syntax in the above snippet. Anything that starts with
<-- and ends with --> will be comletely ignored by the browser.
This commenting is very useful for documenting our code and making notes for ourself.
Page Titles
title is one of the most important piece of meta data of our web page.
title is defined by the element named <title> .
Browsers displays this title in the tab of our page , and Google displays it in search engine results.
Now we will try to update our basics.html file's <head> by the below code
<!DOCTYPE html>
<html>
<head>
<!--Meta data goes here-->
<title>First Webpage</title>
</head>
<body>
<!-- Content goes here-->
</body>
</html>
When we are going to reload the page in the browser, we will still see an empty page only, but we will see First Webpage in the browser tab as shown below:
Notice how all the html tags in our web page are neatly nested.
It's very important to ensure that there are no overlapping elements. For instance suppose that the <title> element is supposed to be inside of the <head> element, so we would never want to add the closing </head> tag before the closing </title> tag.
<!-- Don't ever do this -->
<head>
<title> First Page </head>
</title>
How to add paragraphs in a web page?
Paragraphs
Titles are all well and good, but let's do something we can see actually on the web page.
The <p> element marks all the texts inside it as a distinct paragraph.
Now lets try adding a simple paragraph in our basics.html file
<!DOCTYPE html>
<html>
<head>
<!--Meta data goes here-->
<title>First Webpage</title>
</head>
<body>
<!-- Content goes here-->
<p>Hi this class is meant for learning HTML, CSS, JS, React, Node.js,
Express.js and web deployment.</p>
</body>
</html>
After including the paragraph in our bascis.html file we will now able to see some content on the page . Reminding here since this is content we want this to be displayed so it needs to go in the <body> element not in <head> as shown above.
Note : For best practice Indenting the nested elements like in above code is an important practice that makes our HTML easier to read for other developers.
Note: It's up to you or your development team to decide if you want to use spaces or tab characters for indents.
We can set this indents easily from our V S code editor.
How to write headings in a web page?
HEADINGS
Headings are like titles, but they are actually displayed on the page.
HTML provides six levels of headings, and the corresponding elements are
1. <h1>.. </h1>
2. <h2> .. </h2>
3. <h3> .. </h3>
4. <h4> .. </h4>
5. <h5> .. </h5>
6. <h6> .. </h6>
The first heading on a web page should typically be an <h1>, so let's insert one heading in our basics.html file above the <p> element.
It's very common for the first <h1> element to match the <title> of the document as we are doing
ie.
<!DOCTYPE html>
<html>
<head>
<!--Meta data goes here-->
<title>First Webpage</title>
</head>
<body>
<!-- Content goes here-->
<h1>First Webpage</h1>
<p>Hi this class is meant for learning HTML, CSS, JS, React, Node.js,
Express.js and web deployment.</p>
</body>
</html>
By default, browsers render less important headings in smaller fonts. For example
<!DOCTYPE html>
<html>
<head>
<!--Meta data goes here-->
<title>First Webpage</title>
</head>
<body>
<!-- Content goes here-->
<h1>First Webpage</h1>
<p>Hi this class is meant for learning HTML, CSS, JS, React, Node.js,
Express.js and web deployment.</p>
<h2>HTML</h2>
<p>HTML is a MarkUp language. It provides the structure of a web page. It is also the starting point of developing a webpage.</p>
<h3>tags</h3>
<p>Tags are the building blocks of a HTML page without tags HTML cannot be written.</p>
</body>
</html>
Headings are the primary way in which we mark up different sections of our content.
They define the outline of our web page as both humans and search engine see it, which makes selecting relevant headings essential for a high quality web page.
UNORDERED LISTS
Whenever we surround a piece of text with HTML tags, we are adding new meaning to that particular text. Wrapping content in <ul> tag tells a browser that whatever is inside should be rendered as an "unordered list".
To denote individual items in that list, we wrap them In <li> tags as shown below
<!DOCTYPE html>
<html>
<head>
<!--Meta data goes here-->
<title>First Webpage</title>
</head>
<body>
<!-- Content goes here-->
<h1>First Webpage</h1>
<p>Hi this class is meant for learning
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>Bootstrap</li>
<li>React</li>
<li>NOde.js</li>
<li>Express.js</li>
<li>Deployment of a website</li>
</ul>
</p>
<h2>HTML</h2>
<p>HTML is a MarkUp language. It provides the structure of a web page. It is also the starting point of developing a webpage.</p>
<h3>tags</h3>
<p>Tags are the building blocks of a HTML page without tags HTML cannot be written.</p>
</body>
</html>
After adding this markup to the <body> element we will see bulleted list with a dedicated bullet for each <li> element as shown below
The HTML specification defines strict rules about what elements can go inside other elements.
In case of <ul> elements should only contain <li> elements. Which means we should never write something as below
<!-- this is bad practice -->
<ul>
<p>Add a paragraph</p>
</ul>
Instead of above we should wrap that paragraph with <li> tags:
领英推荐
<!-- do this instead -->
<ul>
<li> <p>Add a paragraph </p></li>
</ul>
How do we know that <ul> only accepts <li> elements and that <li> allows nested paragraphs?
Because documentation(MDN) says. Mozilla Developer Network is superb HTML element reference.
ORDERED LIST
With an unordered list, rearranging the?<li>?elements shouldn’t change the meaning of the list. If the sequence of list items does matter, we should use an “ordered list” instead.
To create an ordered list, simply we need to change the parent?<ul>?element to?<ol>.
Now we will append the following content to the?Lists?section of?basics.html:
<!DOCTYPE html>
<html>
<head>
<!--Meta data goes here-->
<title>First Webpage</title>
</head>
<body>
<!-- Content goes here-->
<h1>First Webpage</h1>
<p>Hi this class is meant for learning
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>Bootstrap</li>
<li>React</li>
<li>NOde.js</li>
<li>Express.js</li>
<li>Deployment of a website</li>
</ul>
</p>
<h2>HTML</h2>
<p>HTML is a MarkUp language. It provides the structure of a web page. It is also the starting point of developing a webpage.</p>
<h3>tags</h3>
<p>Tags are the building blocks of a HTML page without tags HTML cannot be written.</p>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>Bootstrap</li>
<li>React</li>
<li>NOde.js</li>
<li>Express.js</li>
<li>Deployment of a website</li>
</ol>
</body>
</html>
The difference between an unordered list and an ordered list might seem silly, but it really does have significance to web browsers, search engines, and, of course, human readers. It’s also easier than manually numbering each list item.
Step-by-step procedures like recipes, instructions, and even tables of contents are good candidates for ordered lists, while?<ul>?lists are better for representing item inventories, product features, pro/con comparisons, and navigational menus.
Emphasis (Italic ) Elements
So far, we’ve only been working with “block-level elements” (also called “flow content”). The other major type of content is “inline elements” or “phrasing content”, which are treated a little bit differently. Block-level elements are always drawn on a new line, while inline elements can affect sections of text anywhere within a line.
For instance,?<p>?is a block-level element, while?<em>?is an inline element that affects a span of text?inside?of a paragraph. It stands for “emphasis”, and it’s typically displayed as italicized text. Try adding a new section demonstrating emphasized text to our example web page:
The part wrapped in?<em>?tags should render as italics, as shown below. Notice how only part of a line has been affected, which is characteristic of inline elements.
Just in case it hasn’t sunk in yet, it’s?really?important that you properly nest your HTML elements. It’s easier to mess up the order of tags when you’re using multiple inline elements, so make sure to double-check that your markup never looks like this:
STRONG(BOLD) ELEMENTS
suppose we want to more emphatic than an <em> tag, we can use <strong>...</strong> tag.
IT is an inline element just like <em>, it can be used as shown below
<p>Sometime it very important to <strong>become strong enough</strong> to learn Fullstack
development. </p>
The above line of code should render the text wrapped in <strong> tag in bold text as shown below:
To draw even more attention towards our span of text, we can nest a <strong> element in an <em> element( or vice versa). This will result in a text which is both strong and emphasized.
<p> In FullStack Development <strong><em>HTML,CSS & JavaScript</em></strong> is important
in FronteEnd part. At the same time <em><strong>A programming language</strong></em> is very
important for the Backend part.</p>
The above line of code produces the below result
STRUCTURE VS PRESENTATION
You might be wondering why we are using terms "emphasis" and "strong" instead of "italic" and "bold".
This brings us to an important distinction between HTML and CSS.
HTML markup should provide semantic information about our content, not presentation information.
In other word we can say that HTML should define the structure of our document, leaving its appearance to CSS.
Due to this tags like <b> ( bold ) and <i> (italic) elements are replaced with <strong> and <em> respectively in HTML5.
Actually HTML5 attempted to create a clear separation between a document's structure and its presentation.
EMPTY HTML ELEMENTS
Till now the HTML tag's we have encountered, either wraps text content(eg <p>) or other HMTL elements(eg <ol>). That's not the case for all HTML elements. Some of them can be "empty" or "self-closing" as well like.
Line break <br>
horizontal rules <hr>
Those are commonly used empty html elements.
Line Break:
HTML condenses consecutive spaces, tabs, or newlines(together known as "whitespace") into a single space. To see what exactly we are taking about, lets add the below written code in our basics.html file
<h2>Empty Elements</h2>
<p>Thank's for joining my FullStack course . </p>
<p>Regards,
Praveen</p>
The new line after Regards, in the above snippet will be transformed into a single space instead of displaying as a line break.
To tell the browser that we want a line break, we need to use an explicit <br/> element like shown below
<h2>Empty Elements</h2>
<p>Thank's for joining my FullStack course . </p>
<p>Regards, <br/>
Praveen</p>
WE can use the <br/> tag to change line but we should be very careful and should not abuse the <br/> tag.
Each tag we use should convey a meaning- we should not use it to say add a bunch of space between the paragraphs.
<!-- we will be shunned for this -->
<p> This is the first paragraph</p>
<br/><br/><br/><br/><br/><br/>
<p>So, this is second paragraph</p>
The above line will produce ouput
NOte: This kind of presentational information should be defined in our CSS instead of our HTML file.
HORIZONTAL RULES
The <hr/> element is a "horizontal rule", which represents a thematic break.
Some of the major examples of horizontal rule are:
<h2> Empty Elements - horizontal rule </h2>
<p> YOu guys are here to get knowledge about the horizontal rule.</p>
<p>Regards,<br/>
EngineeringCoders</p>
<hr/>
<p> Please, be informed that we are going to complete the first module of our HTML session.</p>
The above like of code is going to create a horizontal rule between the paragraphs as shown below
Note: Another way to think about the </hr> element is that it carries less significance than the
separation created by a new heading element, but more significance than a new paragraph.
OPTIONAL Trailing Slash
The trailing slash(/) in all empty HTML elements is entirely optional.
Till now in of our codes could also be marked up like below :
<h2> Empty Elements - horizontal rule </h2>
<p> YOu guys are here to get knowledge about the horizontal rule.</p>
<p>Regards,<br>
EngineeringCoders</p>
<hr>
<p> Please, be informed that we are going to complete the first module of our HTML session.</p>
It doesn't really make a difference which convention we choose, but we should pick one and stick to it for the sake of consistency.
Sumary
The tags/elements we have learned till now as a part of simple web design