HTML basics knowledge involving website structure understanding remains a crucial skill in current times. HTML (HyperText Markup Language) establishes the core design structure of every website since it represents the foundation of the web.
This piece delivers detailed HTML basics information which uses current examples alongside simple explanations.
Just a Introduction to HTML
HTML provides developers with the capability to create web pages that contain structure guidelines. All web page elements in HTML exist as tags which include the paragraph <p> tag alongside the anchor <a> tag.
Web pages combine HTML to allow CSS and JavaScript execution while designing websites. People who aspire to develop websites should begin their journey by mastering HTML.
HTML Documents
Every HTML page starts with a document structure. An HTML document in its basic form appears as follows:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is a simple HTML document.</p>
</body>
</html>This code sets up the basic components of an HTML file, including the head and body sections.
When you coded this, the output will be display like this below:
It is all about your wish, if you want to test your code, you can use this tool online here.
The <!DOCTYPE> Declaration
The <!DOCTYPE html> declaration defines the document as an HTML5 document. Placing the HTML directive at the document’s beginning turns out to be essential for browsers to display pages without issues.
So write like this:
HTML Structure and Text Formatting
HTML pages adopt a structure that depends on various elements which nest properly. Most HTML elements include readable text which developers format to add emphasis to the content.
HTML Headings
HTML contains six ranking headings that start with the main level <h1> and end at the least important <h6>:
<h1>Main Title</h1>
<h2>Subheading</h2>
<h3>Section Heading</h3>Note*
Keep in mind, most commonly we are opting for things such as h1, h2 and h3.
HTML Paragraphs
Every paragraph structure within HTML uses the <p> tag. The built-in browser feature adds spaces both above and below each paragraph automatically.
The text paragraph exists within the following element block like this below:
<p>This is a paragraph of text.</p>Html Text Formatting (Bold, Italic, Etc.)
Developers benefit from different formatting elements present in HTML according to the following usage rules:
<strong>Bold text</strong>
<em>Italic text</em>
<mark>Highlighted text</mark>
<small>Smaller text</small>HTML Comments
The purpose of comments in programming becomes clear to developers without appearing in browser displays.
<!-- This is a comment -->Note*
Html comments are oftenly using the developing side. So this quickly find the codes, when editing
HTML Links and Media
HTML Links
HTML links serve as a connection between web pages or files through their relation. Website links are created through the <a> tag.
<a href="https://www.example.com">Visit Example</a>HTML Images
Images require the <img> tag to embed them into documents together with an alt description for screen readers and SEO benefits.
<img src="image.jpg" alt="A description of the image">Images understand the alt attribute because it supplies descriptive text for both screen reader users and search engine optimisation needs.
Note*
Alt description is the most important for SEO, So keep following this to write, when you go for an image.
HTML Audio and Video
HTML5 allows embedding media content:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
The current browser lacks partial media element support.
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
The current web browser lacks support for displaying video content.
</video>How to View HTML Source
The proper understanding of viewing HTML code during action plays crucial roles for students and programmers who need to fix errors.
View HTML Source Code:
Click right on any webpage to open “View Page Source” or use the keyboard shortcut of Ctrl+U for Windows users together with Cmd+Option+U for Mac users. Right-clicking any webpage can display the fundamental HTML code through which the page was designed.
Inspect an HTML Element:
Web developer tools provide access to examine single page elements. Users can right-click an item or press F12 to access developer tools for viewing its HTML alongside styling information. This necessary tool enables both debugging operations and website functionality understanding.
