4.15. Introduction to HTML: Basic Structure, Tags and Attributes: Semantic HTML

Introduction to HTML: basic structure, tags and attributes

HTML, or HyperText Markup Language, is the standard markup language for documents designed to be displayed in a web browser. It is one of the fundamental pillars of the web and is used to structure the content of web pages.

The basic structure of an HTML document begins with declaring the document type, which is . This is followed by the HTML tag, which surrounds the entire content of the page. Within the HTML tag, we have two main parts: the head and the body.

The head tag contains meta information about the document, such as its title, links to scripts and styles, and other things that are not rendered in the browser window. The body tag contains the main content that is displayed to users in the browser window.

    
    
    
        
    
    
        
This is a Heading
        
This is a paragraph.
        
This is another paragraph.
    
    
    

In the example above, we have a basic structure of an HTML document. The title tag defines the title of the page, which is displayed in the browser's title bar or page tab. The h1 tag defines a level 1 heading, and the p tags define paragraphs.

Tags and Attributes

HTML tags are the building blocks of HTML pages. An HTML tag is a keyword surrounded by angle brackets (< and >). Most HTML tags come in pairs: the opening tag and the closing tag. The closing tag is the same as the opening tag, but with a forward slash (/) before the keyword.

HTML attributes provide additional information about elements. They are always specified at the beginning of the tag and come in name/value pairs. For example, the img tag for inserting images has attributes such as src (to specify the URL of the image), alt (to specify the alternative text for the image), width and height (to specify the width and height of the image).< /p>

Semantic HTML

Semantic HTML is the practice of using correct HTML syntax to reinforce the meaning of content on a web page, rather than just for presentation. Semantic HTML uses HTML tags to precisely describe your content. For example, the <b> is used for bold, while the <strong> is used for importance.

Semantic tags not only help developers understand the content and structure of a page, but are also useful for search engines and assistive technologies such as screen readers. For example, using the <header> for a page header, the <nav> for navigation, the <main> for main content, the <article> for a stand-alone article, the <section> for a section of a page, the <aside> for side content and the <footer> to the footer.

In summary, learning the basic structure of an HTML document, understanding how to use tags and attributes, and applying semantic HTML are fundamental steps to becoming an effective front-end developer.

Next page of the Free Ebook:

20Introduction to HTML: basic structure, tags and attributes: Introduction to CSS

4 minutes