Types Of Elements

Structural Elements

HTML structural elements are used once per page and include the <html>, <head>, and <body> elements. Written on a page this would look like:

        
<html>
    <head>
    </head>
    <body>
    </body>
</html>


    

Block Elements

Block elements create a space below them when used. Examples of these are <p> or <h1>.

Code

<h1>This is a header</h1><p>This is a paragraph</p><h2>Though not the best layout</h2><p>This can demonstrate their blockiness</p>

Result

This is a header

This is a paragraph

Though not the best layout

This can demonstrate their blockiness

Inline Elements

Inline elements do not create a line break below them. An example of this is <em> which will put emphasis on the content but not create a line break, making it useful inside a paragraph without splitting up the flow of the text.

Code

<p>
    This sentence has a word in
        <i>italics<i>
    .
</p>
<p>
    There is a 
        <strong>bold</strong>
    word in this sentence.
</p>

Result

This sentence has a word in italics.

There is a bold word in this sentence.

Neutral Elements

Neutral elements Do not mean anything by themselves but identify structural areas of the page allowing for a clearer layout or to style containers of elements such as <div></div> or <span></span>.

The Head Element

The <head> element is the first child of the HTML element and its purpose is to structure and enhance a page in a way that is not directly displayed to users. It provides essential information for browsers and external services to properly interpret, style, and optimise the webpage. A common element to see here is the <meta> element (it has no closing tag), which can take have multiple attributes that to achieve different desired effects.

Attribute	Description
`<meta charset="utf-8">`	The charset attribute specifies the character encoding for the website. A typical value is utf-8, the Universal Character Set which can represent characters from most languages, symbols, and emojis. Other value options are available if UTF-8 does not meet your needs and can be seen here.
`<meta name="" content="">`	The name attribute is used to specify the type or category of the meta information contained in the element. It helps browsers, search engines, and other tools understand the kind of data that the meta tag is providing. The following content attribute defines the data for the name attribute.
`<meta name="viewport" content="width=device-width, initial-scale=1">`	The viewport meta attribute is essential for making responsive websites that change size depending on what device you are seeing them on, it sets the viewport (what the user can see) to the size of the device and loading is a scale of 1 (no zoom).
`<meta name="keywords" content="Web Development, Full Stack Development, HTML">`	The keywords meta attribute provides search engines with a list of keywords relevant to the page's content listed in the content attribute. It assists in the SEO process by giving search engines more context about the content of the page, though search engines now rely more on actual content rather than this meta tag alone.
`<meta name="description" content="A website about HTML">`	The description meta attribute provides a brief description of the webpage's content in the content attribute, which is often shown in search engine results beneath the page title.
`<meta name="author" content="A M Fairley">`	The author meta attribute identifies the author of the webpage, which is nice in portfolio websites.

There is also the <title></title> element where you can, well, title your page. This will appear at the top of the browser in the browser tab for your website. Also added in the head element are links to style sheets for your webpage, JavaScript files, links to external libraries, and other meta data that will be discussed later when we cover these sections.

<title>WebDevGrad</title>

The Body Element

The <body></body> element in an HTML document contains all the content that is visible to users, such as text, images, videos, links, and interactive elements. It is the main section of a webpage, where browsers render the content according to the structure defined by HTML elements.

Its purpose is to display the core content of the page, ensuring that users can read, interact with, and navigate the website. Everything inside the <body></body> is what appears on the screen, while other elements like <head></head> provide metadata and resources to support the page's functionality.

Web_Dev_Grad

Introducing Elements