HTML (HyperText Markup Language) is a standard markup language for creating web pages. HTML defines the structure and content of a page using various tags.
Basic HTML Tags
An HTML document consists of elements, which are the basic building blocks of a web page. Elements are described using HTML tags, which are keywords enclosed in angle brackets . Here are some common tags used in HTML:
1. <html> - defines the beginning and end of an HTML document.
2. <head> - contains information about the document that is not displayed on the page. Content placed within the <head> tag includes the page title, external stylesheets, and scripts.
3. <title> - sets the title of the document, which is displayed at the top of the browser window.
4. <body> - contains the visible content of the web page. Anything that needs to be displayed on the page is placed within the <body> tag.
5. <h1> - <h6> - provide headings of different levels. <h1> is typically used for the most important heading on the page, while <h6> is used for the least important.
6. <p> - used to create paragraphs of text. It automatically adds spacing before and after itself to separate the text as a distinct block.
7. <a> - creates a hyperlink to another page or resource on the Internet. It can be specified using the href attribute, which indicates the link address.
8. <img> - adds an image to the page. It must have the src attribute, which specifies the path to the image.
9. <ul> - creates an unordered list, where each list item is specified with the <li> tag.
10. <ol> - creates an ordered list, where each list item is specified with the <li> tag. The numbering of the items is automatically added.
11. <div> - defines a container for grouping other elements on the web page. It is often used to create blocks with a specific style.
Principles of Building a Web Page
When building a web page, it is important to follow some principles to ensure clean and efficient code:
1. Use proper structure - an HTML document should have a correct hierarchy of elements. Headings should be properly nested, and lists should be placed inside the appropriate tags.
2. Optimize the code - try to avoid excessive use of tags or attributes. Remove any unused elements or attributes.
3. Use semantic markup - allows browsers and search engines to better understand the content of the page. Use tags such as <header>, <nav>, <main>, <article>, and <footer> to indicate which part of the page corresponds to the header, navigation, main content, etc.
4. Separation of style and content - use external CSS files to define the styles of the web page. This allows for easy modifications of the appearance without making changes to each web page.
5. Create an accessible page - ensure that your web page is accessible to all users, including those with disabilities. Use attributes such as alt for images to provide alternative text.
Tricks for Adding Interactivity
HTML also allows for the creation of interactive elements on a web page. Here are a few tricks to help you add interactivity to your page:
1. Forms - use the <form>, <input>, <textarea>, and <button> tags to create forms through which users can submit data to a server.
2. Media elements - HTML allows for embedding audio and video on a web page using the <audio> and <video> tags. You can control playback using JavaScript.
3. Animation - use CSS and JavaScript to create animations on a web page. You can change properties of elements, such as color, size, and position, through animations and transitions.
4. JavaScript scripts - HTML can be integrated with JavaScript, which adds dynamic behavior to a web page. You can use JavaScript for form validation, creating pop-ups, and other interactive actions.
Creating a web page using HTML is easy and straightforward, especially when following the principles of proper markup and using basic tags. As you progress in learning HTML, you'll be able to utilize more advanced features and add interactivity to your web pages using CSS and JavaScript.