Jurnal Pendidikan Indonesia Volume 13. Number 3, 2024 pp. P-ISSN: 2303-288X E-ISSN: 2541-7207 Open Access: https://doi. org/10. 23887/jpiundiksha. HTML-Based Digital Flashcard Media to Improve the Mastery of English Vocabulary of 1st Grade Neta Kurnia Rahma1*. Arif Widagdo2 1,2 Fakultas Ilmu Pendidikan dan Psikologi. Universitas Negeri Semarang. Semarang. Indonesia ARTICLE INFO ABSTRAK Article history: Received May 23, 2024 Accepted August 04, 2024 Available online September 25, 2024 Guru sebagai pelaku utama pembelajaran seringkali tidak menggunakan media pembelajaran untuk menunjang hasil belajar siswa. Penelitian ini bertujuan untuk menciptakan media flashcard digital yang layak dan efektif serta untuk mengetahui apakah media flashcard digital dapat meningkatkan penguasaan kosakata bahasa Inggris siswa kelas I Sekolah Dasar. Media yang dikembangkan adalah flashcard digital. Penelitian ini menggunakan metode RnD dengan model ADDIE. Metode pengumpulan data yang digunakan adalah kuesioner dan tes, sedangkan instrumen pengumpulan data yang digunakan adalah lembar validasi ahli yang dikumpulkan dari penilaian tiga orang ahli, serta tanggapan seorang guru dan 20 siswa kelas 1 Sekolah Dasar dan lembar tes. Metode analisis data yang digunakan dalam penelitian ini adalah data kualitatif dan kuantitatif. Data kualitatif diperoleh dari data analisis kebutuhan, masukan dan saran validasi produk dari validator media, ahli materi, ahli bahasa serta masukan dan saran dari respon guru dan siswa. Hasil penelitian menunjukkan bahwa terdapat peningkatan signifikan dalam penguasaan kosakata bahasa Inggris siswa, yang ditunjukkan oleh perbedaan nilai pretest dan posttest. Sehingga, dapat disimpulkan bahwa media flashcard digital dinilai layak dan efektif digunakan dalam pembelajaran siswa untuk meningkatakn penguasaan kosakata bahasa Inggris siswa. Implikasi dari penelitian ini adalah bahwa penggunaan media pembelajaran digital berbasis HTML dapat diintegrasikan ke dalam kurikulum pembelajaran bahasa Inggris di sekolah dasar. Kata Kunci: Flashcard. Media. Belajar. Bahasa. Inggris Keywords: Flashcard. Media. Learning. Language. English This is an open access article under the CC BY-SA Copyright A2024 by Author. Published by Universitas Pendidikan Ganesha. ABSTRACT As the main learning actors, teachers often do not use learning media to support student learning This study aims to create a feasible and effective digital flashcard media and determine whether digital flashcard media can improve the mastery of English vocabulary of grade I elementary school students. The press developed digital flashcards. This research uses the RnD method with the ADDIE model. The data collection methods used were questionnaires and tests. In contrast, the data collection instruments used were expert validation sheets collected from the assessment of three experts, as well as responses from a teacher and 20 grade 1 elementary school students and test The data analysis methods used in this research are qualitative and quantitative data. Qualitative data was obtained from needs analysis data, input and product validation suggestions from media validators, material experts, and linguists, and input and suggestions from teacher and student The results showed a significant increase in students' mastery of English vocabulary, as indicated by the difference in pretest and posttest scores. Thus, it can be concluded that digital flashcard media is considered feasible and effective for student learning to improve their mastery of English This study implies that the use of HTML-based digital learning media can be integrated into the English learning curriculum in elementary schools. INTRODUCTION Learning media are technologies designed to facilitate the teaching and learning process between teachers and students. Learning media can include applications, websites, and handcrafts created to deliver educational content (Kariadi et al. , 2021. Septem Riza et al. , 2. The use of engaging learning media can create a more active and cheerful learning environment (Hoerudin et al. , 2023. Horovitz & Mayer, 2. Learning media serves as a tool that helps teachers in teaching and creating a conducive learning *Corresponding author E-mail addresses: netakurnia@students. id (Neta Kurnia Rahm. Jurnal Pendidikan Indonesia Vol. No. Tahun 2024, pp. It should be noted that learning media offers various benefits, such as clarifying material, varying teaching methods, attracting student attention, and encouraging active student participation in learning activities. With technological advances, the types of learning media are becoming increasingly diverse, ranging from simple to sophisticated (Sudarmo et al. , 2021. Zhang & Zou, 2. One of the media that can be combined with technology is flashcards. Flashcards are small cards containing words, pictures, or symbols that help students remember related information. The use of flashcards is considered effective because it can present images that are real, practical, interesting, and easy to remember (Haqiqiyah, 2019. Matruty & Que, 2. HTML (Hyper Text Markup Languag. is a document format used to design web pages and present information through web browser applications (Glass, 2020. Ranjan et al. , 2020. Tabarys. By integrating HTML-based flashcards, learning media become more interactive and engaging for Learning English vocabulary in elementary schools often faces various challenges, such as a lack of variety in teaching methods and engaging media (Anwas et al. , 2020. Khulel, 2021. Lukas & Yunus, 2. Based on observations and interviews with teachers at SD Negeri Kuripan 03 in Cilacap Regency, several significant issues have been identified. One of the main problems is the tendency for learning to remain teacher-centered, which results in students becoming passive and less active in asking questions. Additionally, the lack of variety in teaching models causes students to have difficulty concentrating, leading to quick boredom and disengagement. Learning media, especially in English language subjects, is not maximally utilized, making the delivery of material less effective. The use of information technology at the school is also limited, usually only involving projectors with video materials. The monotonous teaching methods, dominated by lectures, cause students to become easily bored and have difficulty remembering new material, particularly English vocabulary. Furthermore, teaching resources for both teachers and students are still limited to self-published curriculum books. Moreover, the facilities available at the school are also limited, so not all learning activities can use optimal learning media The urgency of this research lies in the importance of improving the quality of English language learning at the elementary school level. Mastery of vocabulary is a crucial first step for students to facilitate their acquisition of other English language skills such as listening, reading, viewing, speaking, writing, and These skills are essential for students to compete in the era of globalization and to gain a more engaging and effective learning experience. Previous research has shown that the use of learning media, such as flashcards, is effective in improving students' vocabulary acquisition. Flashcards allow students to learn interactively and visually, which can improve information retention and motivation. For example, research conducted by other researchers showed that flashcards are suitable for students and effective in improving vocabulary acquisition (Syamsiyah & MaAorifatulloh, 2023. Xodabande. Iravi, et al. , 2022. Zakian et al. , 2. Further researchers found that the development of traditional and digital flashcards significantly improved English vocabulary and thematic learning among students (Andriani et al. , 2024. Longchin et al. , 2024. Rahmati & Helmiyadi, 2. In addition, there is research showing the effectiveness of flashcards in introducing cultural knowledge (Arsana & Maharani, 2021. Siti Hardiyanti Pratiwi et al. These studies highlight the potential of flashcards in diverse educational environments. Based on observations and interviews with teachers at SD Negeri Kuripan 03. Cilacap Regency, it was found that the English learning process is not yet optimal. The teaching media used is still limited to projectors with video materials, and the monotonous teaching methods make it difficult for students to remember new vocabulary. Therefore, the development of HTML-based digital flashcards is expected to be an effective and efficient solution to improve students' vocabulary acquisition in English. This research focuses on developing effective teaching media to enhance vocabulary acquisition for first-grade students through the use of HTML-based digital flashcards. Flashcards have been proven effective in various educational contexts for improving vocabulary acquisition (Boroughani et al. , 2023. Xodabande. Pourhassan, et al. , 2. Hence, this study aims to test the feasibility and effectiveness of HTML-based digital flashcards in enhancing students' vocabulary acquisition. This research focuses on the development of HTML-based digital flashcard media to enhance the English vocabulary acquisition of first-grade students at SD Negeri Kuripan 03. Cilacap Regency. The importance of this research lies not only in the development of the educational media itself but also in the assessment of the feasibility and effectiveness of this media in the context of elementary school education. In this process, the HTML-based digital flashcard media will be evaluated for its feasibility and effectiveness in improving students' English vocabulary acquisition, the results of which will provide guidance for future educational media development. Additionally, this research will also consider the technical and pedagogical aspects of media development to ensure that the developed media is not only effective but also easy to use for teachers and students. The novelty of this research lies in the development of digital-based English vocabulary learning media that utilizes HTML as the leading platform. Previous research has shown the effectiveness of various media, such as traditional and digital flashcards, in improving vocabulary acquisition. However, this Neta Kurnia Rahma / HTML-Based Digital Flashcard Media to Improve the Mastery of English Vocabulary of 1st Grade Jurnal Pendidikan Indonesia Vol. No. Tahun 2024, pp. research offers an innovation by integrating HTML technology to create digital flashcards that are more interactive and dynamic. The use of HTML allows the development of more flexible and adaptive media so that materials can be presented in a more exciting and varied way. This media is designed to overcome the challenges in vocabulary learning that have often been faced in SD Negeri Kuripan 03, namely the need for more variety in teaching methods and the dominance of teacher-centered learning. In addition, this research not only focuses on developing innovative learning media but also evaluates the feasibility and effectiveness of the media in a natural learning environment. Thus, the results of this study are expected to make a real contribution to optimizing English vocabulary learning in primary schools, especially in SD Negeri Kuripan 03, and become a reference for the development of similar learning media in the future. The aim of this research is to develop HTML-based digital flashcard media that can enhance the English vocabulary acquisition of first-grade students at SD Negeri Kuripan 03 in Cilacap. Additionally, this study aims to test the feasibility of this digital learning media to ensure that it is suitable and appropriate for use in the context of primary education. Furthermore, this research will evaluate the effectiveness of HTMLbased digital flashcards in improving students' English vocabulary acquisition, with the hope that the results of this study will significantly contribute to efforts to improve the quality of English language learning in primary schools. Thus, this research focuses not only on the development of the media but also on its implementation and evaluation in a real learning environment, ensuring that the resulting media can provide maximum benefits for enhancing students' English language competence. METHOD This research uses a quantitative approach in the type of research and development. The development research method, also known as research and development (R&D), aims to create a product or test the effectiveness of a product. In this study, the development model used is the ADDIE model developed by Reiser and Mollenda (Arjuna et al. , 2024. Avianty & Kartika Sari, 2022. Ningrum et al. , 2. In this study, researchers used non-participant observation techniques and structured observation during pre-research activities to understand the existing problems. The media development procedure is presented in Table 1. Table 1. Media Development Procedure Activities No. Development Stage Activities Analysis Pre-research: observation, teacher interview, document data. Identifying the materials taught in English language learning for grade I students at SD Negeri Kuripan 03 in Cilacap district. Identify learning media needs for students and teachers Design Design a product concept Create an HTML-based digital flashcard media design. Development Creation of the product "HTML-based digital flashcards for English vocabulary acquisition Making the performance assessment instrument of "HTML-based digital flashcards" learning media Validation of media experts, material experts, and linguists. Media experts validate the feasibility of HTML- based digital flashcard media design, while material experts are tasked with validating the feasibility of HTML- based digital flashcard media content, and linguists validate the feasibility of language on HTML-based digital flashcard media Implementation Using the product in learning. Paying attention to student interaction in learning and comparing it with the suitability of the researcher's objectives for developing the product "HTML-based digital Flashcarad". Evaluation Measuring the achievement of the development objectives of the researched and developed product. Analyzing data on learning outcomes of first grade students of SD Negeri Kuripan 03 Cilacap Regency in English language learning. Distribute student and teacher response questionnaires regarding the learning media "HTML-based digital Flashcarad". The whole stage was conducted in the Kuripan State Department 03 for the first class, located in Kuriban Village. Kesugihan Prefecture. Cilacap District. Central Java Province. Sampling in this study uses JPI P-ISSN: 2303-288X E-ISSN: 2541-7207 Jurnal Pendidikan Indonesia Vol. No. Tahun 2024, pp. purposive random sampling technique that involves testing the feasibility of product design from three experts, namely a media expert, a material expert and a linguist. In addition to experts, teachers and students are also involved in determining product eligibility. In order to find out the effectiveness of the product involved ten student subjects for small group trial and twenty student subject for large group trials. Data collection techniques use test techniques to measure student learning outcomes through pretest and posttest administration, while non-test techniques using angket are used to find out media expert, material, and language validation, teacher and student responses when using learning media Flashcard Digital Vocabulary (FLADIVO). While the instruments used are test sheets and questionnaire sheets. The data analysis techniques used in this study are qualitative and quantitative data. Qualitative data is derived from needs analysis data, input and product validation advice from media validators, material experts, linguists as well as input and advice from teacher and student responses. Learning results have to be analyzed to see how it improves. This analysis is done using the Gain Normality Test (N-Gai. This research was conducted at SD Negeri Kurpan 03 which is located at Jl. Kendeng. Kuripan. Kesugihan District. Cilacap Regency. Central Java. Qualitative data in this study were obtained from the results of interviews, documentation data, and observations made in class I of Kuripan 03 State Elementary School. Cilacap Regency. While quantitative data in this study is in the form of student learning outcomes in English subjects in class I SD Negeri Kuripan 03 Cilacap Regency. Data sources to determine the need for prototypes, feasibility, and effectiveness of HTML-based digital flashcard media are students, teachers, and experts. RESULT AND DISCUSSION Result The recapitulation of teachers' needs for HTML-based digital flashcards is presented in Table 2. Tabel 2. Recapitulation of Teachers' Needs for HTML-Based Digital Flashcards Indicator Asked Do you think English is difficult to teach to Grade 1 students? Do you think students have difficulty mastering new English vocabulary? Do you think students need to master English vocabulary? Do you think that the media available at school does not motivate students to learn? Do you think the use of media can help students master new vocabulary in English? Do you think you use media in learning English? Do you think you need interesting media in learning English? In your opinion, do you agree with flashcards for students' vocabulary mastery? In your opinion, do you agree that the flashcards are digital flashcards? In your opinion, do you agree that digital flashcards are HTML-based? In your opinion, do you agree that digital flashcards can be accessed when there is or is not an internet network? In your opinion, what tools do you want to use in digital flashcards? In your opinion, do you agree if digital flashcards contain numbers? In your opinion, do you agree if digital flashcards contain color? In your opinion, do you agree that digital flashcards contain animals? Do you agree that digital flashcards are about the classroom? Do you agree that digital flashcards are about family? In your opinion, do you agree if digital flashcards contain fruit? In your opinion, do you agree if digital flashcards are equipped with two languages, namely Indonesian and English? In your opinion, do you agree if digital flashcards are equipped with attractive In your opinion, do you agree if digital flashcards use bright colors? In your opinion, do you agree that digital flashcards have a variety of attractive images? In your opinion, how does a good letter font look on digital flashcards? Answer Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Laptop and Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Fonts with a cheerful Table 2 shows that students have difficulty in mastering English vocabulary. Teachers do not use learning media, so students are less motivated. To increase students' interest in learning, it is necessary to develop digital learning media in the form of flashcards. This media should contain vocabulary according to Neta Kurnia Rahma / HTML-Based Digital Flashcard Media to Improve the Mastery of English Vocabulary of 1st Grade Jurnal Pendidikan Indonesia Vol. No. Tahun 2024, pp. the phase A curriculum for grade 1 students. The presentation of the material should be short, concise, clear, and easy to understand. The flashcard design should be attractive with bright color harmonization, good fonts, and attractive images and animations. This media should also be easy to use by teachers and students. The results of the recapitulation of student needs for HTML-based digital flashcard media are presented in Table 3. Tabel 3. Recapitulation of StudentAos Needs for HTML-Based Digital Flashcards Question Is learning English difficult? Is learning English fun? Are you having trouble under standing new English Vocabulary? Does the teacher ever use media when learning English? Is the media used by the teacher interesting? Do you want media in English learning? Have you ever used card media to learn? Do you know flashcards? Do you agree with flashcards for English learning? Do you like the media displayed on the computer? Do you agree that flashcards are digital? Do you like letterforms with a playful feel? Do you like learning media with pictures? Do you like colorful learning media? Do you agree that flashcards use bright colors? Answer Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Total Percentage Table 3 shows that many students have difficulty in learning and understanding English They need media that is interesting and fun. The questionnaire results show students' interest in the development of flashcards. Therefore, the researcher developed learning media in the form of flashcards in accordance with the wishes of students. The flashcards are designed with an attractive appearance, using brightly colored images, cheerful letters, and an overall appearance with bright colors to help students master English vocabulary. The feasibility assessment of HTML-based digital flashcard media was conducted by media validators, material validators, and language validators. Validation was carried out on content by material experts, presentation by media experts, and language by linguists. The assessment results are expressed in 4 criteria: very feasible . %-100%), feasible . %-75%), quite feasible . P%), and not feasible . %-25%). The decision to use HTML-based digital flashcards will be based on the assessment results from these experts. After analyzing the questionnaire data on the needs of students and teachers, the researchers made a design for the development of digital flashcard media to improve students' mastery of English vocabulary. In designing this interactive flipbook product, it starts from making a prototype, then developing the design with the Canva application, editing and finishing in the Microsoft Power Point application, then converting the file into HTML (HyperText Markup Languag. , and hosting HTML (HyperText Markup Languag. into a link that can be disseminated. The flashcard media developed is an electronic learning media that combines text, images, and audio presented in the form of digital flashcards that resemble word cards. The material contained in this learning media is English learning material for grade I SD. HTML-Based Digital Flashcard Media Design showed in Figure 1. JPI P-ISSN: 2303-288X E-ISSN: 2541-7207 Jurnal Pendidikan Indonesia Vol. No. Tahun 2024, pp. Figure 1. HTML-Based Digital Flashcard Media Design The following are the Pretest and Posttest Average Difference Test Results presented in Table 4, the N-Gain Test Results presented in Table 5. After verifying that the data was normally distributed, a mean difference test was conducted using paired-sample t-test. The results showed a significant difference between learning outcomes before and after using HTML-based digital flashcard media, with a significant value of 0. Furthermore, the n-gain test was conducted to see the average increase in learning From the results of the N-Gain test carried out to determine the effectiveness of teaching methods, we can see that the N-Gain figure is 0. 68 or 68%. From the N-Gain Score Effectiveness Interpretation Category table above, we can conclude that the effectiveness of the HTML-Based Digital Flashcards for English Vocabulary Mastery Improvement learning method is seen from the posttest and pretest data Table 4. Pretest and Posttest Average Difference Test Results Mean Std. Deviation Std. Error Means Pair 1 PretestPosttest 95% Confidence Interval of the Lower Higher Sig. Table 5. N-Gain Test Results N-Gain Valid N . Minimum Maximum Mean Std. Deviation Discussion This study departs from the problem of students' difficulties in mastering English vocabulary, which affects their English grades. The students' difficulty is caused by the lack of interesting and varied learning media in presenting the material. Therefore, the researcher developed learning media in the form of digital flashcards as a learning alternative. This development follows the ADDIE research model, which involves analyzing student and teacher needs, designing, developing, implementing, and evaluating. The needs analysis of students and teachers was conducted through a questionnaire which showed that many students had difficulty understanding English vocabulary and were interested in learning media innovations, such as digital flashcards. The design stage involved prototyping and design using Canva Development was carried out by adding supporting components such as images, text, animation, and audio using Microsoft PowerPoint. The digital flashcards are then converted into HTML and After that, the media was evaluated by media, material, and language experts for improvement. The pilot test was conducted in small groups and implemented in classroom learning. Evaluation was conducted through questionnaires to students and teachers, which showed a high level of agreement on the feasibility and effectiveness of HTML-based digital flashcards in English language learning. The results of the feasibility assessment of HTML-based digital flashcard learning media were carried out by media, material and language experts using validation instruments that had been previously developed by researchers. This assessment refers to the predetermined validity criteria. The results of the assessment from each expert are then interpreted with the Purwanto formula to determine the media Neta Kurnia Rahma / HTML-Based Digital Flashcard Media to Improve the Mastery of English Vocabulary of 1st Grade Jurnal Pendidikan Indonesia Vol. No. Tahun 2024, pp. feasibility category. Validation by media experts, conducted by Mr. Drs. Sigit Yulianto. Pd. , showed that the digital flashcard media was very feasible to use with a percentage of 100%. Validation by material experts, conducted by Mr. Arif Widagdo. Pd. Pd. , also showed that the media was very feasible with a percentage of 96. Meanwhile, validation by linguists, also conducted by Mr. Arif Widagdo. Pd. Pd. showed the feasibility of the media with a percentage of 96. With an average percentage of 97. 76%, it can be concluded that the HTML-based digital flashcard media is very feasible to use to improve students' mastery of English vocabulary. This is reinforced by several other studies that English Vocabulary Card media is declared feasible to be implemented in elementary schools (Kesumawati et al. , 2022. Liando et al. Yilmaz et al. , 2. The effectiveness of HTML-based digital flashcards was assessed by looking at cognitive learning outcomes in the form of pretests and posttests. The pretest measures the value before students use digital flashcards, while the posttest measures the value after using the media. This research was conducted at SD Negeri Kuripan 03 Cilacap district in class I with 20 students. Data in the form of pretest and posttest scores were analyzed using paired-sample t-test, and n-gain test to determine the effectiveness of the media. The mean score of the pretest was 65. 01, with 25% of students achieving a complete score, while the mean score of the posttest was 86. 67, with 85% of students achieving a complete score. There was an increase in scores from pretest to posttest, showing the difference in learning outcomes before and after using digital The results of this research are supported by previous studies. This is reinforced by several other studies which reveal that English Vocabulary Card media is declared effective to be implemented in elementary schools (Lei & Reynolds, 2022. Wani et al. , 2. This research has several advantages, including the development of innovative, digital-based learning media that can be accessed by students on various devices. HTML-based digital flashcards allow students to learn independently and interactively and provide a more enjoyable and varied learning In addition, this media is designed to be used by teachers in various learning models, both online and offline, so that it is more flexible and adaptive to current learning conditions. The results of this study contribute to the development of English learning media in elementary schools, especially for vocabulary This HTML-based digital flashcard media can overcome the problem of students' low vocabulary mastery due to the lack of variety in learning methods and limited press. This media can also be a reference for teachers and education developers creating innovative learning media that utilize digital technology. This research implies that HTML-based digital learning media can be integrated into the English learning curriculum in elementary schools. This media can help teachers create more interactive learning and increase students' active participation in education. It can also be utilized as an independent learning tool for students to improve their mastery of English vocabulary outside of school hours. Although this study has shown positive results, some limitations must be considered. First, this research was only conducted in one school with limited samples. Hence, the generalization of the research results still needs to be further tested in various schools with larger samples. Second, the learning media developed is HTML-based, which requires adequate devices and internet connection. Therefore, for future research, it is suggested that these media be designed in a more straightforward format so that schools with limited technological facilities can access them. In addition, further research can test the effectiveness of this media by considering variations in students' backgrounds, such as initial English language ability and interest in learning. Further research could also integrate this media with other learning methods, such as gamification, to create a more engaging and practical learning experience. CONCLUSION The research conducted is research and development. Digital Flashcard Media based on HTML (HyperText Markup Languag. for improving mastery of English vocabulary is a product developed in research with the ADDIE development research model involving five stages, namely analysis . , design . , development . , implementation . , and evaluation . The HTML (HyperText Markup Languag. based digital flashcard media was declared very feasible to be applied in grade I English learning activities. Research and development of digital flashcard media based on HTML (HyperText Markup Languag. for first grade students of SD Negeri Kuripan 03 Cilacap district succeeded in improving student learning outcomes. This is indicated by an increase in the average student score by 60% in the posttest when compared to the pretest. With the difference between pretest scores and posttest scores, then to determine the category of value increase obtained through the n-gain value. Cognitive n-gain was obtained at 0. 6858 with a moderate category. JPI P-ISSN: 2303-288X E-ISSN: 2541-7207 Jurnal Pendidikan Indonesia Vol. No. Tahun 2024, pp. REFERENCES