HTML block vs inline elements

HTML elements are classified into two types: block-level elements and inline elements.

Block-level elements are those that create a block-level box in the document flow, which means that they take up the full width of their parent container and create a new line after the element. Some examples of block-level elements are <div>, <p>, <h1> to <h6>, <ul>, <ol>, <table>, and <form>.

On the other hand, inline elements are those that create an inline-level box in the document flow, which means that they occupy only the space that their content requires and do not create a new line after the element. Inline elements are typically used within block-level elements to add emphasis or to link to other resources. Examples of inline elements are <a>, <span>, <strong>, <em>, <img>, and <input>.

It is important to note that some elements, such as <li>, <dt>, and <dd>, behave as block-level elements in some contexts and as inline elements in others.

Understanding the difference between block-level and inline elements is crucial when it comes to formatting and styling HTML documents. Block-level elements are often used to create the structure and layout of a page, while inline elements are used to apply emphasis or to add links or images to the content.

HTML headings and paragraphs

HTML provides a set of heading and paragraph elements that can be used to structure and organize content on a web page.

Headings are used to create hierarchical sections on a page, with the <h1> element being the highest level and the <h6> element being the lowest level. The larger the number in the heading element, the lower the importance of the heading. For example, an <h1> element would typically be used for the main heading of a page, while an <h2> element would be used for subheadings, and so on.

Paragraphs are used to create blocks of text on a page, and are represented by the <p> element. It is a good practice to use paragraphs to separate blocks of related text to make it easier for users to read and understand the content.

By using appropriate heading and paragraph elements, you can create a well-structured and readable web page.

HTML lists and tables

HTML provides two types of elements for displaying data in a structured format: lists and tables.

• Lists

HTML provides three types of lists: unordered lists (<ul>), ordered lists (<ol>), and definition lists (<dl>).

Unordered lists are used to display items in a bulleted format. Each item is represented by an <li> element

Ordered lists are used to display items in a numbered format. Each item is represented by an <li> element.

Definition lists are used to display items with a definition or explanation. Each item is represented by a pair of <dt> (definition term) and <dd> (definition description) elements.

• Tables

HTML tables are used to display data in a tabular format. Tables consist of rows (<tr>) and cells (<td>), with optional header cells (<th>). The table is defined by the <table> element, and can also include a caption (<caption>), column headings (<thead>), and footnotes (<tfoot>).

Tables can be used to display a wide variety of data, including financial data, product listings, and schedules. By using appropriate headings, captions, and formatting, you can create a well-organized and easy-to-read table.

HTML links and images

HTML links and images are important components of web pages that allow users to navigate to other pages or view visual content.

• Links

HTML links are created using the <a> (anchor) element and the href attribute, which specifies the URL of the page to which the link leads. The text that the user clicks on to follow the link is placed between the opening and closing <a> tags.

Links can also be used to navigate to specific sections within a page using the id attribute and the # character in the href attribute.

Links can also be styled using CSS to change their appearance and provide visual cues to the user.

• Images

HTML images are created using the <img> (image) element and the src attribute, which specifies the URL of the image file. The alt attribute provides alternative text that is displayed if the image cannot be loaded or if the user is using a screen reader.

Images can also be styled using CSS to change their size, position, and other properties.

Both links and images can be used to enhance the visual and functional aspects of web pages, and their effective use is important for creating engaging and user-friendly websites.