Introduction
HTML tags are used to define structural and semantic information about the content of a web page. The most important thing to recognize is that they should be appropriately closed at the end of each tag.
In the blog HTML tag definition part 2, we discover another list of HTML tags in the previous article: “HTML Tags List With Examples.”
Getting ready for HTML
HTML is the language that web browsers understand. HTML is the programmer’s dialogue with the browser.
The first thing to do to tell the browser that we will code in HTML is to start with the document type declaration.We start coding in HTML with the flowing declaration:
<!DOCTYPE html>!DOCTYPE html is the first instruction for your browser. And in this instruction, we are using the fifth version of HTML, HTML5. The programmer saves his HTML code on the desktop in a file with a .htm extension.
Html Tags definition
Html Tags definition: <html> tag
The programmer starts coding HTML when he mentions the first piece of code <!DOCTYPE html>. then he mentions the second piece: <html></html>. As you see, the declaration is about opening and closing <html>.
Html Tags definition: HTML Header
One of the first codes in webpage programming. It is not displayed on the browser screen but is used to create a title for the web page and provide information about the document.
The HTML head tag is part of the HTML tag.
<head> and Page Titles
Metadata helps search engines index your site and rank it higher in search results pages. It also helps discover your website’s content when people look for related information on Google or other search engines.
A browser’s tab shows the title in the <title> tag. Be aware that the <title> tag is inside the <head>.The following code lets the browser display HTML For Beginners.
<!DOCTYPE html><html><head><title>HTML For Beginners</title></head></html>
Hyperlink Linking to another Webpage
Hyperlinks allow readers to navigate the Web and find valuable information quickly.A hyperlink is a word or phrase highlighted in blue and underlined.
When the reader clicks on it, they are taken to another webpage. They can also be found at the bottom of a document, often with a title such as “Learn more.”
The href attribute is an HTML attribute that specifies a link’s location. The value of the href attribute is the absolute URL. It must be outside the current page. The directions supplied to the href attribute are usually URLs like the following.
Open a Link in a New Window
In certain situations, it can be more convenient to open a new window for a link. This way, the user can leave the current page and return to it when they want to continue reading.
There are two ways of opening links in a new window:
1) using the target attribute in HTML code2) specifying “target=_blank” in the URL
Linking the current page to a Relative Page
Turn text into a link.
When you write a new article, it is essential to link to other pages on your website. This will create a sense of continuity and help readers navigate your content.
The best way to link to a page on your site is by using the URL of the page you want to link to. However, if you want the reader to be able to click the link without having them copy and paste it, you can use an anchor text for that URL.
All HTML files are stored in the same folder. The files can have the following names.
- index.html
- contact.html
- about.html
In this case, you can link all HTML pages employing a relative path.
Linking page parts
Links are very important in web pages. They help readers navigate the website or jump to a specific part of the content.There are three types of links:
- 1– Internal links
- 2– External links
- 3– Linking HTML page parts
Turn an image into a link.
A link can be created by turning an image into a hyperlink.
The process is simple and can be done by clicking on the image.
HTML code and spaces of indentation
The W3C suggests two spaces of indentation when composing HTML code.
This helps the browser understand the structure of the HTML document. It also helps in debugging errors in HTML code.
Add comments to HTML code.
Comments are important for both humans and machines. They provide context and help with understanding the code.
It is easy to get lost in a sea of lines of code, but if you add a comment, you can understand what it does at a glance.
Comments also make it easier for others to understand your code if they need to take over from you or if they want to check up on what you have done.
Comments can also be used as reminders for yourself about how the code works or about what needs fixing next time round when working on an update.
Html Tags definition: The Summary sequence
The code of the program
<!DOCTYPE html><html><title>HTML Tags List With Simple examples</title></title><head></head><body><!–This is a comment that the browser will not show–><h1>Tags List With Examples</h1><nav><a href=”./index.html”>Summary sequence</a><br><br><a href=”./aboutblog.html”>about the blog</a></nav><h2> HTML is composed of elements</h2><p> HTML is used to create web pages that humans and machines can read. HTML <em>provides</em> the basic structure for all <strong>web pages </strong>and can also provide formatting, style, and other features.</p><p> The most important part of HTML is the element. An element is a building block for a webpage, and it can be as simple as a paragraph or a link or as complex as an entire table. Elements are composed of tags that have different attributes.</p><div><h2> Text element</h2><span>The body element is also called the main container for a webpage. It contains all of the content for a webpage and can be styled with CSS.<ul><li> <a href=”#link1″>Title display </a> </li><li> <a href=”#link2″>Paragraph display </a></li><li> <a href=”#link3″>Text display </a></li><li> <a href=”#link4″>Single highlighted display</a> </li></ul></span></div><div id=”media”><h2> Media elements</h2><ul><li> Image </li><li>Video </li></div><div><image src=”https://mleekhsl1ixx.i.optimole.com/w:810/h:455/q:mauto/https://full-skills.com/wp-content/uploads/2022/11/Introduction-To-HTML5.png”></image></div><div> <a href=” https://full-skills.com/programming-career/front-end-developer-resume/”>front-end developer resume </a></div><div><br><br><video src=”https://full-skills.com/wp-content/uploads/2022/11/cats.mp4″ width=”320″ height=”240″ controls></video></div></body></html>
The output of the program
